アドレスバーの色を自分好みにカスタマイズ!Cocoonで簡単に変更

クロームのアドレスバー色変更アイキャッチ ライター&ブロガーのつぶやき
この記事は約3分で読めます。

アンドロイドスマホを利用していると、アドレスバーの色が違うことがありますよね。

あの色変更をやってみたい!と検索した結果、とても簡単に変えられるとわかりました!

アドセンスバーやり方

↑サイトメインカラーになってる!!

変えたところでアクセスが増えるわけではありませんが、ちょっとおしゃれになりますのでぜひお試しください。

なお、テーマは「Cocoon」を利用しておりますので、そのやり方でご紹介です!

この一連の作業でデータ等が失われたなどのクレームは受け付けませんので、各自充分お気を付けください。
こちらのサイトを参考にさせていただきました!!

 

スポンサーリンク

CSSに詳しくなくても大丈夫!アドレスバーをカスタマイズする方法

カスタマイズは怖い……と思っている方も多いでしょう。

私も思っておりましたが、参考にさせていただいたサイトにはこんな風に記載されていました。

では早速、以下のコードをheader.phpに記入してください。コピペOKです。

<meta name="theme-color" content="色を指定" /*アドレスバーの色を変える*/ />
https://oshiro-046.com/chrome-addressbar-color-change/
花梨
花梨

header.phpって、アドセンスの申請コード貼ったところ?

headタグといえば聞き覚えがありました。

CSSをいじるのは私も怖いですが、アドセンスの申請コードを貼ったことがあるならば簡単です。

 

ワードプレスの管理画面で、「Cocoon設定」→「アクセス解析・認証」のタブを選び

アドレスバーやり方

 

ここにはヘッド用コードを簡単に張り付けられるところがあるので、そこに

 

アドセンスバーやり方

<meta name="theme-color" content="色を指定">

というコードを入れます。私が#c0eadbと入れたところだけ、それぞれ好きなカラーコードを挿入すればOKです!

画像編集しやすいようにスマホの画面ですが、パソコンからでも同じです。

 

CSSをいじらなくて良いのでありがたいですね。

花梨
花梨

あのゾーン、素人には魔境

 

 

問題発生!アドレスバーをカスタマイズしてもクロームに反映されない……

問題なくアドレスバーの色を変えられましたが、実はもうひとつの私のサイト花梨工房でも同じようにコードを入れたにもかかわらず、色が反映されませんでした。

アドレスバーの色変更できない

なんでだろう?

花梨
花梨

詳しい方いたらぜひ教えてください!

これ以上いじくっちゃうのが怖いので、とりあえず撤退します。

(ついでに、ブログのトップページのアイキャッチ画像、正方形表示に自分で変更した記憶があるのですが、横長に戻すにはどうしたら良いかわからなくなりました……こちらも詳しい方いたら教えてください)

 

 

まとめ・詳しくない人は注意しながらアドレスバーをカスタマイズ!

CSSに手を入れることなく、こんなに素敵にカスタマイズできるとは驚きです!

片方はできていませんが!

私も人様のサイトをみてやってみただけなのでわからないこともありましたが、今のところサイトに異常はないので興味があったらお試しくださいね。

そしてどうぞ私の疑問にお答えいただけたら嬉しいです。コメント欄、お問い合わせはもちろん、ツイッターもありがたいです!

コメント