Webサイトのテーマカラーに合わせてAndroid版Chromeブラウザのアドレスバーの色を変える方法

Webサイトのテーマカラーに合わせてAndroid版Chromeブラウザのアドレスバーの色を変える方法

Android版Chromeブラウザでは、アドレスバーの色をアクセスしたWebサイトが指定した色に変えることができます。

Webサイトを運営しているなら、サイトのテーマカラーを設定しておくことで、ブラウザと自分のWebサイトの色に統一感を持たせることができます。

そこでここでは、Android版Chromeブラウザのアドレスバーの色を変更する方法を紹介します。

なお、このカスタマイズは「Android 5.0 (Lollipop) 以上」かつ「Chrome for Android バージョン39以上」を利用しているユーザーにしか反映されません。

アドレスバー色を変更する

アドレスバーの色を変更するには、以下のmetaタグをWebサイトのheadタグ内に記述します。

<meta name="theme-color" content="#2098A8">

「content」属性には、設定したい色を16進数カラーコードで指定します。

たとえば、上のmetaタグを設定すると、Chromeブラウザのアドレスバーの色が以下のようになります。

Webサイトのテーマカラーに合わせてAndroid版Chromeブラウザのアドレスバーの色を変える方法
デフォルトのアドレスバー
Webサイトのテーマカラーに合わせてAndroid版Chromeブラウザのアドレスバーの色を変える方法
色を設定したアドレスバー

ちなみに、アドレスバーに色を設定すると、タブ一覧で表示したときの色も変わります。

Webサイトのテーマカラーに合わせてAndroid版Chromeブラウザのアドレスバーの色を変える方法

あとがき

ちょっとした変更ですが、ブラウザでサイトを表示したときの印象が意外と変わるものです。また、タブ一覧でサイトを目立たせる効果も期待できそうです。

設定も簡単なので、Webサイトを運営しているならやっておいて損はないです。

記事が役立ったらシェアしてくれるとうれしいです。