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

2021年11月20日Stylebot&Stylus

Twitterのアイコン

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

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

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

ウェブサイトを、CSSで自由にカスタマイズできるChrome拡張機能「Stylebot」を使うことで、Twitterの検索ボタンを左側に移動できます。

通常、パソコン版Twitterの検索ボタン(キーワード検索)は、サイドバー右側に表示されています。この位置を好きなように調整できます。

僕は、右側のサイドバーにある「おすすめツイート」、「おすすめユーザー」、「いまどうしてる?」などの項目を、CSSで非表示にしています。詳しくは下記記事を参考にしてみてください。不要な項目を消すことで、かなりスッキリします。

その際、検索ボックスだけ右側にあるのが違和感だったので、左側のナビゲーション項目に移動してみたいと思います。

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

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

前提

この記事は、既にStylebotをインストールして、なおかつ簡単な使い方を知っている前提です。ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能です。

まだインストールしていない方は、以下の記事を参考にしてみてください。

Firefoxをご利用の場合

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

Firefoxをご利用の方は、以下のFirefoxアドオンストアからインストールできます。

「Firefoxへ追加」をクリックします。

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

インストールできたら、Twitterにアクセスします。Stylebotのアイコンをクリック→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;
}
2022年5月15日追記

以前までは、ライト、ダーク、ダークブルー、文字サイズによって、別々のCSSを紹介していました。しかし、ちょっと管理が手間なのと、全てのテーマで共通して使えたら便利だなーと思ったので、色々試行錯誤してみました。

そして、上記コードが完成しました。どの文字サイズ、どのテーマを使っていても反映されることを確認しました。

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

Stylebot Twitterの検索ボックスを左側に移動するコードを書き込んだ画面

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

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

Twitterのキーワード検索ボタンが左に移動する

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

「right: 1000px;」で左右の位置を調整できる

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

僕の場合、900pxで、ちょーどいい感じに配置された

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

「話題を検索」ページ内の検索ボックスは、これまで通り中央上に表示される

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

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

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

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

感想

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

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

Posted by ナポリタン寿司