WORDPRESS

【2023年】AFFINGER6「スマホスライドメニュー」の作り方&カスタマイズ設定方法【ワードプレスブログ完全初心者ガイド/第6章/No.6】

AFFINGER6「スマホスライドメニュー」の作り方&カスタマイズ設定方法【ワードプレスブログ完全初心者ガイド/第6章/No.6】
 

専業ブロガー6年目のあずき猫です

 

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

「スマホスライドメニュー」の作り方&カスタマイズ設定方法

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

 



 

まず!

 

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

AFFINGER6「スマホスライドメニュー」の作り方と、色・位置・デザイン設定のカスタマイズ方法 top-01

↑ こちらのアイコン(左上の三本線!)を指し、またアイコンをタップすると…

AFFINGER6「スマホスライドメニュー」の作り方と、色・位置・デザイン設定のカスタマイズ方法 top-02

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

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

▼ ACTION AFFINGER6の「購入・導入手順」はこちらから ▼

【2023年2月】AFFINGER6の購入・導入手順を1から徹底解説。子テーマまで【ワードプレスブログ完全初心者ガイド】

AFFINGER6の購入・導入手順を1から徹底解説。子テーマまで【ワードプレスブログ完全初心者ガイド】
【2023年2月】AFFINGER6の購入・導入手順を1から徹底解説。子テーマまで【ワードプレスブログ完全初心者ガイド】

続きを見る

  • 「ACTION AFFINGER6」が実際に使用できるようになるまでの ”一連の手順” を、
    画像付きでまるっと解説しています
  • 作業そのものは、正味【15分程度】でおわります(子テーマまで含めて)

インフォトップ ワードプレステーマ売上

公式:ACTION AFFINGER6

すごいもくじLITE

の限定特典キャンペーンも実施中!!!

※2021年発表Infotop Affidemy

 

【2023年】AFFINGER6「スマホスライドメニュー」の作り方&カスタマイズ設定方法【ワードプレスブログ完全初心者ガイド/第6章/No.6】

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

WordPress ヘッダー b-01

注意

当ブログガイドは、WordPressの編集エディタが「グーテンベルグ」ではなく…

クラシックエディタ

の前提で解説しています(圧倒的に使いやすく、またユーザー数も膨大であることから「情報もググりやすい」ので断然おすすめです)

 

そのため、お手元のWordPress環境が…

  • 無料プラグイン「Classic Editor」を有効化していない!
  • 代わりに、AFFINGERに付属の「Gutenbergプラグイン2」を有効化している!

という状態だと、画面のデザインや設定方法が(当ページの内容と)異なる可能性がありますのでご注意ください

 

▼ 「Classic Editor」を有効化する手順 ▼

  1. WordPress管理画面の左側一覧から、 プラグイン > 新規追加 をクリック
  2. 右上の検索フォームに Classic Editor と入力し、表示された「Classic Editor」の インストール > 有効化 を順にクリック 

▼ 「Gutenbergプラグイン2」を停止する手順 ▼

  1. WordPress管理画面の左側一覧から、 プラグイン > インストール済みプラグイン をクリック
  2. 表示された一覧のなかから、「Gutenbergプラグイン2」の「無効化」をクリック
 

関連

「クラシックエディタとグーテンベルグってなに…?」という場合は、こちらで1から解説しています ↓ ※重要です

WordPressクラシックエディタとグーテンベルグとは?Classic Editorの導入方法まで【ワードプレスブログ完全初心者ガイド/第4章/No.6】
WordPressクラシックエディタとグーテンベルグとは?Classic Editorの導入方法まで【ワードプレスブログ完全初心者ガイド/第4章/No.6】

続きを見る

 

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

外観 > メニュー

をクリックしましょう

 

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

順に見ていくよ!
 

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

 

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

 

補足

「メニュー編集画面の基本的な操作」については、こちらの記事にて1から解説しています ↓

AFFINGER6「ヘッダー・フッターメニュー」の作り方。スマホ用も【ワードプレスブログ完全初心者ガイド/第6章/No.4】
【2023年】AFFINGER6「ヘッダー・フッターメニュー」の作り方。スマホ用も【ワードプレスブログ完全初心者ガイド/第6章/No.4】

続きを見る

 
【パターン1】の手順は、下記の通り!
 

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

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

 

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

 

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

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

AFFINGER6「スマホスライドメニュー」の作り方と、色・位置・デザイン設定のカスタマイズ方法 1-1-1-01

↑ 任意のメニュータイトルを入力して、右下の「メニューを作成」ボタンを一旦クリックします

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

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

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

AFFINGER6「スマホスライドメニュー」の作り方と、色・位置・デザイン設定のカスタマイズ方法 1-1-1-02

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

