TwentySeventeenテーマでヘッダー画像未設定時の背景色設定方法

WordPressテーマTwentySeventeenを使用している際、ヘッダー画像を未設定にした場合、ヘッダーの背景色を設定する方法について解説します。このテーマでは、ヘッダーの背景色をカスタマイズするために、いくつかの手段を活用できます。

1. ヘッダー背景色の変更方法
2. CSSでヘッダー背景色をカスタマイズ
3. 背景色に画像を設定する
4. モバイル表示時の設定
5. まとめ

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を追加することで、さらに細かいデザイン調整も可能です。