• メニュー
  • メニュー

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

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

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


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

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

スマホのブラウザの上のバーに色

プラグイン:Colorize Mobile Browser Address barをインストール

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


Colorize Browser 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>の中に書いてあげましょう。プラグインも軽量になっていますのでプラグインが簡単かと思います。

   

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


                   
参考になったらシェアお願いします!
toshiki@ひざのうえ起業家

3児&2犬(大型)のウェブ大好きパパです。

サイト作り・デザイン大好きで、どんどん新しいサイトを作ろうとしてしまう性格の持ち主。けど、深く深く極めるのも好きなハイブリットです。Wordpress歴は18年くらいです。

子どもが大きくなってしまう前に、子どもとの時間を作りたくて脱サラ計画中。ひざのうえにノートパソコンを置いてでも稼げる仕事で起業を目指しています。

10年ちょい前に世界一周チケットで主要都市だけ回る旅行も経験、これからもいっぱい旅行したい一心で切磋琢磨しています。旅行大好きだから。

好きな物:ウェブサイト/旅行(国内・海外)/動画編集/音楽(クラシック/JAZZ/ポップス)/山崎豊子/久石譲/ショパン/ピアノ/ラブラドールレトリバー/コーヒー/ワイン/スポーツ全般/スキーモーグル/高校野球/スキューバ

夢:キャンピングカーで子どもと犬と日本一周、もう一度乗りたい豪華客船クルーズ、映画音楽の作曲、プール付きか温泉付きの別荘で暖炉の前でリクライニングチェアで老眼鏡付けて分厚い洋書を手に犬を足元に居眠り。

ストーリーを見る

コメント・質問する

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です