chocotakaの日記

日々技術的な事で学んだ小さな事をを自分なりに書いていきます

メタ theme-color

theme-color

GoogleiOS アプリやAndroidChromeでWebサイトにtheme-colorを設定すると、アドレスバーの色を設定することができます。

実装方法

<meta name="theme-color" content="#ffffff">

head内にmetaタグを設定するだけです。contentに設定されたカラーコードの色に変化します。

実用性

これを設定したことによって何かに大きく影響があるというわけではありませんが、少しは他のサイト差別化したりサイトの特色を出したりすることができるのではないでしょうか。

他にlighthouseのスコアには設定していないと突っ込まれたりしているようなので、スコアを気にしている人は設定するのもいいかもしれません。

f:id:chocotaka:20171213221526p:plain

developers.google.com