【Stylebot】Twitterの検索ボタンを左側に移動するCSS

2021年11月20日Twitter

Twitterのアイコン

この記事では、Twitter(PCウェブサイト版)の検索ボタンを、左側に表示する方法について書きます。

ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を使います。

Twitterの検索ボックスを左上に配置した画像1

本記事で紹介するCSSを使えば、Twitterの検索ボックスを左側に移動できます。

通常、パソコン版Twitterの検索ボタン(キーワード検索)は、サイドバー右側に表示されています。左側のサイドバーをメインで使っている人からすると、いちいち検索するために、右側にマウスを持っていくのはめんどくさいです。

Twitterのスクリーンショット

さらに、僕の場合、右側のサイドバーにある「おすすめツイート」、「おすすめユーザー」、「いまどうしてる?」などの項目を、非表示にしています。

検索ボックス以外の右サイドバー項目を非表示にしたので、余計に検索ボックスの位置が気になってしまいました。検索ボックスだけ右にあるのってなんか違和感ですよね。

同じように、「右側のサイドバーを消しているけど、検索ボックスは使いたい!だけど、右上にポツンとあるのが違和感!よくアクセスする左側ナビゲーション項目と一緒に配置したい!」という方、ぜひ試してみてください。

CSSで見た目上変えているだけなので、誰にも迷惑をかけません。オンオフも簡単です。戻したくなったらコードを削除するだけです。

Stylebotは、Chrome拡張機能だけでなく、Firefox、Microsoft Edgeアドオンも用意されています。

インストール方法

ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を利用します。

Chromeウェブストアからインストールできます。

Firefox・Edgeをご利用の場合

Chrome拡張機能だけでなく、Microsoft EdgeFirefox版もあります。

「Chromeに追加」をクリックしてインストールします。

Stylebot - Chrome ウェブストア

右上に拡張機能ボタンが追加されればOKです。詳しく使い方を知りたい方は、以下の記事を参考にしてみてください。

Twitterの検索ボックスを左側に移動するCSS

Twitter」にアクセスします。右上の拡張機能アイコン→「Stylebotを開く」をクリックします。

Stylebotのスクリーンショット1

右側に白紙のサイドバーが表示されます。こちらにコードを書き込んでいきます。書き込むコードは、以下になっています。ダーク、ダークブルー、ライト、どのテーマを使っていても反映されると思います。

/*検索欄を左に移動*/
div[class*="css-1dbjc4n r-1awozwy r-aqfbo4"] {
  position: relative;
  z-index: 100;
  width: 70%;
  right: 60rem;
}

/*サイドバーのメニュー項目を少し下にずらす*/
.css-1dbjc4n.r-aqfbo4.r-1pi2tsx.r-1xcajam.r-ipm5af {
  top: 5em;
}

/*検索欄が使えるように、メニュー項目の表示順位(z-index)を下げる*/
header.css-1dbjc4n.r-obd0qt.r-16y2uox.r-lrvibr.r-1g40b8q {
  z-index: 0;
}

/*左上のTwitter ロゴ画像の非表示*/
.css-1dbjc4n.r-dnmrzs.r-1vvnge1 {
  display: none;
}

/*左下のユーザーアイコン+ユーザー名を少し上に移動*/
div[aria-label="アカウントメニュー"] {
  bottom: 10rem;
}

下記画像のようになればOKです。右上の「×」でスタイルシートを閉じます。

Stylebotのスクリーンショット2

再度拡張機能ボタンを押して、登録したサイト(例:twitter.com)がオンになっていることを確認します。オンになっている間は有効になっているということです。

コードが有効になっている間、キーワード検索ボタンが左側に移動します。ページのリロードは必要ありません。 パソコンのディスプレイによっては、表示位置がずれます。下記画像だと、ちょっと左側に寄りすぎています。

Twitterの検索ボックスを左上に配置した画像2

その場合、CSSの「検索欄を左に移動」の中にある「right」の数字を調整します。

Stylebotのスクリーンショット3

僕の環境では、80remにすると、いい感じに配置されました。ここの数値は、使っているディスプレイのサイズによるので、確認しながら調整してみてください。注意点ですが、数字は半角数字で入力します。数字以外は弄らないように注意です。

話題を検索する時や、実際に検索した時は、通常通り中央上に表示されます。

「話題を検索」ページのスクリーンショット

ライトモード時でも反映されます。

ライトテーマ使用時に、検索ボックスを左上に配置した画像

以下、簡単にCSSの意味を書いておきます。「どうでもいい!」という方は、読まなくてOKです。

本記事のCSSの解説
検索欄を左に移動キーワード検索ボタンを左に移動するCSSです。これがないと始まりません。
サイドバーのメニュー項目を少し下にずらす検索ボタンを移動しただけだと、左側のサイドバーにあるメニュー項目たちとぶつかってしまいます。そこで重ならないように、「ホーム」や「話題を検索」のメニュー項目を下にずらしています。
メニュー項目の表示順位(z-index)を下げるサイドバー左側の主張が激しかったせいで、検索ボタンを移動したところで、検索できない問題が発生しました。そこで、サイドバーのメニュー項目のレイヤーを、検索欄よりも下の階層にしました。これで検索機能が使えます。
左上のTwitterロゴ画像の非表示人によっては、不要なCSSです。個人的に左上のTwitterロゴはいらなかったので、非表示にしました。

一時的に無効化したい場合は、Stylebot→「twitter.com」をオフにします。完全に使わなくなった場合は、書き込んだコードを削除します。

感想

以上、PCの「Twitter」の検索ボタンを、左側サイドバーの一番上に移動するCSSでした。

右側サイドバーを非表示にして、タイムラインの横幅を広げると、かなり快適にTwitterできます。

2021年11月20日Twitter