AFFINGER6「スマホスライドメニュー」の作り方と、色・位置・デザイン設定のカスタマイズ方法を初心者向けに解説【ACTION／WordPressブログ】

専業ブロガー５年目のあずきです🐥

当ブログでも愛用中の人気WordPressテーマ「ACTION AFFINGER6」における…

について、ブログ初心者さん向けに１からわかりやすく解説していきます

まずACTION AFFINGER6における「スマホスライドメニュー」とは、スマホ画面の左上もしくは右上に表示される…

↑ こちらのアイコン（三本線のところ！）を指し、またアイコンをタップすると…

↑ このように、メニューが【スライド表示】されるタイプになります

ということで、さっそく見ていこー！

AFFINGER6「スマホスライドメニュー」の作り方と、色・位置・デザイン設定のカスタマイズ方法を初心者向けに解説【ACTION／WordPressブログ】

ACTION AFFINGER6「スマホスライドメニュー」の作り方

まずは、WordPress管理画面の左側一覧から…

をクリックしましょう

メニュー編集の画面が表示されたら、下記【２つのパターン】のうち、該当するパターンの手順で「スマホスライドメニュー」を作成していきます

【パターン１】今回のスマホスライドメニュー用に、メニューを新規作成したい場合

どっちのパターンに該当するかわからない場合は、とりあえずこっちの手順で作ればOK！

step
1「新しいメニューを作成しましょう」をクリック！

まずは、画面上部にある「新しいメニューを作成しましょう」というボタンをクリックです

※メニューの作成そのものが初めての場合、こちらの「step1」は省略されます

step
2任意の「メニュー名」を入力！

つづいて、「メニュー名」という項目に…

↑ 任意のメニュータイトルを入力します

※このメニュー名というのは「ユーザーに直接見られるものではない」ので、自分がわかりやすいと思う名称で大丈夫です

step
3「メニュー項目を追加」で、スマホスライドメニューに掲載させたいページを選択！

お次は、画面の左側に表示されている「メニュー項目を追加」というエリアにて…

↑ 「スマホスライドメニュー」に載せたい、任意の記事ページを選択していきます

※上画像のように、複数ページの選択も可です

step
4選択したページが、中央エリアに追加されたことを確認！

さきほど選択した記事ページが、画面の中央エリアに「横長のボックス」となって追加されていることを確認しましょう

※さきほどのステップで複数のページを選択した場合は、各ボックスをドラッグ＆ドロップすることで「任意の順番」に並び替えできます
※各ボックスの右端にある　▼　を開くと、メニュー上における「表示タイトル名」を変更できます

step
5「メニュー設定」で、【スマホスライドメニュー】にチェック！

最後に、画面の下部に表示されている「メニュー設定」というエリアにて…

↑ こちらの【スマホスライドメニュー】という項目にチェックを入れます

ここまで一通りできたら、右下の「メニューを保存」をクリックして、スマホスライドメニューの作成は完了です🐣

【パターン２】すでに作成してあるメニューの位置設定に、スマホスライドメニューを追加したい場合

「ヘッダーメニュー用」とかに作ったメニューと同じ内容で「スマホスライドメニュー」を作りたいなら、こっちが早くて便利！

step
1「編集するメニューを選択」タブから、作成済みのメニューを選択！

まずは画面左上の「編集するメニューを選択」というタブを開き、任意の作成済みメニューを選択して呼び出しましょう

※作成済みのメニューが「１件のみ」の状態だと、メニュー編集の画面を開いた時点で自動的に呼び出されます

step
2「メニュー設定」で、【スマホスライドメニュー】にチェック！

つづいて、画面下部の「メニュー設定」というエリアにて…

↑ こちらの「スマホスライドメニュー」という項目に、チェックを付け加えます

最後に右下の「メニューを保存」をクリックして、「スマホスライドメニュー」の作成は完了です🐣

ただし！

ACTION AFFINGER6では、初期状態で「スマホスライドメニュー」のアイコン色が「白」に設定されているので、例えば…

は、背景色と同化して「スマホスライドメニュー」のアイコンが隠れてしまっている状態なので、注意が必要です

ということで、今度は作成したスマホスライドメニューの【カスタマイズ方法】について見ていこう！

ACTION AFFINGER6「スマホスライドメニュー」色・位置・デザイン設定のカスタマイズ方法

スマホスライドメニューの「色設定」をカスタマイズしたい場合

まずは、WordPress管理画面の左側一覧から…

をクリックして「カスタマイズ」設定画面を開き、さらにそのなかの左側一覧から…

という順にクリックしましょう

するとそのなかに…

↑ このように…

という項目があるので、こちらでまずスマホスライドメニューの「アイコン色」などを指定していきます

今回は例として…

↑ こちらの配色に設定してみます（カラーコードは下記の通り）

変更したら、左上の「公開」ボタンを忘れずにクリックしよう！

実際のスマホ画面上で見てみると…

↑ このような「スマホスライドメニュー」アイコンが表示されました

そして、こちらのアイコンをいざタップしてみると…

↑ 作成したメニューが、文字通り「スライド表示」されます

で、このスライド表示されるエリアの配色については、さきほどと同じ設定ページ内の「少し下側」に…

↑ このように…

という項目があるので、こちらで設定していきます

今回は例として…

↑ こちらの配色に設定してみます（カラーコードは下記の通り）

「公開」ボタンを再度クリックしてから、実際のスマホ画面で「スマホスライドメニュー」アイコンを改めてタップしてみると…

↑ このようなスライド表示に変わりました🐥

最後に、アイコンの【位置】とか【デザイン】の設定をカスタマイズしていくよ！

スマホスライドメニューの「位置・デザイン設定」をカスタマイズしたい場合

まずはWordPress管理画面から、左下の…

をクリックし、さらにそのなかの左側一覧から…

というタブをクリックしましょう

するとそのなかに…

↑「スマホスライドメニュー」という設定エリアがあるので、こちらでアイコンの【デザイン】や【位置】などを指定することができます

例えば【メニューの位置】という項目で「右」を選ぶと、アイコンの表示位置が「右上」に変わるよ！

今回は例として…

↑【アイコンデザイン】内の…

という項目を選択してみます

変更したら、右上の「Save」ボタンで設定の保存を忘れずに行いましょう

実際のスマホ画面で確認してみると、左上の「三本線」アイコンが…

↑ このようなデザインにカスタマイズされました🐥

あずきのワードプレスブログ「完全初心者」ガイド

※当プラグインの使用には、別売のWordPressテーマ「ACTION AFFINGER6」最新版が必要です