WordPressテーマTwentySeventeenを使用している際、ヘッダー画像を未設定にした場合、ヘッダーの背景色を設定する方法について解説します。このテーマでは、ヘッダーの背景色をカスタマイズするために、いくつかの手段を活用できます。
1. ヘッダー背景色の変更方法
TwentySeventeenテーマでヘッダー画像を設定しない場合、ヘッダー部分の背景色がデフォルトで白色になります。この色を変更するには、テーマのカスタマイザーを使用して簡単に設定できます。
カスタマイザーで背景色を変更するには、以下の手順を行ってください。
- WordPressダッシュボードから「外観」→「カスタマイズ」を選択
- 「色」のセクションを開く
- 「ヘッダーの背景色」の項目を選択し、色を設定する
2. CSSでヘッダー背景色をカスタマイズ
カスタマイザーの設定だけでは十分でない場合、カスタムCSSを使ってヘッダーの背景色を変更することもできます。以下は、ヘッダーの背景色を任意の色に変更するためのCSSコードの例です。
#masthead { background-color: #ffcc00; }このコードを「外観」→「カスタマイズ」→「追加CSS」に貼り付けて保存すると、ヘッダーの背景色が変更されます。色コードは自分の希望に合わせて変更してください。
3. 背景色に画像を設定する
画像を設定したい場合は、ヘッダー画像を使用せずに、背景色の代わりに画像を設定することもできます。CSSで以下のように指定します。
#masthead { background-image: url('画像のURL'); background-size: cover; }このコードを使用すると、ヘッダー部分に指定した画像が背景として表示されます。
4. モバイル表示時の設定
モバイル端末で表示する際に、背景色や画像が崩れないようにするためには、メディアクエリを使って、モバイル専用のCSSを追加することも可能です。例えば、以下のコードを使って、モバイルでも綺麗に表示されるように調整できます。
@media screen and (max-width: 768px) { #masthead { background-color: #ffcc00; } }このように設定することで、モバイル端末で見やすい背景色を指定することができます。
5. まとめ
TwentySeventeenテーマのヘッダー背景色は、カスタマイザーやCSSを使って簡単に変更できます。ヘッダー画像を設定しない場合でも、背景色を変更して、サイトのデザインに合わせたカスタマイズを行いましょう。設定方法はシンプルで、必要に応じてCSSを追加することで、さらに細かいデザイン調整も可能です。
コメント