AndroidのChrome。普段はグレーで当たり障りのない配色のヘッダー。
これを次の画像のように、画面上部にあるヘッダーの色(テーマ)を変更できます。たった1行のmetaタグをHTML内に記述するだけで
条件
もちろん条件があります。
- Chromeのバージョンが39以降
公開時点(2016/4/20)で最新が49.0.2623.105なのでそこら辺はあまり気にしないでいいか。 -
Android 5.0以降
残念ながら4系はサポートせずです。 - iOSは非対応のようです。
ソースコード
ヘッダーを黒く染めたソースコードです。背景色を変えることで、文字色などは良しなに調整してくれます
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="robots" content="noindex">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#000">
<title>Android Google Chrome theme-color test</title>
<style>
body {
background: #000;
color: #fff;
}
</style>
</head>
<body>
Android 5以降のGoogle Chromeで閲覧すると、テーマカラーがBlackになります。
</body>
</html>
大切なのはこの記述です。これだけ!これだけ!
<meta name="theme-color" content="#000">
簡単に他の色にも変えられる。
まとめ
国内外のWebサイトを見ていてもあまり設定されていないですね。グレーのままじゃダサいときもあるので、コンテンツの世界観を演出するためにも設定したほうが良いかと思いました。とはいえ、ターゲットユーザーが少なすぎる、、、