【ブロガー必見】スマホのアドレスバーの色をだれでも簡単カスタマイズ

アドレスバーの色が白じゃないサイトを見たことありませんか？？
URLやホームボタンがあるスマホの上のやつです。

TwitterやUber Eatsなどもアレンジしていて、スマホユーザーが多くなっている今、ブログをやってる方には必須のアレンジなんです。

「アヒルの豆知識」はアヒルをイメージした黄色に設定し、印象に残るサイトにアレンジしています。

こんな感じ

ポン太

やっぱりアドレスバーに色が付いてる方が印象に残ります！

今回はそんなアドレスバーをカスタマイズする方法を教えていきます
自分のサイトにマッチした色でブランド力をアップさせましょう

方法も簡単でたった1行のhtmlコードを追加するだけなので心配いりません。

アドレスバーの色をアレンジしよう

実はアドレスバーの色を自由に変えれるのは Android & Chrome の組み合わせ限定なんです。
色を変えれる組み合わせは他に iOS & Safari がありますが、こちらは黒か白にしか変えれません。

Windows Phoneも変更できるので紹介しますが、開発が終了して世界シェア0%なんで変更する必要はないでしょう。

Android&Chrome

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

追加するコードはこの1行だけです。
contentのカラーコードを変更すれば色も変わります。
カラーコードはこちらを参考にどうぞ

WEB色見本原色大辞典 - HTMLカラーコード

色の名前とカラーコードが一目でわかるWEB色見本

iOS & Safari

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

ポン太

なぜ黒か白しか選べないんだよ！
あんまりだぁ〜

Windows Phone

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

header.phpを編集しよう

編集に失敗してしまうとサイトが崩れてしまうので、バックアップを取っておきましょう

まずはテーマエディターを開きましょう。
外見の項目にテーマエディターがあります。

そしたらheader.phpを表示させてください。

あとは実際にコードを挿入するだけです。

このように
<head>の後や</head>の前のようなわかりやすい場所に記述すれば、後に編集する時に楽ですよ

<meta name = "theme-color" content="#ffd700">
<meta name = "apple-mobile-web-app-status-bar-style" content　=　"black">
<meta name = "msapplication-navbutton-color" content = "#ffd700">

あとは保存すれば、完了です。

あひるん

どうでしたか？
うまくいったでしょうか？

最後までお付き合い頂きありがとうございました。
FirefoxやOperaでも色が使えるようになれば嬉しいですね