AndroidのChromeでページを開いた時にブラウザのタブの色を変更させる方法

2017/04/05

AndroidのChromeでサイトを開いた時に、タブの色を変更させる方法をご紹介いたします。

以下デモページにAndroidのChromeからアクセスすると、タブの色が青色に変わります。

HTML内にメタタグを1行追加するだけで、このようにタブの色を変更することができます。

HTMLの<head>～</head>内に、以下のメタタグを追加します。

<meta name="theme-color" content="#3ab0db">

上記を記述すると、以下のようにタブの色が変わります。「content=”#3ab0db”」のカラーコードを変更すれば、好きな色にすることができます。

あとがき

AndroidのChromeでアクセスした場合のみという、限定された環境にしか対応していませんが、サイトの雰囲気に合わせてブラウザのタブ色も変更したいという時は、theme-colorメタタグを記述しておくと一部のユーザーはカバーできますね。

投稿者

慢性鼻炎のhimecasですヽ(^o^)丿誰か一人でも役に立ったと思ってもらえたら本望です。プロフィール詳細やお問い合わせについてはAboutページをご覧ください。