【Twitter】検索候補をスタイリッシュコンパクトにするCSS

2022年11月24日Twitter関連

Twitterのアイコン

この記事では、「Twitter(PC版)」のキーワード検索の候補ボックスを、スタイリッシュにコンパクト化するCSSについて書きます。

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

「Twitter」の検索候補をCSSでコンパクト化した画像

本記事で紹介するCSSを使えば、PC版Twitterの検索候補を、コンパクトにできます。コンパクトにすることで、画面がスッキリします。スッキリするのが好きな方、参考にしてみてください。いつでもオンオフできます。

具体的には、以下の部分を調整します。

  • 検索候補の背景色を半分以降、透過させて見た目的にスッキリさせる
  • 検索候補のタイトルのフォントサイズ(最新、保存した検索)
  • 検索したキーワード、保存したキーワード間の間隔
  • 検索アイコンのサイズ
  • 候補のアカウントのアイコンサイズ縮小

通常は、以下のように、かなり広いスペースを取っています。検索アイコン(🔍)も大きく、キーワード間の余白も大きいです。

「Twitter」の検索候補のスクリーンショット

以前、読者様に教えてもらってから、YouTubeやらGoogleやらの検索候補のコンパクト化にはまっています。

Google検索結果ページをコンパクト化する記事は書いていましたが、検索候補のコンパクト化は書いていませんでした。なんで今まで気づかなかったんだろうとびっくりです。

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

インストール方法

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

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

Firefox・Edgeをご利用の場合

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

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

Stylebot - Chrome ウェブストア

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

Twitterの検索候補をコンパクトにするCSS

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

Stylebotのスクリーンショット

右側に白紙のサイドバーが表示されます。こちらにコードを書き込んでいきます。書き込むコードは、以下になっています。

/*検索候補の背景色*/
form[aria-label="キーワード検索"]>div:nth-of-type(2)>div {
  background: linear-gradient(90deg, rgba(21, 32, 43, 1)80%, rgba(21, 32, 43, 0.88));
}

/*検索候補のタイトルのフォントサイズ*/
div[id*=typeaheadDropdown]>div[data-testid^="typeahead"]>div {
  font-size: 15px;
}

/*検索候補のキーワード間の余白*/
div[id*=typeaheadDropdown]>div,
div[id*=typeaheadDropdown]>div>div,
div[data-testid="TypeaheadUser"] {
  padding: 0 6px;
}

/*検索候補のキーワード横の検索アイコンのサイズ*/
.css-1dbjc4n.r-1awozwy.r-1b3fm86.r-sdzlij.r-1phboty.r-1yadl64.r-1777fci {
  height: 16px !important;
  width: 16px !important;
}

/*検索候補の検索アイコンとキーワードの間隔*/
div[id*=typeaheadDropdown] div[data-testid$="SearchesItem"]>div>div:first-of-type {
  margin-right: -28px;
  justify-content: center;
}

/*検索候補内にある候補アカウントの画像の横幅*/
div[data-testid="TypeaheadUser"] .r-18kxxzh.r-1h0z5md {
  flex-basis: 30px !important;
}

/*検索候補内にある候補アカウントの高さ*/
div[data-testid="TypeaheadUser"] div[data-testid^="UserAvatar-Container"] {
  height: auto;
}

CSSがよく分からない場合は、とりあえずコピペして、結果を確かめてから、地道に修正するといいかなと思います。

右上の「×」でスタイルシートを閉じます。

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

「話題を検索」ページを開いて、上部の検索ボックスにカーソルを当てます。検索候補が表示されるので、変化を確かめます。上記CSSをそのまま適用した比較画像を貼っておきます。

Twitterの検索候補をスタイリッシュコンパクトにした比較画像

大幅にきゅっとなって、コンパクトになりました。

「話題を検索」ページの検索候補だけでなく、サイドバーにある検索候補にも反映されます。

サイドバーの検索候補のスクリーンショット

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

以下、詳しく解説します。自分の好きなように改造してみてください。

