affinger-slide-menu-setting-20200301_ec

WordPress

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



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

「スマホ用スライドメニュー」
の作成手順

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

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

affinger-slide-menu-setting-20200302_3-01

↑ これのこと(オレンジで囲ってる部分!)

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

affinger-slide-menu-setting-20200302_3-02

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

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

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

当ブログのWordPress環境

  • 使用してるテーマ:WING(AFFINGER5)
  • 使用してるエディタ:旧エディタ(クラシックエディタ)
  • 使用してるプラグイン:↓ の記事ですべて公開してます

WordPressブログで愛用中のおすすめプラグイン「16個」と設定方法をまとめて公開

wing300_gif_osusume

WordPressテーマ WING(AFFINGER5)

この記事を書いた人

azuki_01

あずき

専業ブロガー / フリーランス3年目 / 元アパレル / WordPressとSEOを独学で学んで、10年間の会社員生活から独立しました

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

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

affinger-slide-menu-setting-20200302_top-01

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

ここからは、

  1. メニューを新規作成する場合
  2. すでに作成済みのメニューに、「スライドメニュー」を追加する場合

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

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

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

pc-work-202001_01

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

affinger-slide-menu-setting-20200302_1-01

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

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

affinger-slide-menu-setting-20200302_1-02

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

affinger-slide-menu-setting-20200302_1-03

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

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

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

affinger-slide-menu-setting-20200302_1-04

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

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

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

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

affinger-slide-menu-setting-20200302_1-05

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

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

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

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

affinger-slide-menu-setting-20200302_1-06

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

affinger-slide-menu-setting-20200302_1-07

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

affinger-slide-menu-setting-20200302_1-08

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

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

affinger-slide-menu-setting-20200302_1-09

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

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

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

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

pc-work-202001_02

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

affinger-slide-menu-setting-20200302_2-01

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

affinger-slide-menu-setting-20200302_2-02

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

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

affinger-slide-menu-setting-20200302_2-03

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

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

affinger-slide-menu-setting-20200302_2-04

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

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

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

wing300_gif_osusume

WordPressテーマ WING(AFFINGER5)

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

pc-work-202001_03

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

affinger-slide-menu-setting-20200302_3-01

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

ちなみに!

affinger-slide-menu-setting-20200302_3-03b

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

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

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

ということで…

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

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

affinger-customize-slide-menu-20200302_ec
AFFINGER5で「スマホ用スライドメニュー」の色とデザイン設定をカスタマイズする手順【WordPressブログ】

続きを見る

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

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

お疲れさまでした♪

あずき🐥

wing300_gif_osusume

WordPressテーマ WING(AFFINGER5)

この記事を書いた人

azuki_01

あずき

専業ブロガー / フリーランス3年目 / 元アパレル / WordPressとSEOを独学で学んで、10年間の会社員生活から独立しました

-WordPress

Copyright© あずきのぶろぐ。 , 2020 All Rights Reserved.