このような疑問に対しシンプルにお答えします。
この記事は初心者でもわかりやすいように、設定方法を画像つきで解説しています。
今回は、図に示すメニューの作成方法について解説します。
メニューのカラー設定や幅・配置のカスタマイズ方法については「AFFINGER5でパソコン画面用メニューの色や幅・配置を設定する方法」を参考にしてください。
AFFINGER5 基礎用語
パソコン画面の上側に配置されるメニューのことを、一般的に「ヘッダーメニュー」と呼びます。
紹介までにAFFINGER５で設定できるメニューは、ヘッダーメニュー以外にも６つあります。（ヘッダーメニューを含めると７つ）
- ヘッダーメニュー
- フッターメニュー
- サイドバーメニュー
- ガイドメニュー
- スマホ用スライドメニュー
- スマホ用ミドルメニュー
- スマホ用フッターメニュー
それでは、ヘッダーメニューの作成方法について見ていきます。
ヘッダーメニュー 作成方法
ヘッダーメニューの作成方法は、以下の４種類のメニューから、ヘッダーメニューに設定したい項目を選択するというシンプルな手順になります。一般的には「カテゴリー」と「カスタムリンク」を使ってヘッダーメニューを設定する場合が多いと思います。
- 固定ページ
- 投稿
- カスタムリンク
- カテゴリー
私のサイトも「カテゴリー」と「カスタムリンク」の２つを使っています。
ちなみに「固定ページ」とは、サイトマップ、プライバーポリシー、お問い合わせなどの設定で使われるメニューになります。それぞれのページの作成方法は、別の記事で紹介しますので、ここでは割愛します。
「投稿」は、あなたが作成した記事をメニューに設定するものです。設定方法は「カテゴリー」と類似しているので、以降の「カテゴリーの作成と設定」を参考にしてくだい。
カテゴリーの作成と設定
WordPressの管理画面から「投稿」の「カテゴリー」をクリックします。
「名前」と「スラッグ」の欄に、新規カテゴリー名を設定します。次に画面をスクロールして下側にある「新規カテゴリ−を追加」をクリックします。（名前：テスト / スラッグ：test）
注意ポイント
「スラッグ」はURLに表記されるので、URLの見栄えの点から半角小文字・英数字を使用することをおすすめします。
「テスト」のカテゴリーが作成されました。
次に、新たに作成したカテゴリーをヘッダーメニューに追加していきます。
まず、WordPressの管理画面から「外観」の「メニュー」をクリックします。
画面右側にある「新しいメニューを作成しましょう」をクリックします。
「メニュー名」に名前を設定し、「ヘッダー用メニュー」にチェックを入れます。次に「メニューを作成」をクリックします。（メニュー名：テスト用メニュー）
ヘッダーメニューを作成すると「メニュー項目を追加」が選択できるようになります。
「カテゴリー」をクリックし、「すべて表示」から、先程作成した「テスト」にチェックを入れ、「メニューに追加」をクリックします。
メニュー構造に「テスト」のカテゴリーが追加されました。最後に「メニューを保存」をクリックします。
注意ポイント
「メニューを保存」をクリックする前に、「ヘッダー用メニュー」にチェックが入っている事を、必ず確認してください。せっかくメニューを作成しても、チェックが入っていないと反映されないのでご注意ください。
ヘッダーメニューに「テスト」のカテゴリーが配置されました。
簡単ですね。
カスタムリンクの作成と設定
カスタムリンクとは、リンク先に移動するためのメニューになります。最もポピュラーな使い方として、カスタムリンクにホーム画面を設定する場合が多いと思います。
WordPressの管理画面から「外観」の「メニュー」をクリックします。
「編集するメニューを選択」から、先程作成した「テスト用メニュー」を選び、「選択」をクリックします。
「カスタムリンク」をクリックし、「URL」にはホーム画面のURLを、「リンク文字列」には名前を設定し、「メニューに追加」をクリックします。（リンク文字列：ほーむ）
メニュー構造に「ほーむ」のカスタムリンクが追加されました。最後に「メニューを保存」をクリックします。
ヘッダーメニューに「ほーむ」のカスタムリンクが配置されました。サイト内を移動したい場合、この「ほーむ」をクリックすることで、ホーム画面に戻ることができます。
簡単ですね。
ドロップダウン設定
ドロップダウンとは、メニューにカーソルをあわせると下層メニューが表示される設定のことです。
WordPressの管理画面から「外観」の「メニュー」をクリックします。
「編集するメニューを選択」から、先程作成した「テスト用メニュー」を選び、「選択」をクリックします。
「カテゴリー」をクリックし、「すべて表示」から「テスト２」「テスト３」にチェックを入れ、「メニューに追加」をクリックします。
はてな
「テスト２」「テスト３」は、「テスト」の作成方法と同じより、作成方法の解説は省略しています。
「テスト２」「テスト３」をドラッグ＆ドロップで「テスト」の右下に移動します。
「テスト２」「テスト３」の位置を、「テスト」の位置より右側にずらして配置してください。最後に「メニューを保存」をクリックします。
「テスト」にカーソルをあわせると、「テスト２」「テスト３」のカテゴリーが表示されるようになります。
簡単ですね。
まとめ
今回、ヘッダーメニューの作成方法について解説しました。サイト訪問者に対して、検索性や他の記事へ導く為にも重要な設定となりますので、参考になれば幸いです。
最後までお読みいただきありがとうございました。
を使ってますが、メニューってどのように作成すればよいか教えてください？ このような疑問に対しシンプルにお答えします){kind=link}