スマホ版 Chrome のヘッダー部分に色をつけるには meta タグを仕掛ければ良い

2016/02/12

スマホでネットサーフィンをしていた時のことです。ふとアドレスバーの部分が彩色されているページがあることに気が付きました。デフォルトでは灰色なのですが青やらオレンジやら、ページによってカラーも様々です。

Windows 7 のタスクバーのようにアイコンカラーの一部を取り出して色設定するように仕様が変わったのかと思いましたが、このサイトを開いてみると何も変化がありません。もしかしたら https 化が必要かと思いましたが、通常の http サイトでも色がついています。

言葉では伝わりづらいので、以下の画像をご覧ください。何をしたいのかと言うと、このアドレスバーのあるヘッダー領域の背景色を変更することが今回の目的です。

set-tab-color-for-chrome01

おそらくソースコード上に指定があるのだろうと、色がついているサイトのソースコードを確認してみることにしました。PC 版 Chrome を利用すれば、デベロッパーツールからスマホ表示をシミュレートできるので、スマートフォン表示用のソースコードもすぐ確認することができます。

meta タグにテーマカラーを設定する

ソースコードを確認したら、それらしき meta タグを見つけたので Google Developers サイトを探してみるとアップデート情報が見つかりました。

Support for theme-color in Chrome 39 for Android

Android 5.0 (Lollipop) 以上の Chrome for Android バージョン 39 以降から取り入れられた機能で、HTML ソースの head タグ内に次のような meta タグを記載することで、そのサイトのテーマカラーとしてブラウザが認識され、ヘッダー部分に色がつく仕様になっているようです。

<meta name="theme-color" content="#5588cc">

たったこれだけ。ここで指定したカラーコードに応じて彩色される仕組みになっています。実際に meta タグを反映してスマホから確認してみましょう。

set-tab-color-for-chrome02

グレーで寂しかったヘッダーに色がつきました!元々余計なものがないシンプルな構成のサイトだったので、このようにヘッダー部分に色が入るだけで印象が変わりますよね。

余談ですが前述のアップデート情報に、ハイレゾ(高解像度)のアイコン対応についても言及されていますね。192 x 192 のサイズを推奨しているようですが、こちらも画像ファイルさえ用意しておけば次の meta タグで設置できます。

<link rel="icon" sizes="192x192" href="[画像url]">

どちらもヘッダー部分に meta タグを挿入するだけの簡単な方法で実現できますので、皆さんもぜひ試してみてください。

Name :
気力・体力勝負なシステム業界のエンジニアを経て、個人事業主として独立。Web サイト運営、動画制作など活動の場を広げています。目指すところへの道のりは険しいですが、自分が自分らしくあるために、一歩ずつ進んでいきます!

このブログでは、困ってたどり着いた人に、分かりやすく答えを提供できるように心掛けています。更新情報は、Twitter や Facebook ページを参照ください。よろしければフォローお待ちしています。

Facebook ページ NJ-CLUCKER
このブログが役に立ったら
「いいね!」お願いします
PAGE TOP ↑