こんにちは "osaboo"
です。"@osaboo_Bot"
この記事で解決できる悩み
この記事では、AFFINGER7でヘッダー画像にメニューやサイト名を重ねて表示する方法から、文字色や高さの調整手順まで解説します。
「まずはブログを始めたい！」という方は、『WordPressブログ完全ガイド』をご覧ください。
開設から運営・収益化までを初心者向けに画像付きでわかりやすく解説しています。
AFFINGER7でヘッダー画像にメニューとサイト名を重ねる仕組み
AFFINGER7では、ヘッダー画像の上にサイト名やキャッチフレーズ、ヘッダーメニューを重ねて表示できます。
画像の上に文字やメニューを配置することで、サイトの雰囲気を伝えながら、各ページへの移動もしやすいヘッダーを作れます。
設定後は、文字色やヘッダーの高さを調整して、画像と文字が見やすくなるように整えましょう。
ヘッダー画像を準備する
ヘッダーに使用する画像を準備します。
サイト名やメニューを重ねて表示するため、文字を配置しても見やすい画像を選びましょう。
画像を用意したら、WordPressのメディアライブラリにアップロードしておきます。
この記事では、PC用のヘッダー画像として、サイズが1000×200pxの画像を使用します。
「画像を追加」をクリックして、コンピューターから画像ファイルをアップロードしてください。お使いのテーマはヘッダーのサイズとして 2200 × 500 ピクセルの画像を使うと最もうまくいきます — 画像をアップロードしてから完璧にフィットするように切り抜くこともできます。
次の手順で、AFFINGER7のヘッダー画像を設定していきます。
AFFINGER7でヘッダー画像を設定する
ヘッダー画像の上にサイト名やメニューを重ねるには、カスタマイザーの「背景 / header背景」から「headerエリア」に背景画像を設定します。
通常の「ヘッダー画像」ではなく、背景画像として設定するのがポイントです。
headerエリアに背景画像を設定する
- WordPress管理画面から「外観」→「カスタマイズ」を開きます。
- 「背景 / header背景」→「headerエリア」を選択します。
- 「背景画像」の「画像を選択」をクリックし、準備した画像を選びます。
- 「背景画像を繰り返さない」にチェックを入れます。（※ 画像サイズにより不要の場合があります）
- 「背景画像を幅100％のレスポンシブにする」にチェックを入れます。（※ 画像サイズにより不要の場合があります）
- 「公開」をクリックして設定を保存します。
これで、headerエリアに背景画像を設定できます。
背景 / header背景
➡︎
headerエリア
➡︎
詳細設定項目
⬇︎
以下は、詳細設定項目の背景画像設定箇所までスクロールした画面です。
「headerエリア」にある背景画像の設定項目
背景画像
- PC用
- 画像を選択
- スマホ（959px以下）用
- 画像を選択（※ スマホ用に別のヘッダー画像を設定したい場合)
- 背景画像を繰り返さない
- チェックを入れます。
- 背景画像を幅100%のレスポンシブにする
- チェックを入れます。
ここまでの設定で、ヘッダーに背景画像が表示されます。
次に、画像に合わせてヘッダー全体の高さや、サイトタイトル・キャッチフレーズ・メニューの文字色を調整しましょう。
関連記事 基本的なヘッダー画像の設定方法について こちらの記事で詳しくご紹介しています。
-
-
AFFINGER6のヘッダー画像の設定方法｜カスタマイザーと管理画面で解説
AFFINGER6のヘッダー画像の設定方法を初心者向けに解説。カスタマイザーや管理画面での変更手順から、見やすく整えるコツまでわかりやすくまとめています。
サイトタイトル・キャッチフレーズ・ヘッダーメニューの文字色を変更する
ヘッダー画像を設定したら、画像の色に合わせてサイトタイトル・キャッチフレーズ・メニューの文字色を調整します。
文字が背景画像に埋もれないように、画像とのコントラストを意識して設定しましょう。
サイトタイトルとキャッチフレーズの文字色を変更する
サイトタイトルとキャッチフレーズの文字色は、カスタマイザーから変更できます。
- WordPress管理画面から「外観」→「カスタマイズ」を開きます。
- 「ヘッダーナビゲーション」→「パソコン（PC）」を選択します。（※ 同様にスマホ（SP）も設定します）
- 「サイトのタイトルとキャッチフレーズ」の「色を選択」をクリックし、カラーパレットから色を選びます。
- プレビューで表示を確認し、「公開」をクリックして保存します。
ヘッダーナビゲーション
➡︎
パソコン（PC）
➡︎
詳細設定項目
⬇︎
以下は、詳細設定項目のサイトタイトルとキャッチフレーズの設定箇所までスクロールした画面です。
「パソコン（PC）」にあるサイトタイトルとキャッチフレーズの設定項目
サイトタイトルとキャッチフレーズ
- 色を選択 → カラーパレットから選択
- 文字の色を変更します。
以下は、詳細設定項目の表示パターンの設定箇所までスクロールした画面です。
「パソコン（PC）」にある表示パターンの設定項目
表示パターン
- 固定 → ONにした場合（※ 通常では設定不要）
- ヘッダーナビゲーションの表示パターンを「固定」にしている場合は、スクロール時の背景色も文字色とのバランスを見ながら調整しましょう。
カスタマイザープレビュー（参考画面）
ヘッダーナビゲーションの色をPCとスマホで分けて設定する場合は、スマホ（SP）の設定も同様に調整します。
関連記事 画像ロゴを使用する場合は、ロゴ画像の設定方法も確認しておきましょう。
-
-
AFFINGER7のロゴ画像の設定方法｜最適なサイズと調整のコツ
AFFINGER7のロゴ画像の設定方法を解説。カスタマイザーでの設定手順から、最適な画像サイズやファイル形式、きれいに表示するための調整ポイントまで紹介します。
ヘッダーメニューの文字色を変更する
ヘッダーメニューの文字色は、カスタマイザーから変更できます。
- WordPress管理画面の「外観」→「カスタマイズ」を開きます。
- PC ヘッダーメニュー / 横列を選択します。
- メニューの文字色を設定します。（※ 設定場所は、使用しているメニューの種類によって異なります）
- プレビューで表示を確認し、「公開」をクリックして保存します。
メニュー
➡︎
PC ヘッダーメニュー / 横列
➡︎
詳細設定項目
⬇︎
以下は、詳細設定項目の「ヘッダーメニュー」の設定箇所までスクロールした画面です。
「PC ヘッダーメニュー / 横列」にあるヘッダーメニューの設定項目
ヘッダーメニュー
文字色
- 第一階層 → カラーパレットから選択
- 文字の色を変更します。
- 第一階層（フロント以外） → カラーパレットから選択
- 文字の色を変更します。（必要に応じて）
- 下層ドロップダウンメニュー → カラーパレットから選択
- 文字の色を変更します。（必要に応じて）
- 第一階層メニューを太字にする（サイドメニュー連動）
- チェックを入れます。（必要に応じて）
- 背景色やボーダーも、メニューのデザインに合わせて調整しましょう。
カスタマイザープレビュー（参考画面）
この記事のプレビューでは、以下の設定を使用しています。
以下は、詳細設定項目の「ヘッダーメニュー（横列）」の設定箇所までスクロールした画面です。
「PC ヘッダーメニュー / 横列」にあるヘッダーメニュー（横列）の設定項目
ヘッダーメニュー（横列）
- 文字色 → カラーパレットから選択
- 文字色（フロント以外）→ カラーパレットから選択（必要に応じて）
- 太字にする
- チェックを入れます。（必要に応じて）
- 下層メニューも表示する（横列・PC）
- チェックを入れます。（必要に応じて）
- 下層ドロップダウンメニュー文字色
- 文字の色を変更します。（必要に応じて）
- 下層ドロップダウンメニュー背景色
- 文字の色を変更します。（必要に応じて）
関連記事 メニューの設定方法については こちらの記事で詳しくご紹介しています。
-
-
AFFINGER7のメニュー設定方法｜ヘッダー・フッター・スマホメニューを解説
AFFINGER7のメニュー設定を初心者向けに解説。ヘッダーメニュー・フッターメニュー・スマホメニューの作成方法から、おすすめ設定やデザイン調整まで分かりやすく紹介します。
ヘッダー画像エリアの高さを調整する
ヘッダー画像エリアの高さは、カスタマイザーの「ヘッダー画像エリア最低の高さ（px）」で設定できます。
- 「外観」→「カスタマイズ」を開きます。
- ヘッダー画像の設定画面を開きます。
- 「ヘッダー画像エリア最低の高さ（px）」に数値を入力します。
- スマホの高さも分けて設定する場合は、「スマホ（599px以下）※高さを分ける場合」に数値を入力します。
- プレビューで表示を確認し、「公開」をクリックして保存します。
トップページのヘッダー画像エリアを画面サイズに応じて最大にしたい場合は、「トップページのヘッダー画像エリアの高さを画面サイズに応じて最大にする（β）※優先」にチェックを入れます。
画像が大きすぎると、スマホ（599px以下）では意図したとおりに表示されない場合があります。
画像の見える範囲やサイトタイトル・メニューとのバランスを確認しながら調整しましょう。
ヘッダー画像
➡︎
詳細設定項目
⬇︎
以下は、詳細設定項目の「ヘッダー画像エリア」の設定箇所までスクロールした画面です。
「ヘッダー画像」にあるヘッダー画像エリアの設定項目
ヘッダーメニュー
ヘッダー画像エリア
- ヘッダー画像エリア最低の高さ（px）
- 半角数字を入力します。（この記事のサンプルでは→200）
- スマホ（599px以下）※高さを分ける場合
- 半角数字を入力します。（必要に応じて）
- トップページのヘッダー画像エリアの高さを画面サイズに応じて最大にする（β）※優先
- チェックを入れます。（画像が大きすぎると、スマホ（599px以下）では意図したとおりに表示されない場合があります。）→ チェックを外します。
- その他の設定も、各デバイスのプレビューを確認しながら調整しましょう。画像の種類に合わせて、見せたい部分がきちんと表示されているか確認します。
以下は、ヘッダー画像エリアの最低の高さを「200px」に設定したときのカスタマイザーのプレビュー画面です。
関連記事 AFFINGER7の基本設定をまとめて確認したい方は、初期設定ガイドをご覧ください。
-
-
AFFINGER7の初期設定完全ガイド｜導入後に最初にやるべき設定を初心者向けに解説
AFFINGER7の初期設定を初心者向けにわかりやすく解説。設定画面の場所から導入後に最初にやるべき設定、おすすめ設定、SEOやアフィリエイトに役立つ設定まで順番に紹介します。
まとめ！AFFINGER7でヘッダー画像にメニューを表示する方法｜サイト名を重ねる設定
AFFINGER7では、ヘッダー画像にサイトタイトルやメニューを重ねて表示できます。
設定するときは、ヘッダー背景画像の設定に加え、サイトタイトルやメニューの文字色、ヘッダー画像エリアの高さを調整しましょう。
PCとスマホの表示を確認しながら設定すれば、画像と文字のバランスを整えられます。ヘッダー画像を活用して、サイトのデザインをカスタマイズしてみてください。
