【3秒でできる】スマホのブラウザの上のバーに色を付ける方法(wordpressサイト)

スマホのサイトを見ていると、上部のバー(アドレスバー)に色がついているサイトに巡り合ったことがあると思います。Wordpressのサイトでは、プラグインを利用することで3秒で色を設定できるので、ほかのサイトと外観で違いを魅せたいあなたはさっそくやってみましょう！

めっちゃ簡単なのであなたの色を出したい場合におすすめのプラグインです！

Table of Contents

スマホのブラウザの上のバーに色を付ける方法(wordpressサイト)

スマホのアドレスバーとは以下の画像の部分になります。たまーに色のサイトを見かけると思いますが、この設定方法は思いほか超簡単です。

WordPressのプラグインの「新規追加」から「Colorize Mobile Browser Address bar」をインストールします。検索欄にこのままコピペしましょう。

追加すると、メニュー⇒設定に「Colorize Browser Bar」が追加されます。

こちらを選ぶとめっちゃシンプルな画面が表示されます。
Select Colorをクリックすると、カラーピッカーが表示されるので好きな色を選択して、”変更を保存”をクリックして保存します。

スマホでの対応になりますのでスマホでチェックしてみましょう。このように上部のアドレスバーのところに色がついてくれました！！

Android、iOS、そしてユーザーは少ないと思いますがWindows mobileにも対応していますので、簡単ものの3秒で色を変えられるこのプラグインを試してみてください。

プラグインを利用しないでも同じことができますので、その方法もご紹介します。

WordPressのテンプレートファイル「header.php」の<head></head>タグの間に以下のコードを入力します。

content=”xxxxxx” で囲まれている部分に、色を指定してあげます。

<meta name="theme-color" content="#13c2d6" />

色を選んだり作成するにはこちらのサイトが便利です。
https://www.w3schools.com/colors/colors_picker.asp

このタグはChromeに効果がありますので、iphoneなどでSafariを使用している場合は、以下のコードを使用します。ここでも、content=”xxxxxx”に色を指定します。

<meta name="apple-mobile-web-app-status-bar-style" content="black">

上のタグ2種類を<head></head>の中に書いてあげましょう。プラグインも軽量になっていますのでプラグインが簡単かと思います。

有益情報も流しているのでツイッターもぜひフォローお願いします。
Follow @LaptopreneurTN

参考になったらシェアお願いします！