スマートフォンのブラウザのアドレスバーの色を変更する方法
2016/04/22Chrome
スマートフォンのブラウザのアドレスバーの背景色を変更する方法について。 スマートフォン所有者ではなくサイト所有者向けの内容です。
方法としては HTML の head 内に所定のメタタグを追加するだけで OK です。
OS/ブラウザごとに方法が少しずつ異なりますが主流は次の方法です。
<meta name="theme-color" content="#4285f4">
name 属性に theme-color を、 content に 16 進数表記の色を入れます。
こちらは Chrome / Opera / Firefox OS などのブラウザがサポートしています。
他に、 iOS の Safari の場合や Windows Phone の場合は以下の方法で指定することができます。
Windows Phone:
<meta name="msapplication-navbutton-color" content="#4285f4">
iOS Safari:
<meta name="apple-mobile-web-app-status-bar-style" content="black">
ちなみに・・・
- 指定できるのは背景色だけです。フォントカラーについてはブラウザが自動的に設定してしまうため指定することができません。
- iOS Safari の場合は色指定はできずデフォルトの色か黒かのどちらかしか指定できないようです。
Chrome は何でも 2014 年の ver. 39 の頃からこの機能をサポートしていたとか。 最近まで気づきませんでしたが、そんなにも前からこんなものが追加されていたんですね。
ほんのささいなポイントですが、ブランドカラーなどが明確に決まっているサイトなんかではうまく使えると効果的かもしれません。
追記 2020/05/27
余談ですが、この theme_color という設定項目はサイトを PWAs （ Progressive Web Apps ）化するときの設定ファイル manifest.webmanifest にもあり、同様の意味合いを持っています。
manifest.webmanifest には background_color という項目もあって、こちらではホームスクリーンアイコンをクリックしてサイトを開いたときに表示されるスプラッシュスクリーンの背景色を指定することができます。