【Google検索】特定のドメイン名の背景に色をつけるCSS

2022年11月19日Google

この記事では、Google検索結果の特定のドメイン名に背景色を付けて、目立つようにするCSSについて書きます。

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

本記事で紹介するCSSを使えば、ナポリタン寿司のサイトなど、特定のドメインが含まれるサイトの背景色を好きな色にできます。Aのサイトでは赤色、Bのサイトでは青色といったように、サイトごとで色を分けられます。

いつでもオンオフできます。「あのサイト大好きだから、調べものした時に、あのサイトが出てきたら、なるべくそれを見たい！」という時に便利だと思います。

Stylebotは、Chrome拡張機能だけでなく、Firefox、Microsoft Edgeアドオンも用意されています。

僕は、記事を書く前に、同じようなことを書いている人がいるかのチェックで、Google検索します。以前、その作業を忘れて記事を書いてしまい、後から調べたら、なんと過去の僕が、その記事を既に書いていたという事件がありました。

普段はGoogle検索&WordPress内検索でチェックするので、こういう事件は滅多に…というか、その1回きりしか起こっていないんですが、その時の驚きはすごかったですね（笑）「おぉーーい！過去の俺、同じ記事書いてるやん」って…。

こういうおっちょこちょいを二度と犯さないためにも、Google検索で、僕のサイトには背景色を付けることにしました。

1. インストール方法
2. Google検索結果の特定サイトに色をつけるCSS
3. 感想

インストール方法

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

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

Stylebot - Chrome ウェブストア

ウェブの外観を瞬時に変更

https://chrome.google.com/webstore/detail/stylebot/oiaejidbm...

Firefox・Edgeをご利用の場合

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

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

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

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

この記事では、ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot（スタイルボッ ...

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

Google検索結果の特定サイトに色をつけるCSS

「Google」にアクセスします。右上の拡張機能アイコン→「Stylebotを開く」をクリックします。

右側に白紙のサイドバーが表示されます。こちらにコードを書き込んでいきます。書き込むコードは、以下になっています。

/*検索結果の特定のサイトに背景色をつける*/
.v7W49e>div>div>div:has(a[href*="naporitansushi.com"]) {
  background-color: #0e4667; /*背景色*/
  border-radius: 8px; /*背景の角丸具合*/
}

上記CSSの「naporitansushi.com」の部分を、指定したいサイトのドメイン名に置き換えます。例えば、マクドナルドの公式サイトにしたい場合は、「mcdonalds.co.jp」にします。

/*検索結果の特定のサイトに背景色をつける*/
.v7W49e>div>div>div:has(a[href*="mcdonalds.co.jp"]) {
  background-color: #0e4667; /*背景色*/
  border-radius: 8px; /*背景の角丸具合*/
}

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