AFFINGER7を導入したものの、
「ヘッダーのデザインを変更したいけど、どこを設定すればいいの？」
「ロゴやヘッダー画像を変更したい」
「メニューの色や高さも変更できるの？」
と悩んでいませんか？
AFFINGER7では、サイト上部のヘッダーを細かくカスタマイズできます。
ただし、設定する内容によって、
- AFFINGER管理
- 外観 → カスタマイズ
- 外観 → メニュー
と設定場所が分かれているため、初心者の方には少し分かりにくいかもしれません。
テーマ設定は主に「AFFINGER管理」「カスタマイザー」「ウィジェット」などに分けて管理する仕組みになっています。
この記事では、AFFINGER7のヘッダーをカスタマイズする方法を初心者向けに順番に解説します。
ロゴ・色・ヘッダー画像・メニュー・高さ・スマホ表示まで紹介するので、自分好みのヘッダーを作ってみてください。
※この記事はAFFINGER6時代に作成した記事をAFFINGER7対応版としてリライトしています。
AFFINGER7をインストールしたばかりで、まだ基本設定が終わっていない方は、先に「AFFINGER7の初期設定ガイド」を確認しておくとスムーズです。
関連記事：
AFFINGER7の初期設定ガイド｜初心者が最初にやるべき設定を順番に解説
AFFINGER7のヘッダーでカスタマイズできること
AFFINGER7ではヘッダー周辺をかなり細かくカスタマイズできます。
例えば、次のような設定が可能です。
| 設定項目 | できること |
|---|---|
| サイトタイトル | 表示・非表示などを設定 |
| キャッチフレーズ | 表示・非表示、位置などを調整 |
| ロゴ | オリジナルロゴ画像を設定 |
| ヘッダーの高さ | PC表示時の高さを調整 |
| ヘッダーの色 | 背景色や文字色を変更 |
| ヘッダー画像 | トップページなどに画像を表示 |
| メニュー | カテゴリーや固定ページへのリンクを表示 |
| 固定ヘッダー | スクロールしてもナビゲーションを表示 |
| スマホヘッダー | スマホ用のロゴや色などを変更 |
| 電話番号 | 店舗・企業サイト向けに電話番号を表示 |
ブログはもちろん、
- 企業サイト
- 店舗サイト
- 美容室
- クリニック
- 飲食店
- 士業サイト
などを作る場合にも便利な機能です。
最初からすべて設定する必要はありません。
初心者の方なら、まずは、ロゴ → 色 → メニュー → スマホ表示くらいから整えていけば十分です。
AFFINGER7のヘッダー設定は主に3か所から行う
AFFINGER7のヘッダーカスタマイズで初心者が迷いやすいのが「設定場所」です。
ヘッダーに関する設定が1か所にまとまっているわけではありません。
主に次の3か所を使用します。
① AFFINGER管理 → ヘッダー
WordPress管理画面から、AFFINGER管理 → ヘッダーを開きます。
ここでは主に、
- サイト名・キャッチフレーズ
- ヘッダーの高さ
- ヘッダーの表示
- ヘッダー画像関連
- 電話番号
など、ヘッダー全体に関する機能を設定できます。
② 外観 → カスタマイズ
次に使用するのが、外観 → カスタマイズです。
こちらでは主に、
- ロゴ画像
- サイトタイトルの色
- ヘッダー背景色
- ナビゲーションの色
- スマホヘッダー
- ヘッダー画像
など、デザイン面を細かく調整できます。
- AFFINGER管理は機能設定
- カスタマイズは見た目の設定
くらいに覚えておくと分かりやすいです。
③ 外観 → メニュー
ヘッダーにカテゴリーや固定ページへのリンクを表示したい場合は、
外観 → メニューを使用します。
ここで作成したメニューをヘッダーに割り当てることで、サイト上部にナビゲーションメニューを表示できます。
それでは実際に設定していきましょう。
AFFINGER7のロゴ・サイトタイトルを設定する
まずは、サイトの印象を大きく左右するロゴやサイトタイトルから設定してみましょう。
サイトタイトルとキャッチフレーズを設定する
サイトタイトルとキャッチフレーズは、
設定 → 一般から設定します。
ここで入力した、
- サイトのタイトル
- キャッチフレーズ
がAFFINGER7のヘッダーにも反映されます。
ブログ名やサイト名がまだ仮の状態になっている場合は、最初にここを変更しておきましょう。
AFFINGER7にロゴ画像を設定する
文字だけのサイトタイトルではなく、オリジナルロゴを表示することもできます。
WordPress管理画面から、
外観 → カスタマイズ → ロゴ画像
へ進みます。
AFFINGERでは、
- ヘッダー用
- フッター用
- スマホ用
のロゴ画像を設定できます。
サイト名を画像で表示したい場合は、ここからロゴをアップロードしましょう。
ブログ初心者の場合、最初から凝ったロゴを用意する必要はありません。
シンプルな文字ロゴでも十分です。
サイト運営を続けながら、あとから変更することもできます。
AFFINGER7のヘッダー基本設定を変更する
続いて、
AFFINGER管理 → ヘッダー
から設定できる項目を見ていきましょう。
AFFINGER7では、サイト名やキャッチフレーズの表示、ヘッダーの高さなどを設定できます。
すべて変更する必要はありません。
必要なものだけ設定していきましょう。
設定したい項目にチェックを入れて保存するだけで、設定が反映されます。
サイト名とキャッチフレーズの位置を変更する
サイト名とキャッチフレーズの表示位置を調整できます。
サイトのデザインによっては、「サイト名をもっと目立たせたい」という場合もあると思います。
そんなときは表示位置を変更して、実際のサイトを確認しながら調整してみましょう。
こんな感じでサイト名とキャッチフレーズが上下反対にできます。
トップページのサイト名やロゴを非表示にする
トップページだけサイト名・ロゴ・キャッチフレーズを表示させない設定もできます。
例えばトップページに大きなヘッダー画像やオリジナルコンテンツを配置している場合、サイト名まで表示すると情報が多く見えることがあります。
そのような場合は、トップページのサイト名やロゴを非表示にすることでスッキリしたデザインにできます。
ただし、初心者の方は無理に非表示にする必要はありません。
まずは通常表示の状態でサイトを作り、デザインを整える段階で必要に応じて変更するのがおすすめです。
サイト名とキャッチフレーズを非表示にするとこんな感じです。
ヘッダーを分割しない設定
AFFINGER7のPCヘッダーは、通常はサイトタイトル側と右側のエリアに分かれています。
「ヘッダーを分割しない」を設定すると、一体型のヘッダーとして使用できます。
この設定を有効にすると電話番号やヘッダー右ウィジェットが非表示になります。
そのため、「電話番号も表示したい」「ヘッダー右側にウィジェットを表示したい」という場合は注意してください。
一方で、サイトタイトルやロゴを中央に配置したシンプルなデザインにしたい場合には便利です。
ヘッダー右ウィジェットの表示部分は下画像の部分になります。
ヘッダーをセンタリングする
「ヘッダーを分割しない」を設定したあと、ヘッダーをセンタリングすることもできます。
ロゴやサイトタイトルを中央に表示したいブログとの相性が良い設定です。
ロゴ中心のシンプルなブログデザインにしたい方は試してみてください。
「ヘッダーエリアをセンタリング」を設定するとこんな感じです。
AFFINGER7のヘッダーの色を変更する
サイトの雰囲気を変えたい場合、最も効果が分かりやすいのがヘッダーの色です。
WordPress管理画面から、
外観 → カスタマイズ
へ進みます。
AFFINGER7のカスタマイザーでは、ヘッダーナビゲーションのカラーや幅などを調整できます。
サイトタイトルの文字色を変更する
サイトタイトルの文字色もカスタマイザーから変更できます。
基本的な流れは、
外観 → カスタマイズ → ヘッダーナビゲーション
です。
PCとスマホで設定が分かれている場合があるので、両方確認しておきましょう。
例えば、
| ヘッダー背景 | 合わせやすい文字色 |
|---|---|
| 白 | 黒・濃いグレー |
| 黒 | 白 |
| ネイビー | 白 |
| グリーン | 白 |
| 淡いグレー | 黒 |
とすると、文字が読みやすくなります。
サイトタイトルの色については別記事で詳しく解説しています。
関連記事：
ヘッダーの色はサイト全体に合わせよう
ヘッダーだけ目立つ色にするのではなく、
- ロゴ
- 見出し
- ボタン
- メニュー
- フッター
などと色を合わせると、サイト全体に統一感が生まれます。
ブログ初心者の場合は、使用するメインカラーを1〜2色程度に絞るとデザインしやすくなります。
たくさんの色を使うよりも、「白＋メインカラー＋文字色」くらいのシンプルな配色の方がまとめやすくなります。
AFFINGER7にヘッダー画像を表示する方法
AFFINGER7では、トップページなどに大きなヘッダー画像を表示できます。
こんな感じです。
設定はWordPress管理画面から、
外観 → カスタマイズ → ヘッダー画像
へ進みます。
表示させたい画像をアップロードして設定します。
AFFINGER7ではヘッダー画像を通常表示するだけでなく、横幅いっぱいに広げたり、スマホ用のヘッダー画像を別に指定したりすることもできます。
ヘッダー画像を横幅いっぱいに表示することも可能
ヘッダー画像をより大きく見せたい場合は、
ヘッダー画像の横幅を100％にする
設定も利用できます。
企業サイトや店舗サイトなどで、
- 店舗写真
- 商品写真
- ブランドイメージ
- サービスのイメージ画像
を大きく見せたい場合に使いやすい機能です。
ただし、ブログの場合は必ずしも大きなヘッダー画像が必要とは限りません。
記事を読んでもらうことが目的なら、シンプルなヘッダーでも十分です。
スマホ用ヘッダー画像も確認する
PCで見栄えの良い画像でも、スマホでは左右が切れてしまうことがあります。
AFFINGER7ではスマホ用のヘッダー画像も設定できるため、必要に応じてPCとは別の画像を用意すると良いでしょう。
設定後は必ず、
PC＋スマホ
の両方で表示を確認してください。
AFFINGER7のヘッダーメニューを設定する
ヘッダーには、
- ホーム
- カテゴリー
- プロフィール
- サービス
- お問い合わせ
などへのリンクを表示できます。
これが「ヘッダーメニュー」です。
ヘッダーメニューを設定しておくと、読者が目的のページへ移動しやすくなります。
ヘッダーメニューの作成場所
WordPress管理画面から、
外観 → メニュー
へ進みます。
作成したメニューに、
- 固定ページ
- 投稿
- カテゴリー
- カスタムリンク
などを追加して、ヘッダー用のメニューとして設定します。
AFFINGER7ではメニューを作成・有効化したうえで、ヘッダー用の表示場所に割り当てて使用します。
メニューの詳しい作成方法までこの記事で説明すると長くなってしまうため、別記事で詳しく解説しています。
関連記事：
【初心者向け】AFFINGER7のメニュー作成方法｜ヘッダー・フッター・サイドメニュー設定をわかりやすく解説
ヘッダーメニューは増やしすぎない
メニューには、何でも追加すればいいわけではありません。
項目が増えすぎると、「どこをクリックすればいいの？」と読者が迷ってしまいます。
ブログであれば、
- ホーム
- 主要カテゴリー
- プロフィール
- お問い合わせ
など、重要な項目を中心に配置すると分かりやすくなります。
最初は4〜6項目程度から作成して、必要に応じて増やしていくのがお勧めです。
AFFINGER7でヘッダーナビゲーションを固定する
AFFINGER7では、ページをスクロールしてもヘッダーナビゲーションを画面上部に表示させる設定も利用できます。
固定すると長い記事を読んでいる途中でもメニューへアクセスしやすくなります。
設定はカスタマイザーの、
ヘッダーナビゲーション → パソコン（PC）
などから行います。
PC用またはスマホ用ヘッダーナビゲーションの「表示パターン」を固定にすることで固定表示できると案内されています。
固定ヘッダーを利用するメリット
固定ヘッダーには、
- メニューへ移動しやすい
- サイト内を回遊しやすい
- 長いページでもナビゲーションを利用できる
といったメリットがあります。
一方で、ヘッダーの高さが大きいと画面を圧迫します。
特にスマホは表示スペースが狭いため、固定する場合は実際の表示を確認しておきましょう。
AFFINGER7のスマホヘッダーをカスタマイズする
ヘッダーを変更したら、PCだけでなくスマホ表示も確認しましょう。
AFFINGER7では、
外観 → カスタマイズ → ヘッダーナビゲーション → スマホ
などからスマホ側の設定を変更できます。
スマホ用ロゴについては「ロゴ画像／サイトのタイトル」で設定でき、ロゴの高さも調整できます。
スマホで確認したいポイント
最低限、次の項目を確認しておきましょう。
- ロゴが大きすぎないか
- サイトタイトルが途中で切れていないか
- メニューが使いやすいか
- 文字色が見やすいか
- ヘッダーが高すぎないか
- 固定ヘッダーが本文を邪魔していないか
WordPressのカスタマイズ画面でもスマホ表示を確認できますが、最後は実際のスマートフォンから確認するのがおすすめです。
AFFINGER7のヘッダーに電話番号を表示する
AFFINGER7ではPCヘッダーに電話番号を表示できます。
店舗や企業、クリニックなどのホームページを作る場合に便利です。
設定場所は、
AFFINGER管理 → ヘッダー → 電話番号を追加する
です。
ヘッダーに電話番号を表示するとこんな感じです。
ただし「ヘッダーを分割しない」を有効にしている場合、電話番号は表示できません。
電話問い合わせを重要な導線として使用するサイトでは注意してください。
ブログの場合は基本的に設定しなくても問題ありません。
ヘッダー下にスライドショーを表示することもできる
AFFINGER7では、通常のヘッダーだけでなく、その下に記事のスライドショーを表示できます。
例えば、
- おすすめ記事
- 読んでほしい記事
- 収益記事
- 新着記事
などを目立たせたい場合に便利です。
設定は、
AFFINGER管理 → ヘッダー下／おすすめ
から行えます。
詳しい設定方法についてはこちらの記事で解説しています。
関連記事：
AFFINGER7でヘッダー下にスライドショーを設置する方法
初心者におすすめのAFFINGER7ヘッダー設定
ここまでさまざまな設定を紹介してきましたが、「結局、何を設定すればいいの？」という方もいると思います。
ブログ初心者なら、次の設定から始めれば十分です。
| 項目 | おすすめ設定 |
|---|---|
| ロゴ | シンプルなロゴまたはサイトタイトル |
| ヘッダー背景 | 白またはサイトのメインカラー |
| サイトタイトル | 背景と見分けやすい色 |
| メニュー | 4〜6項目程度 |
| ヘッダー画像 | 必要な場合だけ使用 |
| 固定ヘッダー | 必要に応じて |
| スマホ | 必ず表示確認 |
AFFINGER7は設定項目が多いため、最初からすべて使おうとすると大変です。
まずは、「読者が迷わずサイトを利用できるヘッダー」を目指してみてください。
AFFINGER7のヘッダーカスタマイズでよくある失敗
AFFINGER7では自由度が高い分、設定を増やしすぎると逆に見づらくなることがあります。
初心者の方は次の点に注意しましょう。
色を使いすぎる
赤・青・緑・黄色など、たくさんの色を使うとまとまりのないデザインになりやすくなります。
メインカラーを決めて、ヘッダーもサイト全体のカラーに合わせるのがおすすめです。
ヘッダーを大きくしすぎる
ヘッダーは大きければ目立ちますが、その分記事本文が下へ移動します。
ブログの場合は記事を読んでもらうことが目的なので、必要以上に大きくする必要はありません。
メニュー項目を増やしすぎる
メニューが多いと目的のページを探しづらくなります。
重要なカテゴリーや固定ページを優先して配置しましょう。
PCだけ確認してスマホを確認していない
PCでキレイに表示されていても、スマホでは、
- ロゴが大きい
- メニューが見切れる
- 文字が読みづらい
といったことがあります。
設定変更後は必ずスマホでも確認してください。
AFFINGER7のヘッダー設定が反映されないときの確認ポイント
設定したのにヘッダーが変わらない場合は、次の項目を確認してみてください。
「保存」「公開」を忘れていないか確認する
AFFINGER管理では設定後に保存します。
カスタマイズ画面の場合は「公開」をクリックしないと変更が反映されません。
まずは保存できているか確認しましょう。
ブラウザのキャッシュを削除する
以前のデザイン情報がキャッシュとして残っていると、変更後のデザインが表示されない場合があります。
AFFINGER公式マニュアルでも、設定変更が反映されない場合はキャッシュを確認するよう案内されています。
- ブラウザを再読み込み
- スーパーリロード
- キャッシュ削除
- キャッシュ系プラグインの確認
などを試してみてください。
PCとスマホの設定を確認する
AFFINGER7ではPCとスマホで別の設定を使用する部分があります。
「PCでは変わったけれど、スマホでは変わらない」
という場合は、スマホ側のカスタマイズ設定も確認してください。
AFFINGER7を最新版にしておく
使用しているAFFINGER7が古い場合は、アップデート状況も確認しておきましょう。
テーマは機能追加や修正が行われるため、基本的には最新版を利用しておく方が安心です。
アップデート方法が分からない方はこちらの記事を参考にしてください。
関連記事：
AFFINGER7のアップデート方法｜初心者でも失敗しない更新手順を画像付きで解説
ヘッダーを整えたらトップページもカスタマイズしよう
ヘッダーが完成すると、サイト全体の印象がかなり変わります。
次におすすめなのがトップページのカスタマイズです。
AFFINGER7ではトップページに、
- おすすめ記事
- カテゴリー
- NEWS
- プロフィール
- バナー
- オリジナルコンテンツ
などを配置できます。
ヘッダーとトップページを一緒に整えることで、よりサイトらしいデザインに仕上げることができます。
関連記事：
AFFINGER7でトップページを自由にカスタマイズする方法｜初心者でもできる完全ガイド
ヘッダー設定が終わった方は、次にトップページを整えてみてください。
まとめ｜AFFINGER7のヘッダーは少しずつカスタマイズしよう
今回は、AFFINGER7のヘッダーをカスタマイズする方法を紹介しました。
AFFINGER7のヘッダーでは、
- ロゴ
- サイトタイトル
- キャッチフレーズ
- ヘッダーの高さ
- 背景色
- 文字色
- ヘッダー画像
- ヘッダーメニュー
- 固定ナビゲーション
- スマホヘッダー
- 電話番号
など、さまざまな部分を変更できます。
設定できる項目が多いため、初心者の方は最初からすべて変更する必要はありません。
まずは、
① ロゴ・サイトタイトルを整える
↓
② ヘッダーの色を決める
↓
③ ヘッダーメニューを作る
↓
④ PC・スマホで表示を確認する
という順番がおすすめです。
それだけでもサイトの印象は大きく変わります。
慣れてきたら、ヘッダー画像や固定ナビゲーション、ヘッダー下スライドショーなどにも挑戦してみてください。
AFFINGER7ではヘッダー以外にも、トップページ・記事一覧・プロフィール・カテゴリー・ランキングなどさまざまなカスタマイズができます。
AFFINGER7の設定方法をまとめて確認したい方はこちらの記事も参考にしてください。
関連記事：