アンドロイドスマホを利用していると、アドレスバーの色が違うことがありますよね。
あの色変更をやってみたい！と検索した結果、とても簡単に変えられるとわかりました！
↑サイトメインカラーになってる！！
変えたところでアクセスが増えるわけではありませんが、ちょっとおしゃれになりますのでぜひお試しください。
なお、テーマは「Cocoon」を利用しておりますので、そのやり方でご紹介です！
CSSに詳しくなくても大丈夫！アドレスバーをカスタマイズする方法
カスタマイズは怖い……と思っている方も多いでしょう。
私も思っておりましたが、参考にさせていただいたサイトにはこんな風に記載されていました。
では早速、以下のコードをheader.phpに記入してください。コピペOKです。
<meta name="theme-color" content="色を指定" /*アドレスバーの色を変える*/ />
header.phpって、アドセンスの申請コード貼ったところ？
headタグといえば聞き覚えがありました。
CSSをいじるのは私も怖いですが、アドセンスの申請コードを貼ったことがあるならば簡単です。
ワードプレスの管理画面で、「Cocoon設定」→「アクセス解析・認証」のタブを選び
ここにはヘッド用コードを簡単に張り付けられるところがあるので、そこに
<meta name="theme-color" content="色を指定">
というコードを入れます。私が#c0eadbと入れたところだけ、それぞれ好きなカラーコードを挿入すればOKです！
画像編集しやすいようにスマホの画面ですが、パソコンからでも同じです。
CSSをいじらなくて良いのでありがたいですね。
あのゾーン、素人には魔境
問題発生！アドレスバーをカスタマイズしてもクロームに反映されない……
問題なくアドレスバーの色を変えられましたが、実はもうひとつの私のサイト花梨工房でも同じようにコードを入れたにもかかわらず、色が反映されませんでした。
なんでだろう？
詳しい方いたらぜひ教えてください！
これ以上いじくっちゃうのが怖いので、とりあえず撤退します。
(ついでに、ブログのトップページのアイキャッチ画像、正方形表示に自分で変更した記憶があるのですが、横長に戻すにはどうしたら良いかわからなくなりました……こちらも詳しい方いたら教えてください)
まとめ・詳しくない人は注意しながらアドレスバーをカスタマイズ！
CSSに手を入れることなく、こんなに素敵にカスタマイズできるとは驚きです！
片方はできていませんが！
私も人様のサイトをみてやってみただけなのでわからないこともありましたが、今のところサイトに異常はないので興味があったらお試しくださいね。
コメント