当サイトは、アフィリエイト・アドセンス広告を掲載しています。消費者庁が、2023年10月1日から施行予定である景品表示法の規制対象(通称:ステマ規制)にならないよう、配慮して記事を作成しています(記事はこちら、消す方法はこちら

参考:令和5年10月1日からステルスマーケティングは景品表示法違反となります。 | 消費者庁

【Stylebot】Google検索結果の「動画」項目を非表示にするCSS

2022年6月4日Google

Googleのアイコン

この記事では、PCウェブサイト版「Google」で検索した時に表示される「動画」項目を非表示にするCSSについて書きます。

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

Google検索結果の途中に表示される動画欄を非表示にしたイメージ画像

Googleで調べものをした時、単語によりますが、検索結果に「動画」という欄が表示されることがあります。

検索した単語に関連するYouTubeをはじめとした動画が、表示されます。サムネイル、タイトル、配信サイト、何時間前に配信されたかを確認できます。クリックで表示します。

Google検索結果の途中に表示される動画欄

動画を見たくなくても、単語によって表示されてしまいます。不便に思う人がいるかもしれない…と思い、本記事では、CSSを使って非表示にする方法を紹介します。

「YouTube全然見ないのに、検索結果に動画がずらずら表示されて邪魔!不要!」という方、ぜひ試してみてください。CSSで自身の環境上、非表示にしているだけなので、誰にも迷惑をかけませんし、いつでもオンオフを切り替えられます。

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

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

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

インストール方法

ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能「Stylebot(スタイルボット)」を利用します。Chrome拡張機能だけでなく、「Microsoft Edge」と「Firefox」版もあります。

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

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

Stylebot - Chrome ウェブストア

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

Google検索結果の「動画」を非表示にするCSS

Googleで適当な単語を検索します。試しに、「ニュース」で検索してみます。僕の場合、中央あたりに動画欄が表示されました。その状態で、インストールしたStylebotアイコン→「Stylebotを開く」をクリックします。

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

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

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

下記画像のようになればOKです。右上の「×」をクリックします。

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

瞬時に反映されて、「動画」項目がごっそり消えます。どの単語で検索した時でも表示されません。オンオフした比較GIF画像を貼っておきます。

Google検索結果の「動画」欄を非表示にする前と後の比較GIF画像

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

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

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

感想

以上、PCウェブサイト版「Google」の検索結果に表示される「動画」カテゴリーをごっそり非表示にするCSSでした。

僕みたいな純粋な記事の検索結果だけ求めている方におすすめです。

合わせて読みたい

2022年6月4日Google