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

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

【Google】検索結果のドメイン名、サイト名を非表示にするCSS

Google

Googleのアイコン

この記事では、「Google(グーグル)」の検索結果に表示されるサイト名(ドメイン?)、アイコン等を非表示にするCSSを紹介します。

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

【Google】検索結果のドメイン名、サイト名を非表示にするCSS

2023年2月以降、PCでGoogle検索結果を見た時、記事名の上に、サイトアイコン(ファビコン)と、そのサイトのドメイン名が表示されるようになりました。(参考)以前と比べて、少し検索結果が賑やかになりました。

2023年2月頃から実装されたGoogle検索結果のサイトファビコンとドメイン名の画像

2023年4月現在、検索エンジンの設定画面を見てみましたが、非表示にするオプションは用意されていないようです。CSSを使うことで、非表示にできます。自身の環境上で、他人には影響しません。いつでも元に戻せます。

本記事は、Chrome拡張機能・Firefoxアドオンを利用できるPCブラウザ限定です。スマホのアプリ版ではできません。

CSSなので、Google側の仕様変更で、いつの間にか使えなくなる可能性があります。その時、僕は気づかない可能性があります。本記事のCSSが使えなくなっていたことに気づいた方は、問い合わせより連絡いただければ幸いです。

インストール方法

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

「Chromeに追加」をクリックしてインストールします。

「Stylebot」のインストール手順画像

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

Google検索結果のドメイン名を非表示にするCSS

Google」にアクセスします。インストールした「Stylebot」拡張機能アイコンをクリック→「Stylebotを開く」をクリックします。

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

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

/*サイト名(ドメイン?)非表示*/
span.VuuXrf {
  display: none !important;
}

/*記事名の上の余白具合*/
.DKV0Md {
  margin-top: 1px !important;
}

/*「この結果について」ボタンの位置*/
.iTPLzd {
  top: -17px !important;
}

display: none」でサイトのドメイン名を消しています。ただ消しただけだと、ぽっかり空間ができてしまったので、「margin-top」で記事名を上にずらしています。

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

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

再度拡張機能ボタンを押して、登録したサイト(例:www.google.com)がオンになっていることを確認します。オンになっている間は、有効になっているということです。

適当な単語でGoogle検索します。(例:Google翻訳)サイトのドメイン名が消えて、アイコン、URL、記事名の構成になります。

Google検索結果のドメイン名(サイト名)を非表示にした画像

もし、記事とURLの間の余白が気になる方は、上記CSSの「margin-top」の数字を調整してみてください。数字を増やすと、その分余白が生まれます。

「この結果について」ボタンとは、URLの右側にある三点ボタンのことです。

Google検索結果の「この結果について」ボタン画像

ドメイン名を消した場合、ここのボタンの位置がずれたので、CSSを使って調整しています。モニターサイズによって、適切な数字が異なるかもしれません。位置が気になる方は、上記で紹介したCSSの「top」の数字を調整してみてください。

一時的に無効化したい場合は、「Stylebot」拡張機能アイコンを左クリック→「www.google.com」をオフにします。完全に使わなくなった場合は、書き込んだコードを削除します。

サイドファビコンも消したい場合

サイトファビコン(アイコン)も消したい場合、以下の記事を参考にしてみてください。同じくCSSを利用することで消せます。

本記事のCSSと併用できます。スタイルシートに両方のCSSを書き込みます。併用すると、下記画像のようになります。シンプルです。

Google検索結果のサイトファビコンとドメイン名をCSSで消した画像

記事項目間の余白が気になる場合

以下の記事を参考にしてみてください。同じくCSSを使うことで、余白を消して、コンパクトなGoogle検索結果にできます。記事間の余白だけでなく、検索ボックス周辺の余白も調整しています。

非表示ではなく、サイト名の右側にURL配置するCSS

「サイト名もURLも、何もかも消したくない!だけど、デフォルトの2行表示はうざい!」という場合、サイト名の右側にURLを配置できます。

Google検索結果のサイト名とURL画像

以下のCSSになります。

/*ドメイン名の右側にURL配置*/
span.VuuXrf {
  float: left !important;
  margin-right:15px !important;
}

/*記事名の上の余白具合*/
.DKV0Md {
  margin-top: 1px !important;
}

/*「この結果について」ボタンの位置*/
.iTPLzd {
  top: -17px !important;
}

記事名の上の余白具合」と「この結果について」のCSSは、こちらと同じコードです。これらのコードを書かないと、レイアウトが若干おかしくなったので書いています。

適用すると、サイト名の右側にURLが表示されて、一行になります。

Google検索結果のサイト名とURLを一行に表示した画像

float: left」でサイト名の横に配置して、「margin-right」でサイト名とURLの間に余白を設けています。余白が足りない場合は、数字を大きくします。

感想

以上、Google検索結果に表示されるサイト名(ドメイン名)を非表示にしたり、一行に切り替えるCSS(方法)でした。

Google検索と言えば、今後どのようにAIが組み込まれていくのか気になりますねー。世界はどうなることやら。

Google