スマホのアドレスバーの色を例えば緑色などに変えたい時のカスタマイズ方法

本サイトはアフィリエイト広告を利用しています。

Android版Chromeブラウザでみたら、アドレスバーの色が通常の色と異なっているサイトがあります。自分のサイトでも色を変える方法を書きたいと思います。

スポンサーリンク

スマホのアドレスバーの色が変えられる

例えばfacebookとかアドレスバーがfacebookカラーになっていますよね。

こんな感じで自分のサイトでも色を変えられたらいいですよね。
ただ、今から書く方法は残念ながらすべてのスマホで変えられるわけではありません。

色の変え方

下記ソースを<head></head>内にいれてください。
ここでは「#15c23e」としています。緑です。

ここは任意で変えてください。

Android版Chromeブラウザ(OperaやFirefoxもこの形式をサポートしているようです)

<meta name="theme-color" content="#15c23e">

iOS の Safariでは色指定はできずデフォルトの色か黒かだけを設定できるようです。

<meta name="apple-mobile-web-app-status-bar-style" content="black">

Windows Phone

<meta name="msapplication-navbutton-color" content="#15c23e">

上記3つをすべて<head></head>内に入れればOKです。

<head>

<meta name="theme-color" content="#15c23e">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="msapplication-navbutton-color" content="#15c23e">

</head>

コメントをどうぞ