スマホでみたときにWebサイトへちょっとした色の工夫をする

どうもこんにちは塚本です！
今日はアドレスバー付近の色を変更するという小ネタの投稿です。

僕のスマホはAndroidなんですが、
普段Webサイトを見ているとこんな感じです。

なんの変哲もない、ただのChromeです。

なんかいつもと色が違う！？

しかしAndroidで、Facebookや日本経済新聞等のサイトを見ると
アドレスバー付近の色が変わっていると思います。

Facebook

imgur

日本経済新聞

特にFacebookは、カラーが揃っていることによって
ネイティブアプリのような感じがしてきます。

Androidへは簡単に実装できるのでやってみましょう！

metaタグ

Android

<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4">

content="好きなカラーコード"で実装可能です。

iOS

また、iOS、Safariではこのようにするとステータスバーの色を変更できます。

content=”black

<meta name="apple-mobile-web-app-status-bar-style" content="black">

content=“black-translucent”

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

※ 手元にiOS端末がないので、本家からスクショを借りています。

まとめ

<meta>タグを一行追記するだけで、限定的な環境ではありますが色を簡単に変更することが可能です。

テーマカラーがキマっているサイトで設定してあげるとクールさが増すと思います。
特にカラーを#333とかにするとダークテーマっぽくなっていい感じかなと思いました。