【Stylebot】Google「強調スニペット」を非表示にするCSS
強調スニペットとは、僕たちユーザーが「○○とは」、「〇〇について」といった単語を入力した時に、回答を強調して表示する機能です。そのサイトにある文章の一部が、自動的にGoogleによって抜粋されています。以下の2点が特徴です。
- 答えになるであろう場所が太字で表示
- 下に「強調スニペットについて、フィードバック」と文章が書かれている
例えば、「一眼レフカメラとは？」と検索すると、「写真を撮影する機械です。」といったように、すぐに答えを教えてくれます。
本来は、素早く答えを知れる便利な仕組みですが、人によっては邪魔と思うかもしれません。また、AI（Google）が抜粋しているので、本当にその情報が正しいかは保証できません。
「いっそのこと非表示にしてみるといいんじゃない！？」と思い、排除してみます。CSSで自身の環境上、非表示にしているだけなので、誰にも迷惑をかけませんし、いつでもオンオフを切り替えられます。
2022年7月8日に、全てのGoogleの不要項目を削除するまとめ記事を公開しました。
https://www.naporitansushi.com/google-search-bulk-eliminatio...これまでは、1つずつ記事をチェックする必要がありましたが、上記記事を参考にすることで、「強調スニペット」、「関連する質問（旧：他の人はこちらも質問）」、「トップニュース」、「レシピ」、「マップ」、「動画」、「関連性の高い検索（他のキーワード）」、「フッターにある現在地」を、一気に全削除できます。
インストール方法
ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を利用します。
Chromeウェブストアからインストールできます。Chrome拡張機能だけでなく、「Microsoft Edge」と「Firefox」版もあります。
https://chromewebstore.google.com/detail/stylebot/oiaejidbmk...「Chromeに追加」でインストールできます。
右上に拡張機能ボタンが追加されればOKです。詳しく使い方を知りたい方は、以下の記事を参考にしてみてください。
強調スニペットを排除する手順
「Google」で適当な単語を検索します。試しに、「IT」で検索してみます。強調スニペットが一番上に表示されました。
その状態で、インストールしたStylebotアイコン→「Stylebotを開く」をクリックします。
書き込むコードは、以下になっています。
/*「強調スニペット」非表示*/
block-component:has(.g-blk),div#Odp5De {
display: none !important;
}書き込めたら、右上の「×」をクリックします。
瞬時に反映されて、「強調スニペット」項目がごっそり消えます。どの単語で検索した時でも消えます。
ライトテーマ使用時も反映されます。
強調スニペットと同じく上位に表示される「トップニュース」は、これまで通り表示されます。
こちらも非表示にしたい場合は、下記記事を参考にしてみてください。
強調スニペットは、①画像なしの文章のみ、②画像付きの横長サイズの2種類あります。上記CSSを使えば、画像付きの横長強調スニペットも非表示になります。試しに、「webマーケティング」で検索した画像を貼っておきます。
「強調スニペット」で検索した時も表示されていましたが、CSS適用後は、非表示になっています。
切り替えたい時は、Googleの検索結果上で、拡張機能アイコンをクリック→「www.google.com」をオフにします。これで、元通り表示されます。
感想
以上、Googleの検索結果に表示される文章を強調して表示する「強調スニペット」項目を非表示にするCSSについてでした。
僕は、便利だと思うので非表示にしていません。（なんじゃいそりゃ）