東京都新宿区のWeb制作会社 ウェブラボ株式会社

クリエイターブログ

meta theme-colorを設定して他のサイトと差別化しよう!

2021.10.20 Posted by

Screenshot_2021-10-06-17-59-31-74_cutこんにちはウェブラボクリエイターズメモです。
最近スマホをiOS15にアップデートしたのですが、Safariでネットサーフィンをしているとブラウザのバーの色が変わるサイトをちらほら見かけるようになり、気になったので調査しました。

 

印象が残りますし、メタタグを入れるだけで簡単に設定できるので今回はその方法について解説します。

設定方法

設定は簡単。HTMLのheadタグ内に以下を記載するだけです。

contentの値「#4285f4」の部分は適宜変更してください。
 
また、最近ではデバイスにダークモードの設定があります。
通常モードとダークモードでこのテーマカラーを変えたい場合、以下のように記載します。

 

開発者向けの参考記事がこちら
theme-color – HTML: HyperText Markup Language | MDN

 

ちなみに、CSSをダークモードに対応させる方法を過去の記事で紹介しておりますので、ご興味あればご覧ください。

実際の見え方

Android版Chromeでの見え方はこんな感じ。左が設定されているもの、右がそうでないものです。
結構かわいいです。
Screenshot_2021-10-06-17-59-31-74_ba2

設定済みの例 Qiita
 
iPhoneのSafariだとこんな感じ。ステータスバーの部分がさりげなく変わってますね。
(iOS15からアドレスバーは標準で下になりました)

設定済みの例 Qiita
 

対応ブラウザ

2021年10月現在、対応ブラウザはかなり少なく、Windowsでは無意味です。
SafariとAndroidのChromeでは最新バージョンのみ対応しています。
必須な設定というわけでもないので、”設定しておくだけマシ”と考えましょう!

Can I use

 

2021年10月現在、theme-colorによるSEO効果は無いとされていますが
もし自分のサイトにテーマカラーがあるなら、設定しておくと訪問者の印象に残るかもしれません。

以上、ウェブラボクリエイターズメモでした!

オリエンシートダウンロード

オリエンシートダウンロード

PAGETOP

お問い合わせContact

まずはお気軽にご相談ください。

Web制作・コンサルティング・システム開発に関するお問い合わせ・お見積もり依頼は、
電話・問い合わせフォームより受け付けております。(受付時間:平日9:30〜18:30)

〒160-0004 東京都新宿区四谷4丁目33-2
マーキュリースクエア4F

TEL:03-5366-3277 FAX:03-5366-3278