アドレスバーの色を変える方法(for Android)

Pocket

デザインヒント ブログ
child-817373_640

ちょっとした小技の紹介です。
Androidスマホを使っていると、アドレスバーまで色つきのサイトに出会ったことはありませんか?

本来なら薄いグレーのアドレスバーにカラーが付いていると、フルコーディネートしたような感じに。こういうちょっとした小技が、場合によってはウケるかもしれません。

アドレスバーとは何ですか
~httpから始まるurアドレスが表示される箇所です。

アドレスバーの色を変える

早速設定方法ですが、htmlファイルの<head></head>内に以下を記述し、色の指定をすればOK!それだけの設定で印象が大きく変わります。

<meta name="theme-color" content="#ここに色を指定する">

今回の色は「#880120」にしています。

 

screenshot_20161121-1

#選ぶカラーによっては上部が重たい印象になるかもしれませんね~。

Sponserd Links

 

アドレスバーに表示されるファビコンも設定

screenshot_20161121-2

こちらも細かい部分ですが、サイト名の横に表示されるファビコンとホーム画面に表示されるファビコンも設定できるのでご紹介します。このようにホーム画面へのアイコン設定ができるのもAndroidのみとなります。

画像のファイル形式は「png」、サイズは「192*192」で用意し、

<link rel="icon" href="img/アイコンの名前.png" sizes="192×192" />

と、設定自体は非常に簡単です。

screenshot_20161121-3

 

因みにsafariでは以下のような感じでアイコン設定できます。解像度の表記(下記では[sizes="76×76"]のところ)を省略すると自動的に60*60サイズで扱われます。

<link rel="apple-touch-icon" sizes="76x76" href="img/アイコンの名前.png">

 

 

ほんとうにちょっとした小技なのですが、こういうマメな設定により少しでも差別化を図れるかもしれません。 お名刺でも、ちょっとした細かな気配りが目を引く時ってありますよね。シンプルですが、お役にたてれば幸いです。

Sponserd Links

Midori Design Works © 2016 All Rights Reserved.

Midori Design Works ミドリデザインワークス