【Google検索】特定のドメイン名の背景に色をつけるCSS
本記事で紹介するCSSを使えば、ナポリタン寿司のサイトなど、特定のドメインが含まれるサイトの背景色を好きな色にできます。Aのサイトでは赤色、Bのサイトでは青色といったように、サイトごとで色を分けられます。
いつでもオンオフできます。「あのサイト大好きだから、調べものした時に、あのサイトが出てきたら、なるべくそれを見たい!」という時に便利だと思います。
僕は、記事を書く前に、同じようなことを書いている人がいるかのチェックで、Google検索します。以前、その作業を忘れて記事を書いてしまい、後から調べたら、なんと過去の僕が、その記事を既に書いていたという事件がありました。
普段はGoogle検索&WordPress内検索でチェックするので、こういう事件は滅多に…というか、その1回きりしか起こっていないんですが、その時の驚きはすごかったですね(笑)「おぉーーい!過去の俺、同じ記事書いてるやん」って…。
こういうおっちょこちょいを二度と犯さないためにも、Google検索で、僕のサイトには背景色を付けることにしました。
インストール方法
ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を利用します。
Chromeウェブストアからインストールできます。Chrome拡張機能だけでなく、「Microsoft Edge」と「Firefox」版もあります。
「Chromeに追加」をクリックしてインストールします。

右上に拡張機能ボタンが追加されればOKです。詳しく使い方を知りたい方は、以下の記事を参考にしてみてください。
Google検索結果の特定サイトに色をつけるCSS
「Google」にアクセスします。右上の拡張機能アイコン→「Stylebotを開く」をクリックします。

右側に白紙のサイドバーが表示されます。もし初めて「Stylebot」を起動した場合は、「ベーシック」という画面が表示されます。下部にある「コード」をクリックすると、白紙のスタイルシート画面を開けます。以下のコードを書き込みます。
/*検索結果の特定のサイトに背景色をつける(ナポリタン寿司のPC日記)*/
.v7W49e>div>div:has(a[href*="naporitansushi.com"]),
.v7W49e>div>div div[style="width:600px"]:has(a[href*="naporitansushi.com"]) {
background-color: #0e4667 !important;
border-radius: 8px !important;
}
上記CSSの「naporitansushi.com
」の部分を、指定したいサイトのドメイン名に置き換えます。例えば、マクドナルドの公式サイトにしたい場合は、「mcdonalds.co.jp
」にします。
/*検索結果の特定のサイトに背景色をつける(マクドナルド)*/
.v7W49e>div>div:has(a[href*="mcdonalds.co.jp"]),
.v7W49e>div>div div[style="width:600px"]:has(a[href*="mcdonalds.co.jp"]) {
background-color: #625636 !important;
border-radius: 8px !important;
}
本記事のCSSは、僕が適当に作成したコードです。皆さんの環境によっては使えなかったり、サイト側の仕様変更でいつの間にか使えなくなる可能性もあります。
もし書き込んでも反映されない場合、問い合わせより教えていただければ幸いです。初心者の僕ができる範囲で、修正したいと思います。
下記画像のようになればOKです。右上の「×」でスタイルシートを閉じます。

再度拡張機能ボタンを押して、登録したサイト(例:www.google.com
)がオンになっていることを確認します。オンになっている間は有効になっているということです。
僕のサイトが検索結果に表示された時、背景色に色がつきます。

「background-color
」で指定した色になります。HTMLカラーコードは、こちらのサイトから調べられます。「border-radius
」は角丸具合です。不要な場合は、その行を削除してください。
僕の実力不足なんですが、僕の記事を引用しているサイトにも、色がつく場合があります。上記画像の場合、2番目のTwitterにも色がついてしまっています。僕の記事が貼られたツイートが説明欄にあるからですね。
コードは複数書き込めます。僕のサイトは青色、マクドナルドのサイトは赤色といったようにできます。

一時的に無効化したい場合は、Stylebot→「www.google.com
」をオフにします。完全に使わなくなった場合は、書き込んだコードを削除します。
感想
以上、Google検索結果に表示される特定のサイト背景色を、好きな色に装飾するCSSでした。
Google関連のCSS記事はいくつか書いているので、気になった方は、カテゴリーのStylebot→Google関連をチェックしてみてください。