2020-06-03

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使ってるわけです。そのため、アドレスバーの色を変えるのは、知っていて損はないと思います。