AFFINGER5で「スマホ用スライドメニュー」を作成する手順【WordPressブログ】

今回は、このブログでも愛用中のWordPressテーマ「WING（AFFINGER5）」における…

をご紹介していきたいと思います

まず、WordPressブログにおける「スマホ用スライドメニュー」とは…

↑ これのこと（オレンジで囲ってる部分！）

こちらのアイコンは、タップすると…

↑ こんな感じで、指定したメニュー内容をスライド表示させることができます

そして「WING（AFFINGER5）」の場合、この「スマホ用スライドメニュー」の作成は超簡単です

それではさっそく見ていきましょー🐥

関連：「AFFINGER5」の購入・導入方法を1から解説
関連：「AFFINGER5」導入後にまず行うべきステップまとめ

AFFINGER5における、ブログの「スマホ用スライドメニュー」の作成手順【WordPress】

まずは、メニュー画面を開きましょう（下記手順です）

↑ WordPress管理画面　＞　外観　＞　メニュー　をクリックします

ここからは、

で2パターンにわけて解説していきます

なんのことかわからない人は、とりあえず ① の「メニューを新規作成する場合」を見ればOK！

【パターン①】メニューを新規作成する場合

さきほどのステップでメニュー画面が開けたら…

↑ 初めてメニューを作成する場合は、「メニュー名」という欄に任意のタイトルを入力します

ここの名称は読者から見られるものではないので、自分がわかりやすいと思うタイトルでOKです

↑ 入力したら、右端の「メニューを保存」をクリックしましょう

↑ つづいて左側の「メニュー項目を追加」という場所から、今回スライドメニューに入れたい記事やカテゴリーを選択します

今回は一例として、「投稿」から1記事選んでみたいと思います

その場合、まずは「投稿」タブをクリックしましょう

↑ 投稿済みページの一覧が開くので、メニューへ入れたい記事タイトルにチェックを入れましょう

ちなみに選びたい記事が表示されてない場合は、「すべて表示」というタブをクリックすると全表示されます

今回は「Hello world!」という記事を選んでみるよ！

チェックを入れられたら、「メニューに追加」をクリックします

↑ すると画面中央の「メニュー構造」という場所に、さきほど選んだ記事タイトルが「四角い枠」となって表示されます

ちなみに記事やカテゴリーなどを複数選んだ場合は、これらの枠を上下に移動させることで、スライドメニュー上での並び順を自由に変更することもできます

四角い枠は、クリック押しっぱなしで動かせるよ！

また、実際のスライドメニュー上での表示タイトルを変えたい場合は…

↑ 表示タイトルを変えたい記事やカテゴリーの右端にある　▼　をクリックすると…

↑ この「ナビゲーションラベル」という欄で、表示タイトルを自由に指定することもできます

↑ つづいて、その下の「メニュー設定」という場所で、このメニュー内容を実際のブログ上で表示させたい場所を指定します

今回はスライドメニューに表示させたいので、「スマートフォン用スライドメニュー」にチェックを入れましょう

↑ 最後に、右下の「メニューを保存」をクリックすれば完了です

今度は、「作成済みのメニューに追加するパターン」を見ていきます🐥

【パターン①】に該当してた人は、次の【パターン②】は読み飛ばしてOK！（その次パートの「実際のスマホ画面で確認」に進もう）

【パターン②】すでに作成済みのメニューに、「スライドメニュー」を追加する場合

WordPress管理画面　＞　外観　＞　メニュー　からメニュー画面が開けたら…

↑ 「編集するメニューを選択」という欄から、今回スライドメニューを追加したい（作成済みの）メニューを選びましょう

↑ その下の「メニュー設定」という場所で、すでに選択済みの項目に加えて「スマートフォン用スライドメニュー」にチェックを入れましょう

あとは、今回編集するメニューの「タイトル」も、任意で修正してもいいと思います（下記手順です）

↑「メニュー名」という欄に、すでに入ってるタイトルを好きな名称に修正すればOKです

ちなみに今回は、「ヘッダーメニュー①」という元々付けていたメニュータイトルから…

↑（スライドメニューを追加したので）わかりやすく、「ヘッダー＆スライドメニュー①」という名前に変更してみました

ここのタイトルは、読者から見られるものではないので、自分がわかりやすいと思う名前にすればOKです

最後に、右下の「メニューを保存」をクリックすれば完了です🐥

関連：「AFFINGER5」の購入・導入方法を1から解説
関連：「AFFINGER5」導入後にまず行うべきステップまとめ

実際のスマホ画面で確認【背景色と同化して隠れてる可能性あり！】

ここまででメニューの作成そのものはOKなんですが、ちゃんとスライドメニューが表示されているか、実際にスマホの画面上で確認してみましょう

↑ 左上にこんな感じで「三本線」のアイコンが表示されていればOKです

ちなみに！

↑ もしもこんな感じで、アイコンが表示されていないという場合は…

ヘッダーエリアの背景を「白色」に設定していることで、アイコンの初期設定である「白色」と同化して隠れてしまってるのが原因です

今回の自分がまさにそうだった…

ということで…

もし上記のようにアイコンが隠れてしまってる場合、「色設定」を変えることで、アイコンを表示させられます

この「スライドメニューの色設定」をカスタマイズする手順は、↓ をどうぞ♪

「色設定」だけじゃなく、デザインとか配置パターンのカスタマイズも紹介してるよ！

今回の「スライドメニュー作成」の解説は、これで以上となります

お疲れさまでした♪

あずき🐥

関連：「AFFINGER5」の購入・導入方法を1から解説
関連：「AFFINGER5」導入後にまず行うべきステップまとめ