当サイトは広告およびアフィリエイトプログラムによる収益を得ています。
スマホのブラウザにおいてアクションバーの色を変更するプログラム

スマホのブラウザにおいてアクションバーの色を変更するプログラム

2024年1月11日
Blueskyロゴ Pocketロゴ  はてなブックマークロゴ

スマートフォンのChromeブラウザでWebサイトを閲覧していると、アクションバー(アドレスバー周辺)の部分に色がついているWebサイトを目にすることが多くなりましたが、これは簡単に実現することができます。

アクションバーの配色

スマートフォンのChromeブラウザでWebサイトにアクセスすると、アクションバー(アドレスバー周辺)の色はデフォルト色で表示されます。このアクションバーの色は、特に色を指定していなければ様々なWebサイトで同じように表示されます。

しかし、最近ではサイトカラーに合わせてアクションバーの色を変更しているWebサイトを目にすることが多くなりました。

「どうやっているのか?」と疑問に思う人も居るでしょうが簡単に変更できます。

スマートフォン→Chrome→アクションバー

アクションバーの色を指定するやり方

アクションバー(アドレスバー周辺)の色を指定するのは、headタグの中に専用のmetaタグを記述するだけです。

<meta content="(カラーコード)" name="theme-color">

これはWebサイト側の設定であり、ユーザー(閲覧者)が変更することはできないので、「見えにくい」などと言う場合には管理者に連絡すると良いでしょう。