2020-06-03

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

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