WORDPRESS

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

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

あずきです🐥

 

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

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

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

 

まず!

 

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

 

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

 

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

 

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

 

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

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

 

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

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

WordPress ヘッダー d-01

 

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

外観 > メニュー

をクリックしましょう

 

メニュー編集の画面が表示されたら、下記の…

【2パターン】

のうち、該当するパターンの手順で「スマホスライドメニュー」を作成していきます

 

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

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

補足

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

AFFINGER6「ヘッダー&フッターメニュー」の作り方
【スマホ用も】AFFINGER6「ヘッダー&フッターメニュー」の作り方を初心者向けに解説【ACTION/WordPressブログ】

続きを見る

 

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

 

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

 

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

 

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

 

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

 

step
3
画面左側の「メニュー項目を追加」というエリアにて、スマホスライドメニューに掲載したい任意のページを選択!

 

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

 

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

 

step
4
選択したページが、画面中央に「横長のボックス」となって追加されたことを確認!

 

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

※各ボックスの右端にある ▼ を開くと、メニュー上における「表示タイトル名」を変更できます

 

step
5
画面下部の「メニュー設定」というエリアにて、【スマホスライドメニュー】にチェックを入れる!

 

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

 

チェックを入れたら、右下の「メニューを保存」をクリックして「スマホスライドメニュー」の作成は完了です🐣

 

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

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

step
1
画面左上の「編集するメニューを選択」というタブから、任意の作成済みメニューを選択して呼び出す!

 

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

 

step
2
画面下部の「メニュー設定」というエリアにて、【スマホスライドメニュー】にチェックを加える!

 

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

 

チェックを入れたら、右下の「メニューを保存」をクリックして「スマホスライドメニュー」の作成は完了です🐣

 

ただし!

 

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

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

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

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

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

WordPress ヘッダー d-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

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

 

今回の記事はこちらの章に属しています

 第6章 デザイン 編          

次の章はこちらからどうぞ

 第7章 記事投稿 編          

全9章のTOPページです

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

 

-WORDPRESS