ブログ

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

更新日:

この記事の内容

アドレスバーの色を変えるカスタマイズのやり方。(コピペでOK)

一部の環境下でのみ反映する。

ブログをもっとおしゃれにしたい方におすすめ。

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

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

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

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

このカスタマイズが反映するのは特定の環境下だけですし、SEOなどに特に大きな影響もなさそうですが、アドレスバーの色が違うだけでも「おっ、このブログはこだわってそう」なんてプロっぽさが出ますよね。(出ませんか?笑)

そこで、ここではブログのアドレスバー(URLの表示箇所)の色を変えるカスタマイズについて見ていきましょう。

やり方はheadにmetaタグを追加するだけなのでカンタン

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

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

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

headにmetaタグの追加

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

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

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

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

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

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

対応できる環境が限られている

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

タグが反映する環境

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

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

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

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

Windows PhoneやiOSのSafari利用時でも使えるが制限あり

Windows PhoneやiOSでSafariを利用している場合でも、以下のコードを書き込めばアドレスバーの色を変更できるそうです。

Windows Phone

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

iOS(Safari)

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

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

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

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

参考サイト様

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

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

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

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

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

Sponsored Link

 おすすめ 

貯金

貯金へ

節約

節約へ

家計簿

家計簿へ

ブログ

ブログへ

公的制度

公的制度へ

TOP

TOPへ

-ブログ

Copyright© OLあさとさんの節約帳 , 2019 All Rights Reserved Powered by AFFINGER5.