スマートフォンでうまく機能するWordPressサイトを構築している場合、おそらくすべてが画面に収まり、すぐに読み込まれるようにすることに重点を置いているでしょう。
しかし、多くの人が見落としている小さな詳細があります。それは、お使いの携帯電話のアドレスバー（ウェブサイトのアドレスを入力する上部のバー）の色です。この詳細を正しく設定することで、サイトがより洗練され、まとまりのある印象になり、視覚的なブランドを強化することができます。
WordPressサイトの所有者がモバイルユーザーにとってウェブサイトを改善するのを数え切れないほどお手伝いしてきました。私たちが学んだトリックは？アドレスバーの色をウェブサイトのデザインに合わせると、すべてがよりプロフェッショナルに見えます。
このガイドでは、WordPressサイトの外観に合わせてモバイルアドレスバーの色を変更する最も簡単な方法を紹介します。
モバイルブラウザのアドレスバーの色を一致させる方法
レスポンシブなWordPressテーマはサイトをモバイルで機能的にしますが、アドレスバーの色を合わせることでブランドのプレゼンテーションをさらに一歩進めることができます。
より洗練されたカスタムルックを作成し、ウェブサイトをネイティブアプリのように感じさせます。
このような視覚的な細部へのこだわりは、実際に影響を与えます。例えば、Adobeの調査によると、デザインが魅力的でない場合、38%の人がウェブサイトの利用をやめることが示されています。
ブラウザのアドレスバーをサイトのカラースキームに合わせることで、よりまとまりのあるプロフェッショナルなユーザーエクスペリエンスを作成し、訪問者との信頼構築に役立ちます。
それを踏まえて、WordPressテーマに合わせてモバイルブラウザのアドレスバーを簡単に一致させる方法を見てみましょう。
注意: この機能は、AndroidのGoogle ChromeやiOSのSafariなど、ほとんどの最新モバイルブラウザでサポートされています。訪問者が古い、サポートされていないブラウザを使用している場合、サイトに問題を引き起こすことなく、この設定は無視されます。
モバイルブラウザのアドレスバーの色をWordPressサイトに合わせる方法
カスタムコードをテーマまたは子テーマのheader.phpファイルに、閉じ</head>タグの直前に追加することで、モバイルブラウザのアドレスバーの色を簡単に変更できます。
ただし、わずかなエラーでもウェブサイトが破損し、アクセスできなくなる可能性があります。
だからこそ、WPCodeの使用をお勧めします。徹底的なテストの結果、これが最高のWordPressコードスニペットプラグインであり、ウェブサイトにコードを追加する最も安全な方法であると結論付けました。
プラグインの詳細については、WPCodeレビューをご覧ください。
まず、WPCodeプラグインをインストールして有効化する必要があります。詳細な手順については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。
注意： WPCodeプラグインには、このチュートリアルで使用できる無料バージョンもあります。ただし、有料プランにアップグレードすると、コードスニペットライブラリ、条件付きロジックなどの機能にアクセスできるようになります。
有効化したら、WordPress管理サイドバーから コードスニペット » + スニペットを追加 ページにアクセスします。
ここで、「カスタムコードを追加（新規スニペット）」オプションの下にある「スニペットを使用」ボタンをクリックします。
ここで「カスタムスニペットを作成」ページに移動し、コードスニペットの名前を追加することから始めます。この名前はフロントエンドには表示されず、ご自身の確認用です。
次に、表示されるプロンプトからコードの種類として「HTMLスニペット」を選択します。
次に、以下のコードスニペットを「コードプレビュー」ボックスにコピー＆ペーストします。
<meta name="theme-color" content="#ff6600" />
それが完了したら、コードのcontent=行の隣に、選択した色の16進コードを追加できます。
この色は、モバイルブラウザのアドレスバーに使用されます。
プロのヒント： Adobe PhotoshopやGimpなどの画像編集ソフトウェアを使用して、色のHEX値を取得できます。
特別なソフトウェアを必要としないより簡単な方法として、無料のオンラインカラーピッカーや、ウェブブラウザの組み込み「検証」ツールを使用して、サイトから正確なHEXコードを見つけることができます。
その後、「挿入」セクションまでスクロールダウンし、「自動挿入」モードを選択します。
これにより、コードはアクティベートされると自動的にウェブサイトで実行されます。
最後に、一番上までスクロールして、「非アクティブ」スイッチを「アクティブ」に切り替えます。
次に、「スニペットを保存」ボタンをクリックして設定を保存し、コードを実行します。
モバイルフレンドリーなWordPressサイトを作成するためのボーナスのヒント
アドレスバーの色を変更することは素晴らしいスタートですが、真にモバイルフレンドリーなウェブサイトを作成するには、さらにいくつかのステップが必要です。
Googleのような検索エンジンはモバイルファーストインデックスを優先するため、優れたモバイルエクスペリエンスはSEOにとって不可欠です。実際、インターネットトラフィックの大部分はモバイルデバイスが占めています。
これらの訪問者のためにサイトを改善するためのその他のヒントをいくつかご紹介します。
- レスポンシブテーマまたはページビルダーを使用する：基盤は、さまざまな画面サイズに適応するレスポンシブWordPressテーマである必要があります。さらに多くの制御を行うには、SeedProd（コードなしでカスタムモバイルフレンドリーなレイアウトを作成できるビジュアルページビルダー）のようなプラグインを使用できます。
- モバイル対応フォームを作成する：お問い合わせフォーム、ログインフォーム、アンケートが小さな画面でも簡単に入力できるようにします。テンプレートが最初からモバイルデバイスに最適化されているため、ドラッグアンドドロップのフォームビルダーであるWPFormsのようなプラグインをお勧めします。
- 画像とメディアを最適化する：大きな画像はモバイル接続でのサイトの速度を低下させる可能性があります。アップロードする前に、画像をリサイズしてウェブ用に圧縮してください。
- サイトの速度に焦点を当てる：画像以外にも、高速なWordPressホスティングプロバイダーを使用し、コメントの遅延読み込みを有効にし、キャッシュプラグインを使用することで、サイトを高速化できます。
詳細については、モバイルフレンドリーなWordPressサイトを作成する方法に関する完全なチュートリアルをご覧ください。
この記事が、モバイルブラウザのアドレスバーの色をWordPressサイトに合わせて変更する方法を学ぶのに役立ったことを願っています。また、初心者向けのWordPressウェブサイトの色のカスタマイズ方法に関するガイドや、WordPress向けの最高のページビルダープラグインの専門家による選び方もご覧ください。
この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。
ジュリー
モバイルタブがウェブサイトの最上部のヘッダーと一致する見た目が気に入っているので、その方法を探していました。これらの指示はすべて実行しましたが、モバイルでサイトを表示しても何も変わりませんでした。何か提案はありますか？
WPBeginnerサポート
お使いのスマートフォンはダークモードを使用していますか、またはサイトのテーマによって設定されたスタイルを上書きする別のスタイリングを使用していますか？これは、この方法で設定したスタイルと一致しない最も一般的な理由です。お使いのスマートフォンがサイトの設定よりも優先されるためです。
管理者
プラガティ・クマール・シール
それは素晴らしいですね。ナビゲーションバーも変更するのを手伝ってもらえますか？私もいくつかのサイトでそれが実装されているのを見ました。
WPBeginnerサポート
ナビゲーションバーのデザインと設定はテーマごとに異なるため、まずはご利用のテーマのサポートにご確認ください。
管理者
デニス・ムトミ
当時これを実装したのを覚えています。最近は状況が変わって、UIは当時とは全く違う見た目になっています。
Mrteesurez
これをどうやるか探していました。この投稿で発見したばかりです。魔法のようなコードがたった1行で実現できることに驚いています。この機能が気に入ったので、自分のサイトに適用するつもりです。
イジー・ヴァネック
指示をありがとうございます。私のウェブサイトで使用したところ、うまく機能しました。モバイルChromeでしか機能しないのが残念です。
WPBeginnerサポート
Maybe in the future it will be more likely for desktop browsing.
管理者
イジー・ヴァネック
指示をありがとうございます。ウェブサイトで使用したところ、モバイルのChromeブラウザでウェブサイトのヘッダーの色で表示されるようになりました。ずっと見栄えが良くなりました。残念ながら、モバイルChrome以外のブラウザではほとんどサポートされていないようです。
WPBeginnerサポート
Some other mobile browsers are starting to adopt it so it should hopefully start to be seen more often
管理者
イジー・ヴァネック
将来的には、より多くのブラウザがこれをサポートすることを願っています。なぜなら、現時点ではモバイルChromeでのみこの機能を検証したからです。すべてのモバイルブラウザがこれを実行できるようになれば素晴らしいでしょう。なぜなら、それはウェブをより良く見せるだけでなく、多くの人がそれを使用していないため、ユニークなタッチも加わるからです。将来的に、より多くのブラウザでこれが見られることを願っています。
Mrteesurez
まさにその通りです！サイトにユニークなタッチを加え、よりプロフェッショナルで訪問者にとって魅力的なものになります。Chromeが最初に採用しましたが、今ではVivaldiのような他のブラウザも採用していることに気づきました。ご指摘ありがとうございます。
アンキット・サフ
完全に機能しています
ありがとうございます
WPBeginnerサポート
ガイドがお役に立てて嬉しいです！
管理者
サラ
これは機能しなくなったようです… 2月にウェブサイトに実装しましたが、別のサイトにも適用しました… 新しいサイトを確認したところ機能せず、古いサイトも機能しません！Chromeモバイルアプリで何かが変更されたのでしょうか？
WPBeginnerサポート
ブラウザでダークモードを使用している場合、Chromeはこの設定を上書きします。
管理者
ナヴィーン・ラナ
テーマまたは子テーマの header.php ファイルはどこにありますか？
WPBeginnerサポート
テーマのファイルは、[外観] > [テーマエディター]の下、ホスティングプロバイダーのファイルマネージャーを使用するか、以下のガイドに従ってFTPツールを使用して見つけることができます。
https://www.wpbeginner.com/beginners-guide/how-to-use-ftp-to-upload-files-to-wordpress-for-beginners/
FTPまたはホストのファイルマネージャーの場合、wp-content>Themesの下に移動し、アクティブなテーマと同じ名前のフォルダを見つけます。
管理者
マンシャント・シン
素晴らしい投稿で、機能していますが、カテゴリページでは機能せず、投稿を開いたときにも機能しません。
WPBeginnerサポート
特定のテーマのサポートに、それらのページに異なるヘッダー スタイリングが割り当てられていないことを確認することをお勧めします。
管理者
アディティア・サビタ
まず、この素晴らしいチュートリアルをありがとうございます。しかし、今問題に直面しています。サイトのホームページでアドレスバーの色が表示されません。サイトのすべてのページや投稿では完璧に表示されていますが、ホームページだけ表示されません。
どうすればよいですか？助けてください！
WPBeginnerサポート
設定を上書きしている可能性があるホームページテンプレートに設定されていないか、お使いの特定のテーマのサポートに確認することをお勧めします。
管理者
アルメシュ
一発でできました。ありがとうございます。
WPBeginnerサポート
Glad our guide was helpful
管理者
クレイグ・ウィルソン
更新には時間がかかりますか？
WPBeginnerサポート
それは可能です。ブラウザのキャッシュも変更を遅延させる可能性があります。
管理者
エブラヒム・タレブ
ありがとうございます。
ただし、ユーザーがスマートフォンのダークモードを有効にしている場合、このトリックは機能しないことに注意してください。ダークモードは他のすべてを上書きします。（一部のスマートフォンにはダークモードというオプションがあります）
WPBeginnerサポート
Thank you for sharing that in case someone ran into that issue
管理者
アリフ
驚くほどシンプル
WPBeginnerサポート
Glad our guide was helpful
管理者
カフィ
マジで言いたかったんだけど、
君たちは最高だよ！
WPBeginnerサポート
Thank you, glad you like our content
管理者
フレッド
また、チームの簡単なチュートリアルです！
アドレスバーにグラデーションカラーを追加したいです。
可能ですか？
WPBeginnerサポート
この方法では、現時点ではできません。
管理者
フレッド
Thanks for your reply
ヴァリ・M
本当にありがとうございます :)
WPBeginnerサポート
You’re welcome
管理者
アミット・アヤロン
とてもよく機能します！セットアップもとても簡単です。
本当にありがとうございました！
WPBeginnerサポート
You’re welcome, glad our guide could be helpful
管理者
ラファエル
完璧に動作します！
ありがとう
WPBeginnerサポート
Glad our guide was helpful
管理者
Sunil Ilanthila
アドレスバーの色は変わりましたが、テキストは黒です。白にしたいのですが、どうすればいいですか？
WPBeginnerサポート
他に何も聞かない限り、それはあなたが設定した色ではなく、モバイルブラウザによって決定されます。
管理者
デボラ
ありがとうございます。非常に迅速かつ簡単に実行でき、私のウェブサイトにかなり上品な外観を与えてくれます。
WPBeginnerサポート
Glad our tutorial could help
管理者
ロヒット
誰か助けてくれますか？Chrome でのみ機能しますか？また、asp.net にも使用できますか？
WPBeginnerサポート
現時点ではChromeでのみ機能します。
管理者
ナシム
Elementor Page Builderを使用している場合、どのように行いますか
Syaz Amirin
同じです。Elementorを使用しても、同じプロセスです。
M.スラナ
これに関するスニペットはありますか？
フィラルピー
素晴らしい、私も機能しました。ありがとうございます。
マーク
brilliant, 2 minute job and works a treat! Thanks
フィル・ダフニー
本当にありがとうございます。大変助かりました！
Nitish
Android Kit Katでも動作しています…Chromeが更新されたのだと思います…
ジーイーイー
ありがとうございます
しかし、iPhoneとWindowsはどうですか？
クレイグ・ジョン・スミス
私のWeeblyではうまく機能しました。コードをいじる代わりに、設定に移動し、ヘッダーコードと書かれているセクションにドロップするだけです。すでに2つのサイトで実行し、あと1つ残っています。
ディエゴ
とても良いですね…そしてうまくいきました！でも、テキストを白くするにはどうすればよいですか？
テイラー
本当にありがとうございます！探していたもので、説明されている通りに設定できました！
アカシュ・グプタ
このコードを、テーマまたは子テーマのheader.phpファイルの閉じタグの直前に追加するだけです。
しかし、あるウェブサイトでは動作しません。なぜですか？
イーサン
Android 5.0以降で動作するようです
エナック
素晴らしいヒントで、私のサイト（あなたのサイトはいつもそうです）でうまく機能しました。iPhone用のコードも入手できたら教えてください。どちらにしても文句は言えません。ありがとうございます！
イルファン・アッバス
この方法は、新聞7テーマで機能しますか？
ハミド・ロシャン
まさに知りたいことでした
トムヤム
あなたは最高です！
ザカリア
こんにちは、このヒントをありがとうございます。これはBloggerのテンプレートでも機能しますか？もしそうなら、どのように追加すればよいですか？何度も試しましたが、Bloggerは常にエラーを表示します。
サイコット・エイチシー
すごいボス！ありがとうございます…！！
サイフ
機能しませんでした。イレブン40の子テーマを持っていましたが、機能しません。
ケベン
こんにちは！どのブラウザでサポートされていますか？
WPBeginnerサポート
AndroidデバイスのGoogle Chrome。
管理者
テリー
これ大好きです！ヒントをありがとう
ディラヴァット
非常に役立つトリックです。ありがとうございます！
アレッシオ
これは本当に素晴らしいです！ありがとうございます！
ジェラール・ヒメネス
素晴らしい情報です。サイトを変更しました。
ボビー
Nice tip. Let’s figure out how to do that for all browsers on mobile.
シュー
Thanks. Much appreciated
ジェハンギール
非常に有益です。
アフマド・ファタ
Wow look simple.. i will try on my blog.
Terima Kasih