「Android版・Chrome」ブログをスマホで見た時のステータスバーの色を変える

ドロイド君

スマホを使いChromeでWEBサイトを見ているとたまに見かけるのがステータスバーの色がカスタマイズされているWEBサイトです。ステータスバーとは通知領域の事でAndroid端末画面の一番上にあたる部分です。

これって2014年にGoogleが提唱したマテリアルデザインによる仕様らしいですね。アプリにもこの仕様が対応されています。

android-statusbar
参考: 「Android版・Twitter」マテリアルデザインに対応する!

SPONSORED LINK

photo by Ashwin Kamath

ステータスバーの色を変える

新しいデザインなら試してみる価値ありか?!減るもんじゃないし、印象は残りますからね!

という考えの元、めちゃログにも”まずはお試しで”マテリアルデザインを取り入れる事に。
ステータスバーの色を変更する方法は簡単。「theme-color」タグを使用して<head> ~ </head>の間に以下のコードを記述するだけです。

 // 赤色
<meta name="theme-color" content="#ff0000">

これだけです。たったこれだけで最新のマテリアルデザインを取り入れる事ができます!

ただし全ての環境に対応しているわけではないようです。下記の二つの条件をクリアしているユーザー環境であれば表示されるようです。

  • 「Android」Google Chrome 39 以降~
  • Android 5.0 Lollipop 以降~

こんな感じのデザインになる

▼デフォルト
android-statusbar2

▼青
android-statusbar3

▼赤
android-statusbar4

▼茶色
android-statusbar5

▼緑
android-statusbar7
とりあえず現在のデスクトップの色と合わせて緑にしておきました。今後どうなるかわかりませんがとりあえずこの色です。

まとめ

このステータスバーの色が変わるという仕様はまだ違和感があると感じているユーザーがいるかもしれません。僕が最初見た時もまだ完全にしっくりとはこないという印象でした。デフォルトの黒色を見慣れていますからね。

ただ、もう既にYouTubeやGmailの色が変わっているんですね。YouTubeやGmailのユーザー数は相当数なのでそのうちステータスバーの色に見慣れてくるユーザーが増えると予想できます!

android-statusbar8

マテリアルデザインが様々なデバイス・WEB・アプリ間の統一がテーマみたいなので、試してみる価値はあるかと。簡単なコードで設定できますし。また、見方によっては一番上の色と統一されているという事でスマホの全体画面が大きく感じるという効果はあると思います!

後々にはステータスバーの色を変えるというのがメディアやブロガーの間でも一般的になっているかもしれませんね。

関連記事




この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitterでめちゃログをフォローしよう!