こんにちはウェブラボクリエイターズメモです。
最近スマホをiOS15にアップデートしたのですが、Safariでネットサーフィンをしているとブラウザのバーの色が変わるサイトをちらほら見かけるようになり、気になったので調査しました。
印象が残りますし、メタタグを入れるだけで簡単に設定できるので今回はその方法について解説します。
設定方法
設定は簡単。HTMLのheadタグ内に以下を記載するだけです。
<meta name="theme-color" content="#4285f4">
contentの値「#4285f4」の部分は適宜変更してください。
また、最近ではデバイスにダークモードの設定があります。
通常モードとダークモードでこのテーマカラーを変えたい場合、以下のように記載します。
<meta name="theme-color" media="(prefers-color-scheme: light)" content="white"> <meta name="theme-color" media="(prefers-color-scheme: dark)" content="black">
開発者向けの参考記事がこちら
theme-color – HTML: HyperText Markup Language | MDN
ちなみに、CSSをダークモードに対応させる方法を過去の記事で紹介しておりますので、ご興味あればご覧ください。
実際の見え方
Android版Chromeでの見え方はこんな感じ。左が設定されているもの、右がそうでないものです。
結構かわいいです。
設定済みの例 Qiita
iPhoneのSafariだとこんな感じ。ステータスバーの部分がさりげなく変わってますね。
(iOS15からアドレスバーは標準で下になりました）
設定済みの例 Qiita
対応ブラウザ
2021年10月現在、対応ブラウザはかなり少なく、Windowsでは無意味です。
SafariとAndroidのChromeでは最新バージョンのみ対応しています。
必須な設定というわけでもないので、”設定しておくだけマシ”と考えましょう！
2021年10月現在、theme-colorによるSEO効果は無いとされていますが
もし自分のサイトにテーマカラーがあるなら、設定しておくと訪問者の印象に残るかもしれません。
以上、ウェブラボクリエイターズメモでした！
The post meta theme-colorを設定して他のサイトと差別化しよう！ first appeared on ウェブラボ（株）スタッフブログ.
