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

2023年4月4日Google

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

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

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

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

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

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

インストール方法

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

Stylebot

Change the appearance of the web instantly

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

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

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

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

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

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

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

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

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

/*サイト名（ドメイン？）非表示*/
span.VuuXrf {
  display: none !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

【Google】検索結果のサイトアイコンを非表示にするCSS

この記事では、Googleの検索結果タイトル横に表示されるサイトアイコン（ファビコン）を非表示にするCS ...

 https://www.naporitansushi.com/google-siteicons-hide-css/

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

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

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

Google検索結果の余白を除去してコンパクトにするCSS

この記事では、Google検索結果の不要な余白を削除して、コンパクトにするCSSについて書きます。ウェブ ...

 https://www.naporitansushi.com/google-margins-compact-css/

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

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

以下のCSSになります。

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

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

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

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

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

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

感想

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

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