AndroidのChromeのアドレスバーの色を変更して高級感を増せ!【プロエンジニアも知らない】

この記事の目次
Androidのブラウザ(Chrome)のアドレスバーの色は、実は変えられるんです。 簡単にサイトの印象を変えられるのですが、残念なことに知らないエンジニアは多いです。
どういうことか
いま話題にしているのは、Android版Chromeブラウザの次の赤枠部分です。

何を言っているのかわからないと思うので、比較の画像を見てみましょう。
通常のブラウザのアドレスバーの画像になります。

アドレスバーの色を変えた画像になります。

たったこれだけなのに、ブランドカラーの印象がすごく頭に入ってきませんか? サイトの高級感がぐっと上がった印象を受けます。
変更方法
非常に簡単です。 HTMLのヘッダ(タグとタグの間)に次のようなタグを追加するだけです。
<meta name="theme-color" content="#00B19B">
#00B19B
の中には、変更したい色をカラーコードで指定してください。
<head>
の直後に入れると(気持ち早く)アドレスバーの色が変わると思うのでおすすめです。
<head>
<meta name="theme-color" content="#00B19B">
<!-- 省略 -->
</head>
ワードプレスでは、「テーマの編集」の中にある「header.php」が編集場所です。
残念ながら結構知られていない
IT企業に勤めていて、ホームページを作ったりしますが、この事を知らないエンジニアデザイナーの方ってすごい多いんですよ。
いくら日本がiPhoneのシェアが高いとはいえ、半分くらいはAndroidのユーザーです。少なく見積もっても3000万人とか4000万人の方がAndroid使ってるわけです。 そのため、アドレスバーの色を変えるのは、知っていて損はないと思います。