LoginSignup
8
10

More than 5 years have passed since last update.

AndroidのChromeアプリのヘッダーを1行のmetaダグで色変えする

Posted at

AndroidのChrome。普段はグレーで当たり障りのない配色のヘッダー。

マサトニックをChromeで検索

これを次の画像のように、画面上部にあるヘッダーの色(テーマ)を変更できます。たった1行のmetaタグをHTML内に記述するだけで :sparkles:

cap2.png

条件

もちろん条件があります。

  • Chromeのバージョンが39以降
    公開時点(2016/4/20)で最新が49.0.2623.105なのでそこら辺はあまり気にしないでいいか。
  • Android 5.0以降
    残念ながら4系はサポートせずです。
  • iOSは非対応のようです。

ソースコード

ヘッダーを黒く染めたソースコードです。背景色を変えることで、文字色などは良しなに調整してくれます :thumbsup:

<!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">

簡単に他の色にも変えられる。

cap3.png

まとめ

国内外のWebサイトを見ていてもあまり設定されていないですね。グレーのままじゃダサいときもあるので、コンテンツの世界観を演出するためにも設定したほうが良いかと思いました。とはいえ、ターゲットユーザーが少なすぎる、、、 :cyclone:

参考リンク

Support for theme-color in Chrome 39 for Android

8
10
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
10