このような疑問に対しシンプルにお答えします。
この記事は初心者でもわかりやすいように、設定方法を画像つきで解説しています。
今回は、スマホ用メニューの作成方法に関する記事となります。スマホメニューの色や配置などのデザイン変更ついては、「AFFINGER5でスマホ画面用メニューの色や配置を設定する方法」を参考にしてください。
スマホ画面 メニューの種類
スマホ画面用には、以下3種類のメニューを設定することができます。
- スマホ用スライドメニュー
- スマホ用ミドルメニュー
- スマホ用メニュー(横並び)
それぞれのメニューは、以下のように表示されます。
それでは、メニューの作成方法を見ていきます。
スライドメニュー設定
WordPressの管理画面から「AFFINGER5管理」をクリックします。
「メニュー」をクリックし、「スマホ用スライドメニュー」の欄の「スマートフォンメニューを表示しない」に、チェックが入っていないことを確認します。
注意ポイント
「スマートフォンメニューを表示しない」にチェックが入っていると、スライドメニューが表示されなくなりますので、必ず確認してください。
以降の手順では、メニューの作成部分を省いています。メニューの作成方法は「AFFINGER5でパソコン画面用のメニューを作成する方法」を参考にしてください。
WordPressの管理画面から「外観」の「メニュー」をクリックします。
「編集するメニューを選択」から、使用するメニューを選び、「選択」をクリックします。
メニュー設定から「スマートフォン用スライドメニュー」にチェックをいれ、「メニューを保存」をクリックします。
スライドメニューが設定されました。
簡単ですね。
ミドルメニュー設定
WordPressの管理画面から「AFFINGER5管理」をクリックします。
「メニュー」をクリックし、「その他のスマホ用メニュー」の欄の「スマホ用ミドルメニューを表示する」にチェックを入れ、「save」をクリックします。
以降の手順では、メニューの作成部分を省いています。メニューの作成方法は「AFFINGER5でパソコン画面用のメニューを作成する方法」を参考にしてください。
WordPressの管理画面から「外観」の「メニュー」をクリックします。
「編集するメニューを選択」から、使用するメニューを選び、「選択」をクリックします。
メニュー設定から「スマートフォン用ミドルメニュー」にチェックをいれ、「メニューを保存」をクリックします。
ミドルメニューが設定されました。
簡単ですね。
ミドルメニュー 3列表示
ミドルメニューを2列表示から3列表示にしたい場合は、以下の設定を行ってください。
WordPressの管理画面から「AFFINGER5管理」をクリックします。
「メニュー」をクリックし、「その他のスマホ用メニュー」の欄の「スマホ用ミドルメニューを3列にする」にチェックを入れ、「save」をクリックします。
注意ポイント
「スマホ用ミドルメニューを表示する」にチェックを入れ、「save」した後でなければ、「スマホ用ミドルメニューを3列にする」にチェックをいれる事はできないので、注意してください。
その他の手順は、先程の「ミドルメニュー設定」の項目で説明した内容と同じなので省略します。
ミドルメニューが3列表示になりました。
簡単ですね。
メニュー(横並び)設定
WordPressの管理画面から「AFFINGER5管理」をクリックします。
「メニュー」をクリックし、「その他のスマホ用メニュー」の欄の「ヘッダー用メニュー(横列)を有効化」にチェックを入れ、「save」をクリックします。
以降の手順では、メニューの作成部分を省いています。メニューの作成方法は「AFFINGER5でパソコン画面用のメニューを作成する方法」を参考にしてください。
WordPressの管理画面から「外観」の「メニュー」をクリックします。
「編集するメニューを選択」から、使用するメニューを選び、「選択」をクリックします。
メニュー設定から「ヘッダー用メニュー(横列)」にチェックをいれ、「メニューを保存」をクリックします。
メニュー(横並び)が設定されました。
簡単ですね。
まとめ
今回、スマホ用メニューの作成方法について解説しました。サイト訪問者に対して、検索性や他の記事へ導く為にも重要な設定となりますので、参考になれば幸いです。
最後までお読みいただきありがとうございました。