スマホ版 GoogleChromeのヘッダー部分に色を付ける方法

WEBサイトによってアドレスバーの部分の色が変わっているのを見かけたことがあるかもしれません。
最近、ちょっとずつ増えてきているこの設定について紹介。
よほど特殊なデザインを除けばプラスに働くと思うのでぜひ設定しておきましょう。

ちなみにWindowsの場合、アイコンのカラーの一部を取り出して、タスクバーのアイコン背景色が設定されます。しかしスマホ版 Chrome の場合は、任意のカラーを取得するのではなく、コードの設定により対応させることができます。

このアドレスバーのあるヘッダー領域の背景色を変更することになります。

手順

metaタグにカラーを設定

HTMLのHEAD内に以下のmetaタグを挿入するだけで解決です。
サイトのテーマカラーにあわせると締まります。