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

この記事では、Twitter(PCウェブサイト版)の検索ボタンを、左側に表示する方法について書きます。
ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を使います。

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

さらに、僕の場合、右側のサイドバーにある「おすすめツイート」、「おすすめユーザー」、「いまどうしてる?」などの項目を、非表示にしています。
検索ボックス以外の右サイドバー項目を非表示にしたので、余計に検索ボックスの位置が気になってしまいました。検索ボックスだけ右にあるのってなんか違和感ですよね。
同じように、「右側のサイドバーを消しているけど、検索ボックスは使いたい!だけど、右上にポツンとあるのが違和感!よくアクセスする左側ナビゲーション項目と一緒に配置したい!」という方、ぜひ試してみてください。
CSSで見た目上変えているだけなので、誰にも迷惑をかけません。オンオフも簡単です。戻したくなったらコードを削除するだけです。
Stylebotは、Chrome拡張機能だけでなく、Firefox、Microsoft Edgeアドオンも用意されています。
インストール方法
ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を利用します。
Chromeウェブストアからインストールできます。
Chrome拡張機能だけでなく、Microsoft EdgeとFirefox版もあります。
「Chromeに追加」をクリックしてインストールします。

右上に拡張機能ボタンが追加されればOKです。詳しく使い方を知りたい方は、以下の記事を参考にしてみてください。
Twitterの検索ボックスを左側に移動するCSS
「Twitter」にアクセスします。右上の拡張機能アイコン→「Stylebotを開く」をクリックします。

右側に白紙のサイドバーが表示されます。こちらにコードを書き込んでいきます。書き込むコードは、以下になっています。ダーク、ダークブルー、ライト、どのテーマを使っていても反映されると思います。
/*検索欄を左に移動*/
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です。右上の「×」でスタイルシートを閉じます。

再度拡張機能ボタンを押して、登録したサイト(例:twitter.com)がオンになっていることを確認します。オンになっている間は有効になっているということです。
コードが有効になっている間、キーワード検索ボタンが左側に移動します。ページのリロードは必要ありません。 パソコンのディスプレイによっては、表示位置がずれます。下記画像だと、ちょっと左側に寄りすぎています。

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

僕の環境では、80remにすると、いい感じに配置されました。ここの数値は、使っているディスプレイのサイズによるので、確認しながら調整してみてください。注意点ですが、数字は半角数字で入力します。数字以外は弄らないように注意です。
話題を検索する時や、実際に検索した時は、通常通り中央上に表示されます。

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

以下、簡単にCSSの意味を書いておきます。「どうでもいい!」という方は、読まなくてOKです。
本記事のCSSの解説 | |
---|---|
検索欄を左に移動 | キーワード検索ボタンを左に移動するCSSです。これがないと始まりません。 |
サイドバーのメニュー項目を少し下にずらす | 検索ボタンを移動しただけだと、左側のサイドバーにあるメニュー項目たちとぶつかってしまいます。そこで重ならないように、「ホーム」や「話題を検索」のメニュー項目を下にずらしています。 |
メニュー項目の表示順位(z-index)を下げる | サイドバー左側の主張が激しかったせいで、検索ボタンを移動したところで、検索できない問題が発生しました。そこで、サイドバーのメニュー項目のレイヤーを、検索欄よりも下の階層にしました。これで検索機能が使えます。 |
左上のTwitterロゴ画像の非表示 | 人によっては、不要なCSSです。個人的に左上のTwitterロゴはいらなかったので、非表示にしました。 |
一時的に無効化したい場合は、Stylebot→「twitter.com」をオフにします。完全に使わなくなった場合は、書き込んだコードを削除します。
感想
以上、PCの「Twitter」の検索ボタンを、左側サイドバーの一番上に移動するCSSでした。
右側サイドバーを非表示にして、タイムラインの横幅を広げると、かなり快適にTwitterできます。