NewFolder

管理人tanukijの備忘録

スマホ版Chromeでヘッダーに色を付ける方法

私だ。

最近(といっても結構前から)スマホでネットサーフィンをしていると、ヘッダー部分(アドレスバーのあるところ)に色が付いているサイトをしばしば見かける。

他人がやっているものは真似したくなるわけで、やってみた。

コードは一行だけ

f:id:psptanukij:20171118145906p:plain
面倒そうで敬遠していたけどコード一行追加するだけで良いそうで。

chrome専用のファビコンの設定?もあるっぽいけどアイコン作成が手間なのでスルー。

興味のある人はリンク先見てね。

というわけで追加するコードは以下の一行だけ。

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

コレをheadに追加すると下のようになる。

f:id:psptanukij:20171118192955p:plain

見事に色が変わった。

正直あまり注目されない位置ですしそもそもAndroid5.x以上にしか対応していないからなぁという。

まあ、コード一行だし書いといても損はないと思います。