こんにちは "osaboo"
です。"@osaboo_Bot"
この記事で解決できる悩み
この記事では、これらのお悩みを解決します。
「まずはブログを始めたい！」という方は、『WordPressブログ完全ガイド』をご覧ください。
開設から運営・収益化までを初心者向けに画像付きでわかりやすく解説しています。
AFFINGER7のヘッダー設定とは？
AFFINGER7のヘッダー設定では、サイト上部に表示されるヘッダーナビゲーションやヘッダー画像などを設定できます。
ヘッダーナビゲーションでは、サイト名やキャッチフレーズの表示、PC・スマホでのヘッダーの表示方法などを調整できます。
また、ヘッダー画像エリアでは、画像の表示やスライドショー、ヘッダーコンテンツ、記事スライドショーなどを設定できます。
AFFINGER7のヘッダー関連の設定は、主に以下の場所から行います。
- AFFINGER管理：ヘッダーナビゲーションやヘッダー画像エリアなどを設定
- 外観 → カスタマイズ：ヘッダーナビゲーションやヘッダー画像などのデザインを設定
関連記事 ヘッダーの色や幅、表示位置など、サイト全体のデザイン設定については、以下の記事で詳しく解説しています。
-
-
AFFINGER7のサイトデザイン設定｜カスタマイズ方法とおすすめ設定
AFFINGER7でサイトデザインを整える方法を解説。サイト全体のカラーやトップページ、ヘッダー・メニュー、フォント、余白、サイドバーなど、見やすいサイトに仕上げるための設定をまとめています。
- 外観 → メニュー：グローバルメニューなどのナビゲーションを設定
関連記事 グローバルメニューの作成や設定方法は、以下の記事で詳しく解説しています。
-
-
AFFINGER7のメニュー設定方法｜ヘッダー・フッター・スマホメニューを解説
AFFINGER7のメニュー設定を初心者向けに解説。ヘッダーメニュー・フッターメニュー・スマホメニューの作成方法から、おすすめ設定やデザイン調整まで分かりやすく紹介します。
この記事では、これらの設定のうち、AFFINGER管理の「ヘッダー（ナビ / 画像）」を中心に、各項目の役割と設定方法を解説します。
ヘッダーナビゲーションの設定
AFFINGER7のヘッダーナビゲーションでは、サイト上部に表示されるサイト名やキャッチフレーズ、ヘッダーの高さなどを設定できます。
設定は、WordPress管理画面の「AFFINGER管理」→「ヘッダー（ナビ / 画像）」から行います。
また、ヘッダーの色や幅、表示位置などのデザインは、「外観」→「カスタマイズ」→「ヘッダーナビゲーション」から設定できます。
AFFINGER7では、PCとスマホでヘッダーの表示が異なるので、それぞれの環境に合わせて設定を確認しておきましょう。
PC・スマホ共通の設定
サイト名やキャッチフレーズなど、ヘッダーに表示する基本的な内容を設定します。
サイトのタイトルやキャッチフレーズは、表示・非表示だけでなく、表示位置なども調整できます。
サイト名をロゴ画像で表示したい場合は、「外観」→「カスタマイズ」→「ロゴ画像」から設定できます。
スマホ（タブレット含む）の設定
スマホでは、PCとは異なるヘッダーが表示されます。
スマホ用のヘッダーでは、ヘッダーの高さやサイトタイトル、キャッチフレーズの表示などを設定できます。
ヘッダー内のコンテンツが見切れる場合は、高さを調整してください。AFFINGER7では、スマホ用のロゴやキャッチフレーズの表示によって必要な高さが変わるため、実機で表示を確認することが大切です。
また、スマホのヘッダーナビゲーションは、「外観」→「カスタマイズ」→「ヘッダーナビゲーション」→「スマホ（SP）」から背景色などを設定できます。
PCのみの設定
PCでは、ヘッダーの高さやサイトタイトルなどの表示を細かく調整できます。
「PCヘッダーの高さ（px）」では、PC表示時のヘッダーの最低高さを指定できます。
個人ブログでは使用する機会は少ないですが、電話番号をヘッダーに表示することもできます。
ヘッダーを固定して、ページをスクロールしても画面上部に表示し続けることもできます。
固定表示は、「外観」→「カスタマイズ」→「ヘッダーナビゲーション」→「パソコン（PC）」から設定できます。
なお、ヘッダーの色や幅などのデザインは、AFFINGER管理ではなくカスタマイザーから設定します。サイト全体のデザインに合わせて調整しましょう。
- カスタマイザー：「外観」→「カスタマイズ」
ヘッダー画像の設定
AFFINGER7では、ヘッダー画像エリアに画像を表示して、サイトの印象を変えることができます。
ヘッダー画像は、「外観」→「カスタマイズ」→「ヘッダー画像」から設定します。
ヘッダー画像エリアは、基本的にトップページに表示されますが、AFFINGER管理の「ヘッダー（ナビ / 画像）」にある表示設定から、下層ページへの表示などを変更できます。
ヘッダー画像を設定する
カスタマイザーの「ヘッダー画像」から、表示する画像を登録します。
登録した画像は、ヘッダー画像エリアに表示されます。
また、AFFINGER7では、ヘッダー画像を画面幅いっぱいに表示したり、スマホ用のヘッダー画像を設定したりすることもできます。
ヘッダー画像エリアの表示を設定する
ヘッダー画像エリアの表示方法は、AFFINGER管理の「ヘッダー（ナビ / 画像）」から設定します。
ヘッダー画像エリアでは、通常のヘッダー画像だけでなく、ヘッダーコンテンツや記事スライドショーなどを表示することもできます。
なお、複数のコンテンツを設定した場合は表示の優先順位があります。
「記事スライドショー ＞ ヘッダーコンテンツ ＞ ヘッダー画像」の順で優先して表示されます。
ヘッダー画像をスライドショーで表示する
複数のヘッダー画像を登録すると、画像を切り替えて表示するスライドショーを設定できます。
スライドショーを使用する場合は、2枚以上の画像を登録します。表示順はAFFINGER管理の「スライドショー設定」から指定できます。
ただし、ヘッダー画像のスライドショーは画像の枚数が増えるほど表示への負荷も大きくなります。
サイトのデザインや表示速度とのバランスを考えて、必要な場合に使用しましょう。
ヘッダー画像エリアの高さを調整する
ヘッダー画像エリアの高さは、「外観」→「カスタマイズ」→「ヘッダー画像」→「ヘッダー画像エリア」から調整できます。
ヘッダー画像やコンテンツがない場合は、ヘッダー画像エリア自体に高さがないため、必要に応じて最低の高さを指定します。
ヘッダー画像を大きく見せたい場合は高さを調整し、実際のPC・スマホ画面で表示を確認しながら設定しましょう。
表示コンテンツを設定する
「表示コンテンツ」では、次の4種類から表示するコンテンツを選択できます。
- 画像スライドショー
- ヘッダーコンテンツ
- 記事スライドショー
- なし（画像・ウィジェット）
「表示コンテンツ」で表示するタイプを選択し、選択した項目に応じて、それぞれの詳細設定を行います。
画像スライドショー
登録したヘッダー画像をスライドショーで表示します。
複数の画像を切り替えて表示したい場合に使用します。ヘッダー画像は、カスタマイザーの「ヘッダー画像」から登録できます。
ヘッダーコンテンツ
ヘッダー画像の代わりに、ヘッダー画像エリアへオリジナルのコンテンツを表示します。
「ヘッダーコンテンツ設定」で作成した内容を表示できるため、画像だけではなく、テキストやリンクなどを組み合わせてヘッダーを作成できます。
記事スライドショー
ブログの記事をヘッダー画像エリアにスライドショー形式で表示します。
カテゴリを指定して表示する記事を絞り込むこともできるため、ブログのおすすめ記事などを目立たせたい場合に利用できます。
なし（画像・ウィジェット）
ヘッダー画像エリアにコンテンツを表示しない場合は、「なし（画像・ウィジェット）」を選択します。※ デフォルト
シンプルなヘッダーにしたい場合や、ヘッダー画像エリアを使用しない場合に設定します。
まとめ！AFFINGER7のヘッダー設定方法｜ナビ・画像の設定を解説
今回は、AFFINGER7の「ヘッダー（ナビ / 画像）」の設定方法を解説しました。
ヘッダーでは、主に以下の設定ができます。
- ヘッダーナビゲーションの表示
- PC・スマホのヘッダー設定
- ヘッダー画像の表示
- 画像スライドショー
- ヘッダーコンテンツ
- 記事スライドショー
ヘッダーの表示やデザインを調整すると、サイトの印象や使いやすさを整えられます。
まずは必要な項目から設定し、PC・スマホの両方で表示を確認しながら調整してみてください。
