【Stylebot】Google検索の「レシピ」を非表示にするCSS

2022年6月4日Google

Googleのアイコン

この記事では、Googleで、食べ物や料理名を検索した時に表示される「レシピ」欄を非表示にするCSSについて書きます。

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

Google検索結果に表示されるレシピ欄を非表示にしたイメージ画像

本記事で紹介するCSSを使えば、食べ物や料理名でGoogle検索した時に表示される「レシピ」欄を非表示にできます。

Googleで、「ナポリタン」、「ハンバーグ」といった食べ物・料理名を検索すると、2~4番目あたりに、「レシピ」という項目が表示される時があります。

検索した料理の作り方が、各レシピサイト(例:クックパッド)によってサムネイル付きで表示されます。タイトル、サイト名、レビュー、調理時間などが記載されています。

食べ物や料理でGoogle検索した時に表示されるレシピ欄

レシピを知りたくなくても、料理名で検索すると、表示されてしまうので、人によっては邪魔だと思うかもしれません。本記事では、CSSを使って非表示にする方法を紹介します。非表示にすることで、他の記事が目に入りやすくなります。

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

「食べ物とか料理をたまに検索するけど、レシピは本当に不要!サムネイルがでかでか表示されて邪魔!」という方、ぜひ参考にしてみてください。

Googleの他の不要な項目を一括削除したい方へ

2022年7月8日に、全てのGoogleの不要項目を削除するまとめ記事を公開しました。

これまでは、1つずつ記事をチェックする必要がありましたが、下記記事を参考にすることで、「強調スニペット」、「他の人はこちらも質問」、「トップニュース」、「レシピ」、「マップ」、「動画」、「他のキーワード」、「フッターにある現在地」を、一気に全削除できます。

インストール方法

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

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

Firefox・Edgeをご利用の場合

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

「Chromeに追加」でインストールできます。

Stylebot - Chrome ウェブストア

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

Google検索結果の「レシピ」を非表示にするCSS

Googleで適当な単語を検索します。試しに、「ナポリタン」で検索してみます。僕の場合、2つ目にレシピ欄が表示されました。

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

Stylebotのスクリーンショット1

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

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

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

Stylebotのスクリーンショット2

瞬時に反映されて、「レシピ」項目がごっそり消えます。

どの単語で検索した時でも表示されません。あくまでサムネイル付きのレシピ項目を非表示にするだけで、記事タイトルに「レシピ」と書かれている記事は非表示にしません。

CSSでレシピ欄を非表示にした画像

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

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

Stylebotのスクリーンショット3

感想

以上、Googleの検索結果に表示される「レシピ」欄をごっそり非表示にするCSSについてでした。

ナポリタンは嫌いです。

合わせて読みたい

Posted by ナポリタン寿司