アドレスバーの色が白じゃないサイトを見たことありませんか??
URLやホームボタンがあるスマホの上のやつです。
TwitterやUber Eatsなどもアレンジしていて、スマホユーザーが多くなっている今、ブログをやってる方には必須のアレンジなんです。
「アヒルの豆知識」はアヒルをイメージした黄色に設定し、印象に残るサイトにアレンジしています。
こんな感じ


やっぱりアドレスバーに色が付いてる方が印象に残ります!
今回はそんなアドレスバーをカスタマイズする方法を教えていきます
自分のサイトにマッチした色でブランド力をアップさせましょう
方法も簡単でたった1行のhtmlコードを追加するだけなので心配いりません。
アドレスバーの色をアレンジしよう
実はアドレスバーの色を自由に変えれるのは Android & Chrome の組み合わせ限定なんです。
色を変えれる組み合わせは他に iOS & Safari がありますが、こちらは黒か白にしか変えれません。
Windows Phoneも変更できるので紹介しますが、開発が終了して世界シェア0%なんで変更する必要はないでしょう。
Android&Chrome
<meta name = "theme-color" content="#ffd700">
追加するコードはこの1行だけです。
contentのカラーコードを変更すれば色も変わります。
カラーコードはこちらを参考にどうぞ

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でも色が使えるようになれば嬉しいですね
コメント