【Stylebot】Google「トップニュース」を非表示にするCSS

2022年4月19日Stylebot&Stylus

Stylebotのアイコン

この記事では、Googleで検索した時に、一番上、または途中に表示される「トップニュース」欄を非表示にするCSSについて書きます。

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

【Stylebot】Google「トップニュース」を非表示にするCSS

本記事で紹介するCSSを使えば、Googleの検索結果の一番上、または途中に表示される「トップニュース」を消すことができます。

Googleで調べものをした時、単語によりますが、検索結果に「トップニュース」という欄が表示されることがあります。検索した単語に関連する最近のニュースが、各ニュースサイト(毎日新聞、時事通信、NHK.JP、テレ朝 Newsなどなど)によって表示されます。

基本的には、「〇〇〇 ニュース」と検索した時に表示される傾向にあります。「スマホ」など、一部単語については、「ニュース」とつけなくても表示されます。

つまり、ニュースを知りたくなくても、単語によっては表示されてしまう場合があるということです。これは、不便に思う人がいるかもしれない…と思い、本記事では、CSSを使って非表示にする方法を紹介します。

CSSで自身の環境上、非表示にしているだけなので、誰にも迷惑をかけませんし、いつでもオンオフ切り替えできます。本記事で紹介するStylebotは、Chrome拡張機能だけでなく、Firefox、Microsoft Edgeアドオンも用意されています。

前提

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

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

Firefoxをご利用の場合

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

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

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

Vivaldiブラウザを利用していて、サイドバーのウェブパネルにもCSSを適用したい場合は、「Stylus」がおすすめです。こちらは、ウェブパネル内にもCSSを適用できます。

CSS

Googleで適当な単語を検索します。試しに、「スマホ」で検索してみます。見事にニュース記事が一番上に表示されました。

Googleの検索結果に表示される「トップニュース」画像

その状態で、インストールしたStylebotアイコン→Stylebotを開くをクリックします。

拡張機能ボタン Stylebotを開く

Firefoxで、Stylusを使っている方は、右上の拡張機能アイコン→「次のスタイルを書く」の「www.google.com」をクリックします。新しいタブでスタイルシートが表示されるので、書き込んでいきます。書き込めたら、忘れずに「保存」をクリックします。

書き込むコードは、以下になっています。Stylebot、Stylusどちらも一緒です。

/*検索結果の「トップニュース」非表示*/
g-section-with-header.yG4QQe.TBC9ub {
  display: none !important;
}

下記画像のようになればOKです。書き込めたら、右上の「×」をクリックします。

Stylebot Google検索結果のトップニュースを非表示にするCSSを書き込んだ画面

瞬時に反映されて、「トップニュース」項目がごっそり消えます。どの単語で検索した時でも表示されません。

トップニュースを非表示にした画像

ライトテーマ使用時も反映されます。

ライトテーマ時でも本記事で紹介したCSSが使える
強調スニペットは表示される

トップニュースと同じく、一番上に表示される「強調スニペット」という項目は、これまで通り表示されます。

Googleの検索結果トップに表示される強調スニペット画像

こちらも非表示にしたい場合、下記記事を参考にしてみてください。

トップニュースは、検索結果の一番上に表示される場合と、途中に表示される場合があります。上記CSSを使うことで、途中に表示されるニュースに関しても非表示にできます。

トップニュースを非表示にする前と後の比較画像

オンオフ切り替えたい時は、Googleの検索結果上で、拡張機能アイコンをクリック→「www.google.com」をオフにします。これで、元通りトップニュースが表示されます。

Stylebot 「www.google.com」のオンオフ

【おまけ】ニュースタブの非表示

上記CSSは、あくまでトップニュースというカテゴリーを非表示にしているだけなので、通常の検索結果に表示されるニュース記事は、これまで通り表示されます。Yahoo!ニュースとか、公式サイトの〇〇新聞とかですね。

検索ボックスの下にある「ニュース」タブも同様です。

Google ニュースページ

ニュースタブが不要な場合は、追加で下記のCSSを使ってみてください。

/*検索ボックス下の「ニュース」タブ非表示*/
a[data-hveid="CAEQAw"] {
  display: none !important;
}
上記CSSを使って、ニュースタブを非表示にしてみた画像

感想

以上、Googleの検索結果に表示される「トップニュース」カテゴリーをごっそり非表示にするCSSについてでした。

「最近のニュースなんかいらない!純粋な検索結果だけが欲しい!」という方、ぜひ試してみてください。

Posted by ナポリタン寿司