ブログ

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

\ シェアしてね! /

この記事の内容

ブログのアドレスバーの色を変えるカスタマイズのやり方を解説🙌

一部の環境下でのみ反映💡

ブログをもっとおしゃれにしたい方にオススメ☺

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

Google Chrome限定だけど、アドレスバーを好きな色に変更するカスタマイズを適用させるとこんなにかわいくなる!

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

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

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

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

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

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

ブログのアドレスバーの色を変更するカスタマイズ(android、Chrome利用時)

について見ていきます。

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

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

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

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

headにmetaタグの追加

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

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

【ブログ】headはワードプレスで言うと「header.php」であることが多い

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

【ブログ】head内にタグを入れるときは/headの直前が分かりやすい!

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

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

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

タグが反映する環境

  • android 5.0 (Lollipop)以上
  • Google Chrome ver.39以降のブラウザ

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

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

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

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

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)の端末を利用している方はこちらも試してみてくださいね。

 Windows Phoneの場合

Windows Phoneも以下のコードを記述するとアドレスバーの色が変わるそうです。(こちらも端末を持っていないため、未確認です。)

Windows Phone

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

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

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

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

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

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

Sponsored Link
\ シェアしてね! /

-ブログ

Copyright© 節約帳 , 2020 All Rights Reserved Powered by AFFINGER5.