【HTML】モバイルページの検索窓に色を付けるmetaタグの「theme-color」の使い方。


アイキャッチ画像

日本経済新聞とかのページでタブの検索窓に色がついてるやつあるじゃないですか、あれなんかかっこいいんで実装してみました。(とはいへ昔からやってたのだが)

設定方法

単純にカラーコードの入った以下のmetaタグをhead内に貼り付けるだけ。

<meta name="theme-color" content="#5fd354">

16進数カラーコードを選択するやつは以下のサイトが便利です。

そうすると以下のように色が変わります。

ですが、Opera等一部のブラウザは非対応です。

市井

著者 市井
オタク総研媒体統括 兼 合同会社サブカル通信社執行役社長。専門領域はアニメ、テクノロジー(ガジェット)、プログラミング、コンテンツビジネス。PRプランニングやIP調達なども担当しています。新作アニメ、海外スマホ、東南アジア好き。