
本日はこんなお悩みにお答えします。
この記事ではAFFINGER6(アフィンガー6)のヘッダーメニュー(横列)の設定方法や細かいカスタマイズ方法を解説しています。
✔本記事を書いた人
ucozi(@ucozi_ikeda)
ヘッダーメニューの設定方法
今回、設定するのはヘッダー部分のメニューです。
完成系はこんな感じ。

手順は大きく分けると4つです。
- メニューに入れる項目を入れる
- 固定ページを作成する
- ヘッダーメニューを設定する
- 微調整を行う
順番に解説していきます。
手順①:メニューに入れる項目を決める
AFFINGER での作業を始める前に、メニューに含める項目を決めましょう。
これが決まってないと先に進めません。
絶対のルールとかはないので、好きな項目を設定したらいいのですが、おすすめは以下の3つを入れておくこと。
- トップもしくはホーム
- プロフィール
- お問い合わせ
あとは、参考にするサイト見つけて研究し、お好みの項目を追加してください。
本サイトでは「ヨガインストラクターのためのブログの始め方」を紹介しているので、サンプルサイトでは、こんな感じで設定してみます。
- Home
- Profile
- Works
- Blog
- Menu
- Contact
サンプルでは横文字にしてますが、こちらはお好みで。
手順②:固定ページを作成する

メニュー項目を決めたら、必要な「固定ページ」を作成します。
いつもブログ記事を書く「投稿」ではないので、お間違いなく。
「Home」はトップページなので、作成する固定ページは「Home」以外の5ページ分です。
プロフィールやサイトマップ、お問い合わせなどなどに便利です。

例:Profile を作成してみよう
サンプルでは「Profile」を作成してみましょう。
実際には残りの4ページも作成してください。
WordPressにログインして、「固定ページ」から「新規追加」をクリックします。

「タイトル」と「本文」にそれぞれ入力していきます。
- タイトル:Profile
- 本文:お好みで
入力を終えたら「公開」ボタンを押して完了します。

「本文」にあたる自己紹介文の書き方については、以下の記事で詳しく解説しています。
≫ ヨガインストラクターのプロフィールの書き方|新米イントラにおすすめ
ちなみに、「プレビュー」ボタンを押すと、公開前にレイアウトなどを確認できます。

以上で「Profile」ページは完成です。
同じ手順で残りの4ページも作成しましょう。

手順③:ヘッダーメニュー設定を行う
WordPressにログインし、「外観」から「メニュー」をクリック。

「メニュー名」に任意の名称を入力。ここではそのまま「ヘッダーメニュー」としておきます。


「メニュー設定」から、下記にチェックし、「メニューを作成」をクリック。
- ヘッダーメニュー(横列)
- スマホスライドメニュー


メニュー内容を設定する
左側にある「メニュー項目を追加」からヘッダーメニューに追加したいページを選んでいきます。
各項目を説明すると、以下のとおり。
固定ページ
⇒ すでにある固定ページ投稿
⇒ すでにある投稿ページカスタムリンク
⇒ 何でもリンク可能カテゴリー
⇒ すでにあるカテゴリーページ
「固定ページ」から、先程作成したページにチェックしていきましょう。
チェックできたら「メニューに追加」をクリックします。

メニューの順番はドラック&ドロップで入れ替えできます。

次に「カスタムリンク」の「ホーム」を「Home」に変更します。
右の「▼」をクリックして開き、「ナビゲーションラベル」を「Home」に変更。
入力したら「メニューを保存」をクリックして変更完了です。

例:メニューにアイコンを表示する
メニューにアイコンを表示することもできます。
完成形はこんな感じ。

手順は以下の3ステップです。
- 「FontAwesome」からアイコンを探す
- コードをコピーする
- 「ナビゲーションラベル」に貼り付け
試しに「ホーム」の横にお家マークを表示してみたいと思います。
FontAwesomeにアクセス
まず、FontAwesome のサイトへ行きます。
ちなみに、AFFINGER6では最新バージョンの Font Awesome5 が推奨されていますが、メールアドレスの登録などが必要になってしまったので、今回は登録不要な Font Awesome 4 を利用して設定します。

検索窓に「home」と入力。おうちアイコンが出てくるのでクリック。

<i>コードをコピー
<i class=....で始まるコードがあるので、コピーします。

ナビゲーションラベルに貼り付け
AFFINGER のメニューの設定画面に戻ります。
「ナビゲーションラベル」に先程コピーしたコードを貼り付けます。
最後に「メニューを保存」をクリックして完成です。

このままだと、まだ表示はされません。
「AFFINGER 管理」から「AFFINGER 管理」を選択 ⇒「その他」を選択、「FontAwesomeIcons4.7.0の読み込み」にチェックをしたら「Save」をクリックして完了です。



手順④:微調整を行う
最後に背景色や文字色、レイアウトなどを調整していきましょう。
例:背景色や文字色を変更する
背景色や文字色はカスタマイズ画面で変更します。
まずはPCのヘッダーメニューの色を変更していきましょう。
「外観」から「カスタマイズ」を選択、「各メニュー設定」⇒「PCヘッダーメニュー」へと進みます。



あとはサイトのデザインを見ながら、任意の色に変えるだけです。

スマホのヘッダーメニューの色を変えるときには、「各メニュー設定」⇒「スマホメニュー(スマホヘッダー)」で変更します。
カラーの設定方法はPCヘッダーの時と同じです。
例:レイアウトを変更する
レイアウトを変更する場合も、同じ設定画面で行います。

サンプルでは、下記を設定しました。
- 第一階層メニューを太字にする(サイドメニュー連動)
⇒ チェック - メニューをセンター寄せにする
⇒ チェック - メニューの横幅を100%にする
⇒ チェック - メニューの幅(px)
→ 180px
おつかれさまでした!

まとめ
今回はヘッダーメニューの設定方法について解説しました。
AFFIGNERの設定方法全般について知りたい方は、以下の記事もおすすめです。
本日は以上です。
この記事がどなたかのお役に立てたらうれしいです。
最後までお読みいただき、ありがとうございました。
ホームページの始め方を知りたい方へ
当ブログでは、「ヨガインストラクターのためのホームページの始め方」を紹介しています!
ヨガスクールの中の人が確実で信頼性の高い情報をお届けしていますので、これから始める方は、こちらの完全ガイドをぜひご覧ください!
また、AFFINGER(アフィンガー)というWordPressテーマの購入特典として、「ヨガインストラクターのためのAFFINGER設定マニュアル」という独自のプレゼントもご用意しています(※単体での購入も可)。
ホームページの始め方・立ち上げに関する、ご質問・ご相談はボクのInstagramのDM(@ucozi_ikeda)までお気軽にどうぞ!
WordPressのテーマ
『AFFINGER 6(アフィンガー)』
購入をご検討の方へ。
当サイトから『AFFINGER 6(アフィンガー)』をご購入いただいた方の特典として、「ヨガインストラクターのためのAFFINGER設定マニュアル」を提供しております。
※すでに『AFFINGER 6(アフィンガー)』を購入済みの方には、有料でも販売しています。
「ヨガインストラクターのためのAFFINGER設定マニュアル」では、デモサイトの設定について、テーマのインストールから細かい設定まで、全ての手順について解説しています。