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

2022年11月19日2024年6月16日Google

この記事では、PCウェブサイト版「Google」の検索結果に表示される特定のドメイン名に、背景色を付けて目立つようにするCSSについて書きます。

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

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

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

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

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

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

CSSを利用します。自身の環境上だけの反映で他人には影響しません。誰かに迷惑をかけることなく、印として装飾できます。本記事は拡張機能を導入できるPCブラウザ向けです。スマホやタブレットのアプリ版ではできません。

インストール方法

Chromeウェブストアからインストールできます。Chrome拡張機能だけでなく、「Microsoft Edge」と「Firefox」版もあります。本記事では「Stylebot」を紹介しますが、「Stylus」などでもOKです。僕はメインでは「Stylus」を使っています。

Stylebot

Change the appearance of the web instantly

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

「Chromeに追加」をクリックします。

「拡張機能を追加」をクリックします。

拡張機能のオーバーフローメニューに追加されたらOKです。

頻繁に開く場合は、拡張機能のオーバーフローメニューを開いて、「Stylebot」の隣にあるピン留めアイコンをクリックします。ツールバーに直接配置されます。

詳しい使い方を知りたい方は、以下の記事を参考にしてみてください。

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

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

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

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

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

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

/*検索結果の特定のサイトに背景色をつける（ナポリタン寿司のPC日記）（2024年6月16日修正）*/
#search #rso>div>div div:has(a[href*="naporitansushi.com"]):not([data-attrid^="images"]):not(:has([data-attrid^="images"])) {
    background-color: #0e4667 !important;
    border-radius: 8px !important;
}

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

/*検索結果の特定のサイトに背景色をつける（マクドナルド）*/
#search #rso>div>div div:has(a[href*="mcdonalds.co.jp"]):not([data-attrid^="images"]):not(:has([data-attrid^="images"])) {
    background-color: #625636 !important;
    border-radius: 8px !important;
}

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

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

僕のサイトが検索結果に表示された時、背景色に色がつきます。

「background-color」で指定した色になります。HTMLカラーコードは、こちらのサイトから調べられます。「border-radius」は角丸具合です。不要な場合はその行を削除してください。

僕の実力不足なんですが、僕の記事を引用しているサイトにも、色がつく場合があります。上記画像の場合、2番目の「X（旧Twitter）」にも色がついてしまっています。僕の記事が貼られたツイートが説明欄にあるからですね。

コードは複数書き込めます。僕のサイトは青色、マクドナルドのサイトは赤色といったようにできます。

2024年6月に…というかそれよりちょっと前からCSSの不備に気づいたんですが、中々修正する時間がなく放置していました。以前紹介していたCSSだと、画像検索結果ページで一つでも指定したサイトの画像が含まれていたら、全部の画像が塗りつぶされてしまう不具合がありました。

2024年6月にCSSを修正して、画像検索結果ページで大事故が起こらないようにしました。具体的には画像ページでは除外する「:not([data-attrid^="images"]):not(:has([data-attrid^="images"]))」を書き加えています。少々コードが長くなりますが、仕方ないかなと思います。

Googleは記事と画像検索結果ページで同じセレクタ使うのやめてほしいですよね…。しっかり区別してほしいところ…。

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

感想

以上、PCウェブサイト版「Google」の検索結果に表示される特定のサイト背景色を、好きな色に装飾するCSSでした。

Google関連のCSS記事はいくつか書いているので、気になった方は、カテゴリーの「Stylebot」→Google関連をチェックしてみてください。

【Stylebot】Google検索結果から、余計な項目を全排除するCSS

この記事では、Google検索結果から余計な項目を全排除するCSSについて書きます。ウェブサイトに自分で ...

 https://www.naporitansushi.com/google-search-bulk-eliminatio...