Android版Chromeのアドレスバーの色をカスタマイズする

最近、Androidスマートフォンでネットサーフィンをしていると、Webブラウザのアドレスバーの色が、デフォルトのグレーから変更されているWebサイトを見かけることがあります。

そこで、自分のWebサイトでも色をつけてみようと思い、設定してみました。

ここでは、Android版Chromeのアドレスバーの色をカスタマイズする方法を紹介します。

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

カスタマイズ方法

やり方はいたって簡単で、以下のmetaタグをheadタグ内に追記するだけです。

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

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

すると、以下のようにアドレスバーに色が付きます。

デフォルトのアドレスバー:

色を設定したアドレスバー:

タブ一覧で表示したときの色も変わります。

まとめ

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

設定も簡単なので、やっておいて損はないです。

スポンサーリンク