AFFINGER5 ブログ

【AFFINGER5】ヘッダーメニュー(グローバルメニュー)の設置方法を紹介!

【AFFINGER5】ヘッダーメニュー(グローバルメニュー)の設置方法を紹介!

質問者
AFFINGER5をダウンロードしたけどメニューの設定の仕方がわからない!

 

今回はこのような方に向けて、AFFINGER5でのヘッダーメニュー(グローバルメニュー)の設置方法を紹介します!

 

ヘッダーメニュー(グローバルメニュー)とは?

僕のブログでいうと上にあるメニューバーのことです!

 

AFFINGER5 メニュー

 

主要コンテンツへのリンクを置いたメニューバーのことを「グローバルメニュー」や「ヘッダーメニュー」といいます。

 

この2つの他にも

  • グローバルナビ
  • ヘッダーナビゲーション
  • メインメニュー

の様な名前で呼ばれることもあります。

 

グローバルメニューの設置方法

設置するにはいくつかの工程があります。

 

カテゴリーの追加

まずヘッダーメニューに表示させたいカテゴリーを追加します。

 

今回は「①」、「②」、「③」というカテゴリーを作っていきます!

 

AFFINGER5 メニュー②

  1. 投稿の「カテゴリー」をクリックします。
  2. 名前のところに表示させたい名前を入力します。今回は「①」といれました。
  3. 下の方にある「新規カテゴリーを追加」をクリックします。

 

AFFINGER5 メニュー③

すると、右側のカテゴリー一覧に入力したカテゴリーが表示されます!

同様に「②」、「③」を作っていくと下記の通りになります。

 

AFFINGER5 メニュー④

これでカテゴリーの追加は終了です!

 

トップページにヘッダーメニューを設置する方法

いよいよ本番です。

 

AFFINGER5 メニュー⑤

  1. 「外観」にある「メニュー」をクリックします。
  2. メニュー名のところに覚えやすい名前を入れます。
  3. 「メニュー作成」をクリックします。

 

AFFINGER5 メニュー⑥

するとこのようになるので

  1. ヘッダー用メニューにチェックをいれます。
  2. 「カテゴリー」を開いて「すべて表示」をクリックします。
  3. 加えたいカテゴリーにチェックを入れます。
  4. 「メニューに追加」をクリックします。

 

AFFINGER5 メニュー⑦

 

これで設定が完了したので最後に「メニューを保存」をクリックします。

 

AFFINGER5 メニュー⑧

 

これでトップページにグローバルメニューの設置が完了しました!

 

ドロップダウンの設定

ドロップダウンとはメニューバーから伸びてくるやつのことです!

 

AFFINGER5 メニュー⑯

 

これの設定方法を紹介します!

 

AFFINGER5 メニュー⑩

まず、先に紹介した『新規カテゴリーの追加』でドロップダウンで表示したいカテゴリーを追加します。今回は「①-①」と「①-②」で作っていきます。

 

AFFINGER5 メニュー⑪

  1. 「外観」→「メニュー」をクリックします。
  2. 「カテゴリー」→「すべて表示」をクリックします。
  3. ①-①と①-②にチェックを入れ「メニューに追加」をクリックします。

 

AFFINGER5 メニュー⑫

するとこのようになるので、『①』の下に『①-①』をドラック&ドロップします。

 

AFFINGER5 メニュー⑬

上手くいかずに下に入ってしまうことがあるのでその時は「①下の階層」をクリックします。

 

AFFINGER5 メニュー⑭

①-①も①-②も『副項目』となれば完了です!

最後に「メニューを保存」をクリックします。

 

AFFINGER5 メニュー⑮

確認してこのようになっていれば完了です!

 

ヘッダーメニュー(グローバルメニュー)のカスタマイズ

設置は完了しましたが、いろいろと自分にあった色や字の大きさ間隔にしたいと思います。

 

AFFINGER5 メニュー⑨

  1. 「外観」→「カスタマイズ」をクリックします。
  2. このペース表示されます。
  3. 「[+]メニューのカラー設定」をクリックします。
  4. PCヘッダーメニューをクリックします。
  5. すると上記のような画面になります。

 

カスタマイズできること

  • 背景色
  • 文字色
  • センター寄せ
  • メニューの横幅
  • 上下の間隔
  • ドロップダウンの背景色

これらが設定できるので自分の合うのを見つけてみてください!

 

設定を変えたら最後に「公開」をクリックし忘れないように!

 

まとめ

今回はAFFINGER5のヘッダーメニュー(グローバルメニュー)の設置方法について紹介しました。

 

始めは難しく感じるとは思いますが、何度もやっていれば慣れるので最初でくじけずに何度も繰り返してやってみましょう!

 

ではまた次の記事で会いましょう!!

 

AFFINGER5の公式サイトはこちら

 

-AFFINGER5, ブログ

Copyright© kane blog , 2020 All Rights Reserved.