【Google】検索メニューのショッピング、ニュース、地図、ショート動画タブを非表示にするCSS

2025年3月10日Google

この記事では、PCウェブサイト版「Google」で検索結果の検索メニュー（ショッピング、ニュース、地図、ショート動画など）を個別に非表示にするCSSを書きます。

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

【Google】検索メニューのショッピング、ニュース、地図、ショート動画タブを非表示にするCSS

PCウェブサイト版「Google」で検索すると、検索ボックスの下に検索メニューが表示されます。デフォルトでは「すべて」になっていて、他にはショッピング、ショート動画、動画、ニュースなどがあります。

PC版「Google」の検索結果に表示されるショッピング、ニュース、ショート動画などのタブ画像

現在のGoogleはここの並びが固定化されていません。検索したキーワードに応じて関連性が高いものが左から表示されます。

とあるキーワードではショッピングが2番目に表示されるけど、別のキーワードではショート動画が2番目に表示される…といった感じです。

正直言って不便極まりないです。いちいちしっかり文字を見てから押さないと押し間違えます。惰性で「画像は絶対2番目だからここらへん押せばいいっしょ」みたいなことができません。

以前は並びを固定化してくれる拡張機能がありましたが、現在では機能しません。

僕に技術があれば良かったんですが、あいにく僕ができるのはせいぜい不要なタブを見えないよう非表示にするくらいです。CSSを利用してショッピングやショート動画など自分が使わないタブを消してみます。

CSSは一時的なデザイン変更なのでいつでもオンオフでき、他人のデバイスには一切影響しません。PCブラウザ向けです。

1. 【追記】まとめて他項目も非表示にしたい方へ
2. インストール方法
3. Google検索結果から不要な検索メニューを非表示にするCSS
4. 二段目に表示される予測候補を消したい場合
5. 感想

【追記】まとめて他項目も非表示にしたい方へ

PC版「Google」の検索結果に表示される以下のような項目をまとめて非表示にするCSS記事を公開しました。

ちまちま当サイトの記事をいったりきたりするのがめんどくさい方におすすめです。個別記事で紹介しているCSSを一つの記事にまとめています。

【Google】検索結果の不要で邪魔で余計な項目をCSSで非表示！

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

https://www.naporitansushi.com/google-search-bulk-eliminatio...

Googleを快適に使うための設定記事も書いています。

【Google検索】快適な検索結果を得るための8つの方法

この記事では、Google検索をちょっとでも快適にするための8つの方法について書きます。テーマの変更、1 ...

https://www.naporitansushi.com/google-search-comfort/

インストール方法

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

Chrome拡張機能だけでなく「Microsoft Edge」と「Firefox」版もあります。本記事では「Stylebot」を紹介しますが「Stylus」などでもOKです。僕はメインでは「Stylus」を使っています。

Stylebot - Chrome Web Store

Change the appearance of the web instantly

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

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

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

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

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

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

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

この記事では、ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot」について書き ...

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

Google検索結果から不要な検索メニューを非表示にするCSS

スタイルシートを開く

Googleで適当な単語を検索します。拡張機能のオーバーフローメニュー内にある「Stylebot」拡張機能アイコンを左クリック→「Stylebotを開く」をクリックします。

右側に白紙のサイドバーが表示されます。

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

CSSを書き込む

以下のコードを書き込みます。全て書き込む必要はありません。「画像」タブを使う場合はそれを書き込まないようにします。

CSS

/*検索結果の検索ボックス下部にある「ニュース」タブ非表示*/
#hdtb-sc div[data-hveid][role="listitem"]:has(>a[href*="tbm=nws"]) {
    display: none !important;
}

/*検索結果の検索ボックス下部にある「ショッピング」タブ非表示*/
#hdtb-sc div[data-hveid][role="listitem"]:has(>a[href*="udm=28&"]) {
    display: none !important;
}

/*検索結果の検索ボックス下部にある「画像」タブ非表示*/
#hdtb-sc div[data-hveid][role="listitem"]:has(>a[href*="udm=2&"]) {
    display: none !important;
}

/*検索結果の検索ボックス下部にある「ショート動画」タブ非表示*/
#hdtb-sc div[data-hveid][role="listitem"]:has(>a[href*="udm=39&"]) {
    display: none !important;
}

/*検索結果の検索ボックス下部にある「動画」タブ非表示*/
#hdtb-sc div[data-hveid][role="listitem"]:has(>a[href*="udm=7&"]) {
    display: none !important;
}

/*検索結果の検索ボックス下部にある「地図」タブ非表示*/
#hdtb-sc div[data-hveid][role="listitem"]:has(>a[href^="https://maps.google.com/"]) {
    display: none !important;
}