今回は、このブログでも愛用中のWordPressテーマ「WING（AFFINGER5）」における…
「スマホ用スライドメニュー」
の作成手順
をご紹介していきたいと思います
まず、WordPressブログにおける「スマホ用スライドメニュー」とは…
↑ これのこと（オレンジで囲ってる部分！）
こちらのアイコンは、タップすると…
↑ こんな感じで、指定したメニュー内容をスライド表示させることができます
そして「WING（AFFINGER5）」の場合、この「スマホ用スライドメニュー」の作成は超簡単です
それではさっそく見ていきましょー🐥
このブログのWordPress環境
- 使用中のテーマ：WING AFFINGER5
- 使用中のエディタ：クラシックエディタ
- 使用中のプラグイン：おすすめプラグイン16選 の記事にて公開しています
＼「本気」で戦うなら ／
―― 検証と改善を重ねた唯一無二のテーマ ――
WING AFFINGER5
今なら超時短ツール「タグ管理プラグイン（税込 4,980円）」を無料配布中！
About me
- 専業ブロガー・フリーランス -
あずき
独立4年目 / 元アパレル → 歴10年
20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます。 普段はTwitter（@azuki_rinrin）にわりといるので、覗いてもらえると嬉しいです^^
目次
AFFINGER5における、ブログの「スマホ用スライドメニュー」の作成手順【WordPress】
まずは、メニュー画面を開きましょう（下記手順です）
↑ WordPress管理画面 ＞ 外観 ＞ メニュー をクリックします
ここからは、
- メニューを新規作成する場合
- すでに作成済みのメニューに、「スライドメニュー」を追加する場合
で2パターンにわけて解説していきます
【パターン①】メニューを新規作成する場合
さきほどのステップでメニュー画面が開けたら…
↑ 初めてメニューを作成する場合は、「メニュー名」という欄に任意のタイトルを入力します
ここの名称は読者から見られるものではないので、自分がわかりやすいと思うタイトルでOKです
↑ 入力したら、右端の「メニューを保存」をクリックしましょう
↑ つづいて左側の「メニュー項目を追加」という場所から、今回スライドメニューに入れたい記事やカテゴリーを選択します
今回は一例として、「投稿」から1記事選んでみたいと思います
その場合、まずは「投稿」タブをクリックしましょう
↑ 投稿済みページの一覧が開くので、メニューへ入れたい記事タイトルにチェックを入れましょう
ちなみに選びたい記事が表示されてない場合は、「すべて表示」というタブをクリックすると全表示されます
チェックを入れられたら、「メニューに追加」をクリックします
↑ すると画面中央の「メニュー構造」という場所に、さきほど選んだ記事タイトルが「四角い枠」となって表示されます
ちなみに記事やカテゴリーなどを複数選んだ場合は、これらの枠を上下に移動させることで、スライドメニュー上での並び順を自由に変更することもできます
また、実際のスライドメニュー上での表示タイトルを変えたい場合は…
↑ 表示タイトルを変えたい記事やカテゴリーの右端にある ▼ をクリックすると…
↑ この「ナビゲーションラベル」という欄で、表示タイトルを自由に指定することもできます
↑ つづいて、その下の「メニュー設定」という場所で、このメニュー内容を実際のブログ上で表示させたい場所を指定します
今回はスライドメニューに表示させたいので、「スマートフォン用スライドメニュー」にチェックを入れましょう
↑ 最後に、右下の「メニューを保存」をクリックすれば完了です
今度は、「作成済みのメニューに追加するパターン」を見ていきます🐥
【パターン②】すでに作成済みのメニューに、「スライドメニュー」を追加する場合
WordPress管理画面 ＞ 外観 ＞ メニュー からメニュー画面が開けたら…
↑ 「編集するメニューを選択」という欄から、今回スライドメニューを追加したい（作成済みの）メニューを選びましょう
↑ その下の「メニュー設定」という場所で、すでに選択済みの項目に加えて「スマートフォン用スライドメニュー」にチェックを入れましょう
あとは、今回編集するメニューの「タイトル」も、任意で修正してもいいと思います（下記手順です）
↑「メニュー名」という欄に、すでに入ってるタイトルを好きな名称に修正すればOKです
ちなみに今回は、「ヘッダーメニュー①」という元々付けていたメニュータイトルから…
↑（スライドメニューを追加したので）わかりやすく、「ヘッダー＆スライドメニュー①」という名前に変更してみました
ここのタイトルは、読者から見られるものではないので、自分がわかりやすいと思う名前にすればOKです
最後に、右下の「メニューを保存」をクリックすれば完了です🐥
＼「本気」で戦うなら ／
―― 検証と改善を重ねた唯一無二のテーマ ――
WING AFFINGER5
今なら超時短ツール「タグ管理プラグイン（税込 4,980円）」を無料配布中！
実際のスマホ画面で確認【背景色と同化して隠れてる可能性あり！】
ここまででメニューの作成そのものはOKなんですが、ちゃんとスライドメニューが表示されているか、実際にスマホの画面上で確認してみましょう
↑ 左上にこんな感じで「三本線」のアイコンが表示されていればOKです
ちなみに！
↑ もしもこんな感じで、アイコンが表示されていないという場合は…
ヘッダーエリアの背景を「白色」に設定していることで、アイコンの初期設定である「白色」と同化して隠れてしまってるのが原因です
ということで…
もし上記のようにアイコンが隠れてしまってる場合、「色設定」を変えることで、アイコンを表示させられます
この「スライドメニューの色設定」をカスタマイズする手順は、↓ をどうぞ♪
-
AFFINGER5で「スマホ用スライドメニュー」の色とデザイン設定をカスタマイズする手順【WordPressブログ】
続きを見る
今回の「スライドメニュー作成」の解説は、これで以上となります
お疲れさまでした♪
あずき🐥
＼「本気」で戦うなら ／
―― 検証と改善を重ねた唯一無二のテーマ ――
WING AFFINGER5
今なら超時短ツール「タグ管理プラグイン（税込 4,980円）」を無料配布中！
About me
- 専業ブロガー・フリーランス -
あずき
独立4年目 / 元アパレル → 歴10年
20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます。 普段はTwitter（@azuki_rinrin）にわりといるので、覗いてもらえると嬉しいです^^