【Stylebot】Twitterの検索ボタンを左側に移動するCSS
この記事では、PCで見た時Twitterウェブサイトの検索ボタンを、左側に表示する方法について書きます。
ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を使います。
ウェブサイトを、CSSで自由にカスタマイズできるChrome拡張機能「Stylebot」を使うことで、Twitterの検索ボタンを左側に移動できます。
通常、パソコン版Twitterの検索ボタン（キーワード検索）は、サイドバー右側に表示されています。この位置を好きなように調整できます。
僕は、右側のサイドバーにある「おすすめツイート」、「おすすめユーザー」、「いまどうしてる？」などの項目を、CSSで非表示にしています。詳しくは下記記事を参考にしてみてください。不要な項目を消すことで、かなりスッキリします。
その際、検索ボックスだけ右側にあるのが違和感だったので、左側のナビゲーション項目に移動してみたいと思います。
「右側のサイドバー消しているけど、検索ボックスは使いたい！だけど、右上にポツンとあるのが少し違和感！よくアクセスする左側ナビゲーション項目と一緒のところに配置したい！」という方、ぜひ試してみてください。戻す時も簡単です。
本記事で使う拡張機能Stylebotは、Chrome拡張機能だけでなく、Firefox、Microsoft Edgeアドオンも用意されています。
前提
この記事は、既にStylebotをインストールして、なおかつ簡単な使い方を知っている前提です。ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能です。
まだインストールしていない方は、以下の記事を参考にしてみてください。
Chrome拡張機能だけでなく、Microsoft EdgeとFirefox版もあります。
Firefoxをご利用の方は、以下のFirefoxアドオンストアからインストールできます。
https://addons.mozilla.org/en-US/firefox/addon/stylebot-web/「Firefoxへ追加」をクリックします。
Twitterの検索ボックスを左側に移動するCSS
インストールできたら、Twitterにアクセスします。Stylebotのアイコンをクリック→Stylebotを開くをクリックします。
右側に白紙のサイドバーが表示されます。こちらにコードを書き込んでいきます。書き込むコードは、以下になっています。
/*検索欄を左に移動*/
div[class*="css-1dbjc4n r-1awozwy r-aqfbo4"] {
position: relative;
z-index: 100;
width: 250px;
right: 1000px;
padding-top: 10px;
}
/*サイドバーのメニュー項目を少し下にずらす*/
.css-1dbjc4n.r-aqfbo4.r-1pi2tsx.r-1xcajam.r-ipm5af {
top: 60px;
}
/*検索欄が使えるように、メニュー項目の表示順位(z-index）を下げる*/
header.css-1dbjc4n.r-obd0qt.r-16y2uox.r-lrvibr.r-1g40b8q {
position: relative;
z-index: 0;
}
/*左上のTwitter ロゴ画像の非表示*/
.css-1dbjc4n.r-dnmrzs.r-1vvnge1 {
display: none;
}
/*左下のユーザーアイコン＋ユーザー名を少し上に移動*/
div[aria-label="アカウントメニュー"] {
bottom: 100px;
}以前までは、ライト、ダーク、ダークブルー、文字サイズによって、別々のCSSを紹介していました。しかし、ちょっと管理が手間なのと、全てのテーマで共通して使えたら便利だなーと思ったので、色々試行錯誤してみました。
そして、上記コードが完成しました。どの文字サイズ、どのテーマを使っていても反映されることを確認しました。
下記画像のようになればOKです。右上の「×」でスタイルシートを閉じます。
再度拡張機能ボタンを押して、登録したサイト（例：twitter.com）がオンになっていることを確認します。オンになっている間は有効になっているということです。
コードが有効になっている間、キーワード検索ボタンが左側に移動します。ページのリロードは必要ありません。 パソコンのディスプレイによっては、表示位置がずれます。下記画像だと、ちょっと左側に寄りすぎています。
その場合、CSSの「検索欄を左に移動」の中にある「right: 1000px;」の数字を調整します。
僕の環境では、900pxにするといい感じに配置されました。ここの数値は、使っているディスプレイのサイズによるので、確認しながら調整してみてください。注意点ですが、数字は半角数字で入力します。数字以外は弄らないように注意です。
話題を検索する時や、実際に検索した時は、通常通り中央上に表示されます。
ライトモード時でも反映されます。
以下、簡単にCSSの意味を書いておきます。「どうでもいい！」という方は、読まなくてOKです。
| 検索欄を左に移動 | キーワード検索ボタンを左に移動するCSSです。これがないと始まりません。 |
| サイドバーのメニュー項目を少し下にずらす | 検索ボタンを移動しただけだと、左側のサイドバーにあるメニュー項目たちとぶつかってしまいます。そこで重ならないように「ホーム」や「話題を検索」のメニュー項目を下にずらしています。 |
| メニュー項目の表示順位(z-index）を下げる | サイドバー左側の主張が激しかったせいで、検索ボタンを移動したところで、検索できない問題が発生しました。そこで、サイドバーのメニュー項目のレイヤーを、検索欄よりも下の階層にしました。これで検索機能が使えます。 |
| 左上のTwitterロゴ画像の非表示 | 人によっては、不要なCSSです。個人的に左上のTwitterロゴはいらなかったので、非表示にしました。 |
感想
以上、Twitterの検索ボタンを、左側サイドバーの一番上に移動するCSSでした。
右側サイドバーを非表示にして、タイムラインの横幅を広げると、かなり快適にTwitterできます。