![テーマカラーを表示するスマートフォンのスクリーンショット。](https://developer.chrome.google.cn/static/blog/support-for-theme-color-in-chrome-39-for-android/image/screenshot-phone-showing-cd48500fd0af.png?authuser=6&hl=ja)
Lollipop を搭載した Android 向け Chrome のバージョン 39 以降では、theme-color
メタタグを使用してツールバーの色を設定できるようになりました。これにより、シアトル グレーのツールバーは表示されなくなります。構文は非常にシンプルです。name="theme-color"
を使用してページの <head>
に meta
タグを追加し、content
を任意の有効な CSS 色に設定します。
たとえば、背景を好みの色や HTML5Rocks オレンジに設定するには、次のようにします。
<meta name="theme-color" content="#db5945">
美しい高解像度のファビコンがある場合、そのファビコンも自動的に表示されます。Chrome for Android では、指定された最も高い解像度のアイコンが選択されます。192×192 ピクセルの PNG ファイルを使用することをおすすめします。次に例を示します。
<link rel="icon" sizes="192x192" href="nice-highres.png">
テーマカラーについては、HTML5Rocks と Web Fundamentals のサイトをご覧ください。また、サイトを目立たせる他の方法については、ホーム画面に追加に関するドキュメントをご覧ください。