スマホでウェブサイトを見ている時、アドレスバー（URLが載っている部分）の色が他と違うページがあります。
アドレスバーの色を変更することは、ウェブサイトやブログのデザインをカスタマイズして、ブランドイメージを向上させる方法の1つです。
この記事では、アドレスバーの色を変更する手順を詳しく説明します✎*。
- はてなブログのアクセントカラーで反映させる方法
- metaタグを使って変更する方法（コピペOK）
- 色変更をする際の注意点
アドレスバーの色変更とは
はてなブログでも、⬆このようにURLから上部分の色が違うページがありますよね。
ちょっとした違いですが
- サイトの雰囲気を変えられる
- ウェブページの差別化ができる
- 見る人により印象付けられる
このようなメリットがある部分かなぁと思います。
はてなブログ（デフォルト）の仕組み
上の画像を見てもらえるとわかりますが、左上にある【Hatena Blog】のロゴの色がアドレスバーにも反映されています。
デザイン編集画面のスマホ📱マークから、アクセントカラーを変更して保存すればOK。
はてなブログ（デフォルト）での補足点
選択できる色が、初期設定と合わせて16色しかありません。
「もっと違う色を設定したい」という方はmetaタグ（以下の項目で説明）を追加して変更します。
色の変更方法《コピペOK》
metaタグを使います。
1行しかないのでとっても簡単です◎
<meta name="theme-color" content="カラーコード">
⬆こちらを『ヘッダーを編集する部分』か『メタデータを入れる部分』にコピペして、カラーコードを指定するだけです。（カラーコードはこちらのサイトが参考になります。）
ダッシュボード→デザイン→
【ヘッダ】ブログタイトル下
にコピペでもOKですが、
私は
ダッシュボード→設定→
【詳細説明】head要素にメタデータを追加
に入れています。
はてなブログのデザイン画面はパソコンからでないと少々操作しづらいですが、詳細画面はスマホからも見やすいので、ここに入れる方が分かりやすい気がします。
▼元々のデザイン
▼変更後のデザイン
色変更の注意点
アドレスバーの色変更を変更する方法を書きましたが、注意点と補足点がいくつかあるので、詳しく説明します。
ブラウザの互換性
現在、アドレスバーの色が反映されるブラウザは
- Chrome
- Safari
のみ対応となっています。
Firefox・Y!ブラウザー・Edgeなどのブラウザーでは反映されません。
Safariでの補足
iPhone標準搭載のSafariはアドレスバーの色が反映されるブラウザーですが、設定によっては色が反映されない場合があります。
タブバーの『ウェブサイトのカラーに合わせる』という設定をオンにしている必要があります。
こればかりはSafariユーザーさんの設定状況に委ねられる点なので、Safari使っている方はぜひ設定お願いします(o･ω-人)笑
ダークモードでは反映されない
ダークモードで閲覧している場合は、Chrome・Safariどちらも反映されません。
ダークモードでも反映させるmetaタグはあるのですが、ダークモードで見たい人にダークじゃないカラーを見せるのは不親切な気がするので、ここでは割愛します。
ユーザーに配慮したカラーリングを
アドレスバーを奇抜すぎる色にするのは好ましくありません。
アドレスバーは頻繁に画面に表示される部分なので、ビビッドすぎる色味だと目が疲れてしまうはずです。
読みにくさや違和感を引き起こさない色の選択をしてくださいね。
まとめ
URLが載っているアドレスバーから上の部分の色を変更する方法をご紹介しました。
色変更が反映されないブラウザーはあるのものの、たった1行のタグを追加するだけで変更できるので試してみるのはいかがでしょう·͜·
https://twitter.com/yunico_blog/status/1702975203943563684?t=Qo3OFA5-ZjlfR9ZZyH6-jg&s=19
今日はそんな感じ！
それではまたね🧸◌𓈒𓐍
