1. ホーム > 
  2.  ブログ

Android版Chromeのアドレスバーの色を変えるとどんな効果があるのか？

2016/3/11 - ブログ（ スマホアプリ ）

こんにちは！necco（@necco_tl）です！

Android版のChromeでアドレスバーの色を変えることができる。っていう話、結構メジャーな話なのかなと思っていたのですが、実は導入しているWebサイトがあまりなさそうなので導入してみました。

こんな感じの見た目になります

AndroidのChromeでWebサイトを見ると、通常はアドレスバーの周辺はグレーです。こんな感じ。

android-bar-color_001

Webサイトにちょこっとコードを追加してあげるだけです、アドレスバーの部分の色を好きな色に変えることができます。
AMP対応のサイトを見ている時と同じ色にしてみました。

android-bar-color_002

ちなみにこちらがAMP対応サイトを表示しているところ。色が同じというだけのハナシ!?(･_･;?

android-bar-color_003

<head>〜</head>に、下のコードを追加するだけです。

<meta name="theme-color" content="#4285f4">
<!--
#4285f4の部分に好きな色を指定します
-->

適用されるのは、AndroidのChromeだけです

このアドレスバーの色を変える設定が適用されるのは、AndroidのChromeだけです。
iOSのSafariはもちろん、iOSのChromeでも適用されません。

  • android-bar-color_004
  • android-bar-color_005

この色を変える設定が機能するのは、Android5（Lollipop）からだと何かで読んだ記憶があるのですが、Android 4.2（Jelly Bean）でもちゃんと色が変わっています。

「おっ？」と注意が惹けるかもしれません

単にアドレスバーの色が変わるだけ、しかもAndroidのChromeだけとなると、果たしてどんな意味があるのかと思うかもしれません。
特に何だという意味はありませんが、実装していないサイトが多いので、たまに見かけると「おっ？」と注意が惹けるかもしれません。

こんな底辺ブログのデータなんかどうでもいいかと思いますが、一応このブログのAndroid+Chromeの組み合わせでアクセスしている数を調べると、全体の22.84%、ひと月に3,400セッションでした。
android-bar-color_007

アドレスバーの色を変えて「おっ？」と思ってもらえそうな人は、そこそこいるかなと思います。

他のサイトの例では、モデルプレスはサイトイメージに合わせたピンクのアドレスバーになります。

android-bar-color_006

検索で記事がヒットしてアクセスした時に、アドレスバーの色が普段と違うと「おっ？」って思いませんかね…。

ではまた！

Tags:
necco

ガジェットやブログ運営、旅行・お出かけ記などのブログtakerootを運営中。珍しいものを好んで選ぶマイノリティな男です。Webサイト制作とか広告といった仕事をしています。

人気の記事をピックアップ

コメント

コメントを書く

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