上画像のように、複数ページの選択もできるよ!
 

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

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

 

なお、さきほどのステップで複数のページを選択した場合は、各ボックスをドラッグ&ドロップすることで「任意の順番」に並び替えできます

各ボックスの右端にある ▼ を開くと、メニュー上の表示タイトル名を変更できるよ!
 

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

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

AFFINGER6「スマホスライドメニュー」の作り方と、色・位置・デザイン設定のカスタマイズ方法 1-1-1-03

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

 

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

つづいて、【パターン2】の方を見ていくよ!
 

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

 

「ヘッダーメニュー用」など、すでに作成済みのメニューと同じ内容で「スマホスライドメニュー」を作りたい場合、こちらの【パターン2】が手っ取り早くおすすめです

 

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

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

 

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

 

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

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

AFFINGER6「スマホスライドメニュー」の作り方と、色・位置・デザイン設定のカスタマイズ方法 1-1-2-01

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

 

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

 

ただし!

 

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

ヘッダー(最上部)エリアの背景色を「白」などに設定している場合

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

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

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

WordPress ヘッダー b-02

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

 

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

外観 > カスタマイズ

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

各メニュー設定 > スマホメニュー(スマホヘッダー)

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

 

するとそのなかに…

AFFINGER6「スマホスライドメニュー」の作り方と、色・位置・デザイン設定のカスタマイズ方法 1-2-1-01-a

↑ このように…

  • スライドメニューボタン背景色
  • スライドメニューアイコン色
  • スライドメニューバー背景色
  • スライドメニューバー背景色(グラデーション上部)

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

 

今回は例として…

AFFINGER6「スマホスライドメニュー」の作り方と、色・位置・デザイン設定のカスタマイズ方法 1-2-1-01-b

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

  • スライドメニューボタン背景色 → デフォルトのまま
  • スライドメニューアイコン色 → #523634
  • スライドメニューバー背景色 → デフォルトのまま
  • スライドメニューバー背景色(グラデーション上部) → デフォルトのまま
変更したら、左上の「公開」ボタンを忘れずにクリックしよう!
 

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

AFFINGER6「スマホスライドメニュー」の作り方と、色・位置・デザイン設定のカスタマイズ方法 1-2-1-02-a

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

 

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

AFFINGER6「スマホスライドメニュー」の作り方と、色・位置・デザイン設定のカスタマイズ方法 1-2-1-02-b

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

 

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

AFFINGER6「スマホスライドメニュー」の作り方と、色・位置・デザイン設定のカスタマイズ方法 1-2-1-03-a

↑ このように…

  • スライドメニュー内のテキストリンク色
  • スライドメニュー内リンクのボーダー色
  • スライドメニュー内背景色

という項目があるので、こちらで設定可能です

 

今回は例として…

AFFINGER6「スマホスライドメニュー」の作り方と、色・位置・デザイン設定のカスタマイズ方法 1-2-1-03-b

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

  • スライドメニュー内のテキストリンク色 → デフォルトのまま
  • スライドメニュー内リンクのボーダー色 → #515151
  • スライドメニュー内背景色 → #515151

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

AFFINGER6「スマホスライドメニュー」の作り方と、色・位置・デザイン設定のカスタマイズ方法 1-2-1-04

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

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

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

 

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

AFFINGER管理

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

メニュー

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

 

するとそのなかに…

AFFINGER6「スマホスライドメニュー」の作り方&カスタマイズ設定方法 1-2-2-01-a

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

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

今回は例として…

AFFINGER6「スマホスライドメニュー」の作り方&カスタマイズ設定方法 1-2-2-01-b

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

  • クール
  • アイコン下に「MENU」「CLOSE」を追加する

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

 

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

 

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

AFFINGER6「スマホスライドメニュー」の作り方と、色・位置・デザイン設定のカスタマイズ方法 1-2-2-02

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

 
 

人気記事

 

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

「全8章」の総合TOPページです

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

 

あずき猫 - Azuki Cat

猫です / 独立6年目の専業ブロガー / アパレル歴10年 / Twitterでは、ブログに限らず「色々うまくいかへん…」「どないしよ…」というときのための、本質的な思考を発信しています。ミァー!!!

\ 当ブログで愛用してます /

ACTION AFFINGER6 バナー 01-300px

 

インフォトップ ワードプレステーマ売上

ACTION AFFINGER6

すごいもくじLITE

の限定特典キャンペーンも実施中!!!

 

公式:ACTION AFFINGER6

関連:WordPressテーマ選びのチェック項目5つ+超重要な「核心」1つ【失敗しない本当におすすめなテーマの選び方】

※2021年発表Infotop Affidemy

-WORDPRESS