モバイルブラウザでWordPressサイトのアドレスバーの色を変更する方法

多くの場合、別の Web サイトにアクセスします。Google Chromeモバイルブラウザモバイル ブラウザのヘッダーとアドレス バーの色がどのように変更されるかを想像したことがありますか? Web サイトのテーマの色をどのように自動的に調整したのでしょうか?まだ気づいていない場合は、Facebook などの人気ブランドの Web サイトを開いてください。

現時点では、この色調整機能は Google Chrome ブラウザーでのみ利用できます。今日この記事では、WordPress ウェブサイトのテーマの色に合わせて Chrome ブラウザーのヘッダーまたはアドレスバーの色を変更する方法を説明します。

Google Chrome のナビゲーション バーの色を WordPress ウェブサイトに合わせてカスタマイズするメリットは何ですか?

最近では、ほぼすべての WordPress テーマがモバイル ブラウザーと互換性があり、応答性も高いため、Web サイトの読み込み速度が短縮されます。また、テーマの応答性のおかげで、スマートフォンやタブレットなどのモバイルデバイスでも見栄えがよくなります。

Chrome ブラウザのヘッダーの色を Web サイトのテーマの色と一致させることは、視聴者にブランド イメージを残すため重要です。

モバイルブラウザがWordPress Webサイトのテーマカラーを適応させると、ネイティブアプリを使用しているような感覚が得られます。これにより、自動的に人の潜在意識への信頼が引き起こされ、最終的には売上が向上します。

WordPress でモバイルブラウザのアドレスバーに色を付ける最も簡単な方法

ステップ 1:WordPress ダッシュボードに移動し、[外観] -> [エディタ] -> 現在のテーマを選択します。

ステップ 2:右側のphpファイルリストからheader.phpファイルを選択します。

ステップ 3:次に、エディタ内をクリックして Ctrl+F を押して、</head> 。ヘッダー部の終了タグです。

ステップ 4:そのコードを見つけたら、その直前に次のコードを配置します。

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

指定されたスクリーンショットを参照できます。

ステップ5:上記のコードでは、#ff6600ウェブサイトに掲載されているオレンジ色です。ウェブサイトの色を確認するには、次のいずれかを押します。Ctrl+Shift+Iまたは右クリックして「検査」をクリックして、テーマのカラーコードを見つけます。

またはちょうど得たHTMLスクールウェブサイトでカラーコードを確認してください。