【小ネタ】theme-colorタグでAndroidのChromeのタブ色を変える

Web/08 Sep 2015

ここ最近、いろんな Web サイトを見ています。いつにも増して見ています。手元に iPhone と Nexus6 を置いているので、それらも駆使して見ています。

そんな中、Android の Chrome で閲覧していると、アドレスバーが通常と異なる色になるサイトがいくつかありました。どうしても試してみたくなったので、実際にやってみたのが以下の画像です。

アドレスバー

タブ選択する時はアイコン周りにも色とアイコンが付きます。

タブ

今回は、小ネタとして、この設定方法を紹介します。 Google Developpers に設定方法が記載されており、これを参考にさせていただきました。 参考サイト: Support for theme-color in Chrome 39 for Android

対応環境

  • Android 用 Chrome のバージョン 39 以降
  • Android バージョン 5(Lolipop)以降

※iOS の safari と Chrome でも確認しましたが未対応でした

メタタグを追加するだけ

設定方法は簡単で head 内にメタタグを追加すればオッケーです。

<!-- head内に追加してください -->
<meta name="theme-color" content="#2196F3" />

ここで変更するのはcontentの値で、任意のカラーコードを入力します。なので、#2196F3 の部分ですね。

さらに、Chrome 用にアイコンも設定することができます。推奨サイズは 192×192 で、他の favicon と同じように link タグを使って記述します。

<!-- head内に追加してください -->
<link rel="icon" href="/assets/images/icon/chrome-icon.png" sizes="192x192" />

以上で作業は終了です。

実際の使いどころは?

ここに来て、これを使う必要性について考えてみます。 結論から言って必要なしです。 どうしてもやりたい人だけやれば良いレベルです。 というのも、

  • iPhone の Chrome に対応していない
  • 言われないと気づかない
  • 特に SEO 的な意味もなさそう

というのが理由です。 スマートフォンでは iPhone の浸透率が高く、Android の Chrome で lolipop 以上の端末しか対応していない現状では無理に行う必要性を感じません。まだ正式に lolipop が降りてきていない端末もありますからね。

以上を持ちまして本日は終了です。本当に小ネタですみません。