【コピペでOK】ブログのアドレスバーを好きな色に変更するカスタマイズ。android、Chrome限定。

ぷらぷら～っとネットを見ていると、こんなふうにアドレスバーの色が違うページに出会ったことはないでしょうか。

たまに見かけるかも。かわいいよね。

実はこれ、コピペだけでできる超カンタンなカスタマイズなんです！

ブログのアドレスバーの色を変更できるのは、androidでChromeを使っている時だけだそう。

SEOに良い影響があるわけでもなさそうなのですが、アドレスバーの色が違うだけでも、「おっ、このブログはこだわってそう」なんてプロっぽさが出ますよね。（出ませんか？笑）

ブログのテーマカラー的なものと合わせておくと、ブログ全体に統一感も出て、よりオシャレっぽくなります。

ということで、この記事では、

について見ていきます。

ブログのアドレスバーの色を変更するカスタマイズ（コピペでOK）

なんとなく難しそうだけどどうやるの？

headに以下のタグを入力するだけだよ！

アドレスバーの色を変えるのはとてもカンタンで、head内に以下の記述をするだけです。

<meta name="theme-color" content="#f4c7dd">

ワードプレスで言うと「テーマの編集」の中にある「header.php」が追加する場所です。

</head>の手前に上記のメタタグを配置すれば分かりやすいですよ。

ただし、header.phpはブログの構成に大きな影響を与えるところなので、追加する前には必ずバックアップをとっておき、慎重に作業しましょう。

対応できる環境はandroidかつChrome利用時のみ

上記のタグでアドレスバーの色の変更が反映されるのは以下の環境下のときだけのようです。

また、フォントの色やフォントを変えることもできません。

ただただ背景色のみが指定色に変わるカスタマイズです。

いつか色やフォントも変更できるといいね！

iOSのSafari利用時は黒か白のみ

iOSでSafariを利用している場合でも、以下のコードを書き込めばアドレスバーの色を変更できるそうです。（端末を持っていないため、未確認情報です。）

<meta name="apple-mobile-web-app-status-bar-style" content="black">

ただし、iOSのSafariの環境下では、アドレスバーの色は黒か白のどちらかしか選べないそうな。

アドレスバーのことを調べてみると、androidのChrome向けの内容はたくさん見つかるのですが、iOS（Safari）の環境下での方法はあまり載っていないように思います。

iOS（Safari）の環境下でのカスタマイズの方法は後藤隼人さんのブログにて公開されていました。

わたしは端末を持っていないので未確認なのですが、iOS（Safari）の端末を利用している方はこちらも試してみてくださいね。

<meta name="msapplication-navbutton-color" content="#4285f4">

まとめ：アドレスバーの色を変えることでブログがもっとかわいく、個性的に！

アドレスバーの色が変わったからと言って特別大きな利点はありませんが、好きな色にすることでブログの色に統一性を持たせられるのと、ブログにもっと愛着が持てるというのがメリットです。

個人的にはブログがさらにかわいくなってとっても気に入っているので(笑)気になる方はぜひカスタマイズしてみてくださいね。

ブログがもっと楽しくなっちゃうね！

以上、「【コピペでOK】ブログのアドレスバーを好きな色に変更するカスタマイズ。android、Chrome限定。」の内容でした。