AFFINGER5でスマホ画面用のメニューを作成する方法

 

WordPressのテーマにWING(AFFINGER5)を使ってますが、 スマホ画面用のメニューを作成する方法を教えてください?

 

このような疑問に対しシンプルにお答えします。

 

この記事は初心者でもわかりやすいように、設定方法を画像つきで解説しています。

 

今回は、スマホ用メニューの作成方法に関する記事となります。スマホメニューの色や配置などのデザイン変更ついては、「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の管理画面から「外観」の「メニュー」をクリックします。

 

「編集するメニューを選択」から、使用するメニューを選び、「選択」をクリックします。

 

メニュー設定から「ヘッダー用メニュー(横列)」にチェックをいれ、「メニューを保存」をクリックします。

 

メニュー(横並び)が設定されました。

 

簡単ですね。

 

 

まとめ

今回、スマホ用メニューの作成方法について解説しました。サイト訪問者に対して、検索性や他の記事へ導く為にも重要な設定となりますので、参考になれば幸いです。

 

最後までお読みいただきありがとうございました。

 

 

\本気で戦うなら/

AFFINGER6公式ストア

「稼ぐ」に特化したWordPressテーマ