スマホ版 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 タグを挿入するだけの簡単な方法で実現できますので、皆さんもぜひ試してみてください。

2017/01/21

Word ファイルから画質を落とさず画像を取り出す方法

2017/01/20

Windows 10 でアプリをアンインストール(削除)する方法

2017/01/20

Windows 10 でデスクトップにマイコンピューターやコントロールパネルを表示する方法

2017/01/20

ファイアーエムブレムヒーローズのダウンロード方法とインストール手順【初期設定】

2017/01/17

青色申告の申請書「所得税の青色申告承認申請書」の書き方!例にならって入力すれば簡単に作成できる

2017/01/16

個人事業の開業届の書き方!例にならって入力すれば簡単に作成できる

2017/01/14

Nintendo Switch のコントローラーの充電方法は?標準の Joy-Con グリップでは充電できないので注意!

2017/01/14

Nintendo Switch の本体容量は 32GB しかない!容量追加はマイクロSDカードを利用する

2017/01/13

スプラトゥーン2の発売日は2017年夏で決定!

2017/01/13

Nintendo Switch 発売日決定!詳細はいかに?

→もっと見る

Name :
気力/体力勝負なシステム業界で揉まれています。自分が自分らしくあるために、大事なリセット、スタートします。

プロフィール詳細 Twitter @_NJ69_
Facebook ページ nj-clucker.com シェア
このブログが役に立ったら
「いいね!」お願いします
PAGE TOP ↑