検索候補の背景色

背景色は、グラデーションにしています。半分より後ろは透過するようにしました。透過することで、横幅を変えずに、スッキリした感を味わえます。

検索候補の背景をグラデーションにした画像

コードを分解して説明します。

linear-gradientグラデーションを使うよ~という意味
90degグラデーションの傾き度。「90deg」は、綺麗に縦で色を分割するという意味
0~180の中から指定できる。
rgba(21,32,43,1)背景色の指定。最初の「rgba」が一色目。最後の「rgba」が二色目
80%色を切り替える場所。最初から80%まで一色目、それ以降は二色目に変えるという意味
今回のCSSの場合、80%以降、徐々に透過させるという意味

とりあえず、色と割合が重要かと思います。今回紹介した「rgba(21,32,43,1)」は、ダークブルーテーマ用です。ライトテーマを使っている人がそのまま適用すると、下記画像のように、色がおかしいことになります。

ライトテーマにダークテーマ用の検索候補背景色を適用した画像

そこで、以下のように、「rgba」の値を変更します。色は、こちらのサイトで調べられます。

/*検索候補の背景色*/
form[aria-label="キーワード検索"]>div:nth-of-type(2)>div {
    background: linear-gradient(90deg, rgba(255,255,255,1)80%, rgba(255,255,255,0.88));
}

「rgba(255,255,255,1)」だと、検索候補の背景色が白色になり、ライトテーマにあうようになります。

ライトテーマ用に最適化した検索候補背景色の画像

「rgba(255,255,255,1)」内にある最後の「1」は透明度です。「1」は、透明にしないという意味です。0~1の中から設定できます。2色目は「0.88」にしています。

つまり、一色目は普通に色を表示するけど、二色目は、ちょっとだけ透明にするという意味になっています。「0」が完全透明なので、「0.88」はそこまで透過しません。

「そもそもグラデーションなんていらない!色は一色にしてほしい!」という場合は、以下のコードを利用します。これで、背景が真っ白になり、透過しなくなります。

/*検索候補の背景色*/
form[aria-label="キーワード検索"]>div:nth-of-type(2)>div {
  background: #fff;
}

ダークブルーテーマの場合は、「background: #15202b;」で、いい感じになると思います。

検索候補のタイトルのフォントサイズ

検索候補内に表示される見出しタイトルのフォントサイズです。デフォルトでは「20px」になっています。

検索候補内のタイトルに矢印を入れた画像

検索候補のキーワード横の検索アイコンのサイズ

キーワードの左側に表示される検索アイコンのサイズです。ここを小さくすることで、自動的に検索キーワードの間隔も狭くなります。

検索候補内のアイコンに矢印を入れた画像

「検索アイコンはいらない!」という方は、代わりに以下のCSSを使ってみてください。

/*検索候補のキーワード横の検索アイコン非表示*/
div[id*=typeaheadDropdown] div[data-testid$="SearchesItem"]>div>div:first-of-type {
  display: none;
}
検索候補内の虫眼鏡アイコンを削除した画像

検索候補の検索アイコンとキーワードの間隔

検索アイコンと検索キーワードの間隔です。「margin-right」の数値で調整できます。使っているブラウザや、他のCSSによって、検索アイコンとキーワードが被ると思うので、各自で合うように調整してみてください。

検索候補内のアイコンとキーワードの間隔に矢印を入れた画像

「justify-content: center」は、検索アイコンを垂直方向の中央揃えにするコードです。

検索候補内に表示されるアカウント

検索するキーワードによって表示される候補アカウントもコンパクトにしています。

検索候補のアカウントをコンパクトにした画像

「候補アカウントの画像の横幅」の数値を調整することで、もう少し画像を大きくできます。僕は結構ぎゅうぎゅうが好きなので、詰めています。

感想

以上、「Twitter(PC版)」内で用意されているキーワード検索候補を、スタイリッシュにコンパクト化するCSSでした。

スッキリしていい感じです。

Posted by ナポリタン寿司