AFFINGER5のメニュー部分の作成とカスタマイズ方法について解説

こんにちは、専業アフィリエイターの孔雀です。

この記事では、AFFINGER5のメニュー部分の作成とカスタマイズ方法について解説してみたいと思います。

この記事は、主に以下のような人をターゲットに書いています。

この記事を読むことで、AFFINGER5のヘッターとフッター部分のメニューの作成方法とカスタマイズ方法がわかります。

AFFINGER5のヘッターとフッター部分のメニューの作成方法

AFFINGER5ののヘッターとフッター部分のメニューとは、各記事の上部と下部に配置するグローバルメニューのことです。

このブログでいうと、以下の部分ですね。

＜ヘッター部分のメニュー＞

ページ上部のメニュー。

＜フッター部分のメニュー＞

ページ下部のメニュー。

ヘッター部分のメニュー作成方法

「外観」⇒「メニュー」をクリックします。

メニュー名のところに、わかりやすい名前を入力して、「メニューを作成」をクリックします。

メニューに追加できるのは、投稿記事、固定記事、カテゴリページです。

例えば、カテゴリページをメニューに追加してみます。

左の「メニュー項目を追加」にあるカテゴリをクリックすると、今まで作成したすべてのカテゴリページが表示されます。

その中からメニューに追加したいものにチェックを入れて、「メニューに追加」をクリックします。

すると、右にある「メニュー構造」に追加したカテゴリページが表示されます。

このように、カテゴリページだけでなく投稿記事、固定記事も同じようなやり方で追加させることが可能です。

追加されているのを確認したら、「メニューを保存」をクリックします。

次に、作成したメニューをヘッター部分に配置する設定をします。

下の「メニュー設定」にある「ヘッダー用メニュー」にチェックを入れて、「メニューを保存」をクリックします。

これで、ヘッター部分のメニューがページ上部に表示されるようになります。

フッター部分のメニュー作成方法

もう一度説明すると、フッターとはページ下部に配置される部分です。

フッター部分のメニューの作成方法も基本的にヘッター部分の作成方法と同じです。

下の「メニュー設定」にある「フッター用メニュー」にチェックを入れて、「メニューを保存」をクリックすれば、フッター部分に表示されるようになります。

ヘッター部分とフッター部分に同じメニューを表示させたい場合は、1つのメニューを作成しておいて、「メニュー設定」の「ヘッター用メニュー」と「フッター用メニュー」の両方にチェックをすれば、わざわざ2つ作成する必要はありません。

AFFINGER5のメニュー部分のテキスト文字をカスタマイズする方法

これは、メニュー部分に表示されるテキスト文字を変更したい場合のカスタマイズ方法です。

例えば、「TOP」と表示されるメニューを「トップページ」というテキスト文字に変えてみます。

「TOP」の横にある▲アイコンをクリックします。

ナビゲーションラベルに「トップページ」と入力して、「メニューを保存」をクリックします。

すると、「TOP」と表示されていたメニューが「トップページ」というテキスト文字に変更されて表示されるようになります。

これで、ネット上に公開されているメニュー部分のテキストリンクの文字も変更されているはずです。

AFFINGER5のメニューのカラー、横幅、中央寄せのカスタマイズ方法

次に、メニューの色、横幅、中央寄せのを変更するカスタマイズ方法です。

基本的に、メニューの色はTOPページのデザインで設定した色に反映されますが、メニューの部分だけ色を変更することが可能です。

これらのカスタマイズは、以下の手順でできます。

「外観」⇒「カスタマイズ」をクリックします。

左に表示される「メニュー」の「メニューのカラー設定」をクリックします。

「PCヘッダーメニュー」をクリックします。

すると、各部位の色の選択、横幅、中央寄せのカスタマイズ画面が表示されます。

このページでの操作は、右のプレビューで即座に変更された部分を確認することができます。（※ここでの操作は実際には反映されていません。）

設定が完了したら、上にある「公開」をクリックすることで反映されるようになります。

まとめ

今回は、AFFINGER5のメニュー部分の作成とカスタマイズ方法について解説してみました。

AFFINGER5のメニューのカスタマイズは、メニューの配置とカラー、横幅、中央寄せ、スマホでのメニュー配置などができます。

AFFINGER5の、その他のカスタマイズ方法については下記の記事をご覧ください。