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

スポンサーリンク
スポンサーリンク
プログラム→HTML

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

アクションバーの配色

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

スマートフォン→Chrome

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

スマートフォン→Chrome

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

アクションバーの色を指定する手順

概要

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

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

WordPressでテーマを編集する

例として、内部SEO施策済みのシンプルな無料Wordpressテーマである “Simplicity” を用います。なお、テーマを編集する際は子テーマの利用をオススメします。
テーマの編集に失敗するとエラーが発生する場合があるので、必ずバックアップをとるようにしましょう。
  1. WordPressのダッシュボードより『外観→テーマの編集』をクリックします。

    WordPress→ダッシュボード→メニュー

  2. テーマの編集より『header-insert.php』をクリックします。

    WordPress→テーマの編集

  3. header-insert.phpの編集より前述した『metaタグ』を任意の場所(よく解らなければ最終行)に追記します。
    <meta content="#000000" name="theme-color">
    
    #000000は “黒” を示しています。
  4. 最後に『ファイルを更新』をクリックします。

    WordPress→テーマの編集

サイトの変化

たった1行のmetaタグを追加するだけで、アクションバー(アドレスバー周辺)の色が指定した色へ変化します。

スマートフォン→Chromeスマートフォン→Chrome

アクションバーの色を指定するやり方は以上です。

サイトにイメージカラーがある場合には、それに合わせて色を指定すれば統一感がでて良いかもしれません。ただし、色によっては見にくくなる可能性もあるので、よく確認することをオススメします。

スポンサーリンク

シェアする