【Android】Chromeのタブの色を変えられる「theme-color」タグ
こんばんは、id:color-cream です。
先日、自分のスマホ（Xperia Z3 Compact）でウェブブラウジングしていたところ、タブの色が変わるページを見かけたんです。
どうやってやるんだろう…と思って調べてみたところ、簡単にできることがわかったので、ちょっとまとめておきます。
metaタグ「theme-color」
head部分に以下のコードを追加するだけ。
<meta name="theme-color" content="#00796B"> //"#00796B"の部分にカラーコードを入れてください
色は今はやりの「フラットカラー」の方がいいだろう…ということで
以下のページから選んでみました。
タグありと、そうでないページを比較するとこんな感じ。（注：ナビゲーションバーのもともとの色はオレンジです）
タブの部分とナビゲーションバーの色が切り替わっています。
ちなみに、はてなブログでは、デザイン設定 で モバイル用のアクセントカラーを決めることで自動的にタグが追加されるようです。
対応しているブラウザ
| ブラウザ | |
| Chrome：Android 4.4以下 | ✕ |
| Chrome：Android 5.0以降 | ◯ |
|---|---|
| Chrome：iOS | ✕ |
| Safari：iOS | ✕ |
| その他のブラウザ | ✕ |
現状（2016年3月時点）では、Android 5.0 以降の Chrome のみ対応。なお、Android内での5.0以降の割合は、2016年1月時点で約30％*1とのこと。
現時点ではあまりメリットはないか
対応しているブラウザが少ない上に、SEOに効果があるというわけでもないので、現時点ではこのmetaタグのメリットは少ないかも…。
ですが、対応しているブラウザではそのサイトの印象を変えられるかもしれないので、ちょっとやってみる価値はあるんじゃないでしょうか。
