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

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からアドレスバーは標準で下になりました)
スクリーンショット 2021-10-06 18.00.13_2

設定済みの例 Qiita
 

対応ブラウザ

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

Can I use

 

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

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

meta theme-colorを設定して他のサイトと差別化しよう! はコメントを受け付けていません
  • このページを共有する