【Stylebot】Googleの検索候補をすりガラス状にするCSS

Stylebot&Stylus

Stylebotのアイコン

この記事では、Googleの検索候補欄(検索ボックス)をすりガラス状にするCSSについて書きます。

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

Googleの検索候補をすりガラス状に変更

Googleの検索結果ページの検索ボックス(ドロップダウンリスト)をすりガラス状にするCSSです。

通常、検索候補は白背景ですが、本記事で紹介するCSS 使うことで、背景透過、すりガラス状にできます。ぼかし具合や透過率は自由に調整できます。

ダークモード、通常モードの両方に対応しています。

前提

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

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

CSS

ダークモード用、通常モード用について書きます。

ダークモードは、検索結果右上にある歯車アイコンボタンから変更できます。

歯車アイコン ダークモード

ダークモード用

書き込むコードは以下になっています。

/*検索候補の背景すりガラス化*/
.aajZCb {
  background: transparent;
  backdrop-filter: blur(5px);
}

/*検索欄*/
.RNNXgb {
  background: rgba(250, 250, 250, 0.8);
  backdrop-filter: blur(5px);
}
/*検索欄の文字*/
.gLFyf {
    color: black;
}

/*スクロール時、追従検索ボックス*/
.sfbg {
  background: transparent;
  backdrop-filter: blur(5px);
}

以下画像のようになればOKです。

検索候補をすりガラスにするCSS

検索候補のドロップダウンリストがすりガラスになります。

CSS適用後のGoogle検索候補

スクロールした時の検索欄も変化します。

スクロールした時もすりガラスになる

検索結果だけでなく、ホームページにも適用されます。

Googleのホームページ

すりガラスのぼかし具合を調整したい場合は、下記要素の数字を調整してみてください。

  backdrop-filter: blur(5px);

そもそも行を削除すると、ぼかし0になります。背景と同化しちゃうので、見にくいです。

かといって、10pxはぼかしすぎな気もするので、間をとって5pxが一番いいんじゃないかなぁと思います。

ぼかし具合を調整

通常テーマ用

通常のライトテーマを利用している方は、以下のCSSを使ってみてください。

/*検索候補の背景すりガラス化*/
.aajZCb {
  background: transparent;
  backdrop-filter: blur(5px);
}

/*スクロール時、追従検索ボックス*/
.sfbg {
  background: transparent;
  backdrop-filter: blur(5px);
}

ライトテーマで検索候補がすりガラス状になります。

ライトテーマのドロップダウンリスト

感想

以上、Googleの検索候補(ドロップダウンリスト)を透明のすりガラスにするCSSについてでした。

Posted by ナポリタン寿司