【Stylebot】Google検索結果から、余計な項目を全排除するCSS

2022年7月8日2024年3月8日Google

この記事では、PCウェブサイト版「Google」の検索結果から、余計な項目を非表示にするCSSについて書きます。

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

本記事で紹介するCSSを使えば、PCウェブサイト版「Google」の検索結果に表示される「強調スニペット」、「関連する質問（旧：他の人はこちらも質問）」、「トップニュース」、「レシピ」、「マップ」、「動画」、「関連性の高い検索（旧：他のキーワード）」、「場所を選択（この場所について）」、「フッターにある現在地」を、まとめて削除できます。

純粋な記事結果だけを求めている方におすすめです。いつでもオンオフできます。

これまで、それぞれを個別に非表示する記事は、公開していました。個別に消す方法を知りたい方は、下記記事を確認してみてください。

読者の方から、「個別にチェックするのが少し手間だった」というご意見をいただいたので、まとめた版を書きたいと思います。

本記事では、1つのコードで紹介しているので、そのままコピペすれば、上記記事全てを適用した状態になります。いちいち1記事ずつ見る必要はありません。

「Googleの検索結果、マジいやだ！でもGoogleさん大好きだから、離れられない！」という方、参考にしてみてください。いつでもオンオフできます。本記事は、Chrome拡張機能を導入できるPCブラウザ向けです。スマホやタブレットのアプリ版では導入できません。

1. インストール方法
2. 「Google」の不要な検索結果項目を、非表示にするCSS
3. 検索結果上部のタブから邪魔なサジェストを非表示にする記事紹介
4. 【合わせて読みたい】Google検索を快適にする方法
5. 感想

インストール方法

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

Chromeウェブストアからインストールできます。Chrome拡張機能だけでなく、「Microsoft Edge」と「Firefox」版もあります。

Stylebot

ウェブの外観を瞬時に変更

https://chromewebstore.google.com/detail/stylebot/oiaejidbmk...

「Chromeに追加」をクリックします。

「拡張機能を追加」をクリックします。

拡張機能のオーバーフローメニューに追加されたらOKです。

頻繁に開く場合は、拡張機能のオーバーフローメニューを開いて、「Stylebot」の隣にあるピン留めアイコンをクリックします。ツールバーに直接配置されます。

詳しい使い方を知りたい方は、以下の記事を参考にしてみてください。

【Stylebot】サイトにCSSを適用できる拡張機能の使い方

この記事では、ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot（スタイルボッ ...

https://www.naporitansushi.com/stylebot/

「Google」の不要な検索結果項目を、非表示にするCSS

「Google」の検索結果ページにアクセスします。検索する単語は、なんでもOKです。開けたら、右上にある「Stylebot」拡張機能アイコンを左クリック→「Stylebotを開く」をクリックします。

右側に白紙のサイドバーが表示されます。もし初めて「Stylebot」を起動した場合は、「ベーシック」という画面が表示されます。下部にある「コード」をクリックすると、白紙のスタイルシート画面を開けます。以下のコードを書き込みます。

/*「強調スニペット」非表示*/
block-component:has(.g-blk),div#Odp5De {
  display: none !important;
}

/*「関連する質問（旧：他の人はこちらも質問）」非表示*/
.cUnQKe {
    display: none !important;
}

/*「関連する質問（旧：他の人はこちらも質問）」の見出しタイトル非表示*/
div:has(+div>.cUnQKe) {
    display: none !important;
}

/*「トップニュース」非表示*/
g-section-with-header.yG4QQe.TBC9ub:has(path[d^="M12 11h6v2h-6v-2zm-6 6h12v-2H6v2zm0"]) {
  display: none !important;
}

/*「レシピ」非表示*/
.MmzWWe {
  display: none !important;
}

/*「地図（マップ）」非表示*/
div[jsmodel="QPRQHf"] {
  display: none !important;
}

/*「動画」非表示*/
.uVMCKf:has(svg>path[d^="M10 16.5l6-4.5-6-4"]) {
    display: none !important;
}

/*「関連性の高い検索（旧：他のキーワード）」非表示*/
.oIk2Cb {
    display: none !important;
}

/*「フッター（現在地）」非表示*/
div#fbar {
  display: none !important;
}

/*「広告」記事非表示*/
div[aria-label="広告"] {
  display: none !important;
}

/*上部の「場所を選択（この場所について）」非表示*/
.O4T6Pe {
  display: none !important;
}

/*「上映時間」の見出しタイトル非表示*/
div:has(>[role="heading"]>a[data-ti="FilmTicket"]) {
    display: none !important;
}

/*「上映時間」非表示*/
div[data-attrid*="/film/"]:has(div>[data-movie-name]) {
    display: none !important;
}

注意点

上記CSSは、僕が適当に調べて書いたものです。

「Google」側のアップデートにより、使えなくなる可能性があります。もし、コードを書き込んだのに反映されないという場合は、お手数ですが、問い合わせより、ここのコードが反映されなかったよー！と報告していただければ、幸いです。修正します。

今まで通り、表示させたい項目がある場合は、その行を書かないようにしましょう。例えば、トップニュースは、これまで通り表示したい場合、「トップニュース非表示」の数行コードを書かないようにします。

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