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

ここ最近、いろんな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が降りてきていない端末もありますからね。

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

関連記事