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

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

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

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

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

デモページを見る

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

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

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

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

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

theme-color

あとがき

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

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です