【Stylebot】Twitterの検索ボタンを左側に移動するCSS
この記事では、Twitter（PCウェブサイト版）の検索ボタンを、左側に表示する方法について書きます。
ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を使います。
本記事で紹介するCSSを使えば、Twitterの検索ボックスを左側に移動できます。
通常、パソコン版Twitterの検索ボタン（キーワード検索）は、サイドバー右側に表示されています。左側のサイドバーをメインで使っている人からすると、いちいち検索するために、右側にマウスを持っていくのはめんどくさいです。
さらに、僕の場合、右側のサイドバーにある「おすすめツイート」、「おすすめユーザー」、「いまどうしてる？」などの項目を、非表示にしています。
https://www.naporitansushi.com/twitter-sidebar/検索ボックス以外の右サイドバー項目を非表示にしたので、余計に検索ボックスの位置が気になってしまいました。検索ボックスだけ右にあるのってなんか違和感ですよね。
同じように、「右側のサイドバーを消しているけど、検索ボックスは使いたい！だけど、右上にポツンとあるのが違和感！よくアクセスする左側ナビゲーション項目と一緒に配置したい！」という方、ぜひ試してみてください。
CSSで見た目上変えているだけなので、誰にも迷惑をかけません。オンオフも簡単です。戻したくなったらコードを削除するだけです。
Stylebotは、Chrome拡張機能だけでなく、Firefox、Microsoft Edgeアドオンも用意されています。
インストール方法
ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を利用します。
Chromeウェブストアからインストールできます。
https://chrome.google.com/webstore/detail/stylebot/oiaejidbm...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できます。