スマホのブラウザにおいて “アクションバーの色” を変更する方法

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

アクションバーの配色

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

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

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

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

<meta content="（カラーコード）" name="theme-color">

例として、内部SEO施策済みのシンプルな無料Wordpressテーマである “Simplicity” を用います。なお、テーマを編集する際は子テーマの利用をオススメします。

テーマの編集に失敗するとエラーが発生する場合があるので、必ずバックアップをとるようにしましょう。

WordPressのダッシュボードより『外観→テーマの編集』をクリックします。
テーマの編集より『header-insert.php』をクリックします。
header-insert.phpの編集より前述した『metaタグ』を任意の場所（よく解らなければ最終行）に追記します。
```
<meta content="#000000" name="theme-color">
```
#000000は “黒” を示しています。
最後に『ファイルを更新』をクリックします。