専業ブロガー５年目のあずきです🐥
当ブログでも愛用中の人気WordPressテーマ「ACTION AFFINGER6」における…
「スマホスライドメニュー」の作り方と、色・位置・デザイン設定のカスタマイズ方法
について、ブログ初心者さん向けに１からわかりやすく解説していきます
まずACTION AFFINGER6における「スマホスライドメニュー」とは、スマホ画面の左上もしくは右上に表示される…
↑ こちらのアイコン（三本線のところ！）を指し、またアイコンをタップすると…
↑ このように、メニューが【スライド表示】されるタイプになります
▼ ACTION AFFINGER6の「購入・導入手順」はこちらから ▼
ACTION AFFINGER6の購入＆導入方法を初心者向けに１から解説。「子テーマ」のインストール＆有効化手順まで
-
ACTION AFFINGER6の購入＆導入方法を初心者向けに１から解説。「子テーマ」のインストール＆有効化手順まで
続きを見る
- 「ACTION AFFINGER6」が実際に使用できるようになるまでの ”一連の手順” を、
画像付きでまるっと解説しています - 作業そのものは、正味【15分程度】でおわります（子テーマまで含めて）
AFFINGER6「スマホスライドメニュー」の作り方と、色・位置・デザイン設定のカスタマイズ方法を初心者向けに解説【ACTION／WordPressブログ】
ACTION AFFINGER6「スマホスライドメニュー」の作り方
まずは、WordPress管理画面の左側一覧から…
外観 ＞ メニュー
をクリックしましょう
メニュー編集の画面が表示されたら、下記【２つのパターン】のうち、該当するパターンの手順で「スマホスライドメニュー」を作成していきます
【パターン１】今回のスマホスライドメニュー用に、メニューを新規作成したい場合
補足
「メニュー編集画面の基本的な操作」については、こちらの記事にて１から解説しています ↓
-
【スマホ用も】AFFINGER6「ヘッダー＆フッターメニュー」の作り方を初心者向けに解説【ACTION／WordPressブログ】
続きを見る
step
1「新しいメニューを作成しましょう」をクリック！
まずは、画面上部にある「新しいメニューを作成しましょう」というボタンをクリックです
※メニューの作成そのものが初めての場合、こちらの「step1」は省略されます
step
2任意の「メニュー名」を入力！
つづいて、「メニュー名」という項目に…
↑ 任意のメニュータイトルを入力します
※このメニュー名というのは「ユーザーに直接見られるものではない」ので、自分がわかりやすいと思う名称で大丈夫です
step
3「メニュー項目を追加」で、スマホスライドメニューに掲載させたいページを選択！
お次は、画面の左側に表示されている「メニュー項目を追加」というエリアにて…
↑ 「スマホスライドメニュー」に載せたい、任意の記事ページを選択していきます
※上画像のように、複数ページの選択も可です
step
4選択したページが、中央エリアに追加されたことを確認！
さきほど選択した記事ページが、画面の中央エリアに「横長のボックス」となって追加されていることを確認しましょう
※さきほどのステップで複数のページを選択した場合は、各ボックスをドラッグ＆ドロップすることで「任意の順番」に並び替えできます
※各ボックスの右端にある ▼ を開くと、メニュー上における「表示タイトル名」を変更できます
step
5「メニュー設定」で、【スマホスライドメニュー】にチェック！
最後に、画面の下部に表示されている「メニュー設定」というエリアにて…
↑ こちらの【スマホスライドメニュー】という項目にチェックを入れます
ここまで一通りできたら、右下の「メニューを保存」をクリックして、スマホスライドメニューの作成は完了です🐣
【パターン２】すでに作成してあるメニューの位置設定に、スマホスライドメニューを追加したい場合
step
1「編集するメニューを選択」タブから、作成済みのメニューを選択！
まずは画面左上の「編集するメニューを選択」というタブを開き、任意の作成済みメニューを選択して呼び出しましょう
※作成済みのメニューが「１件のみ」の状態だと、メニュー編集の画面を開いた時点で自動的に呼び出されます
step
2「メニュー設定」で、【スマホスライドメニュー】にチェック！
つづいて、画面下部の「メニュー設定」というエリアにて…
↑ こちらの「スマホスライドメニュー」という項目に、チェックを付け加えます
最後に右下の「メニューを保存」をクリックして、「スマホスライドメニュー」の作成は完了です🐣
ただし！
ACTION AFFINGER6では、初期状態で「スマホスライドメニュー」のアイコン色が「白」に設定されているので、例えば…
ヘッダー（最上部）エリアの背景色を「白」などに設定している場合
は、背景色と同化して「スマホスライドメニュー」のアイコンが隠れてしまっている状態なので、注意が必要です
ACTION AFFINGER6「スマホスライドメニュー」色・位置・デザイン設定のカスタマイズ方法
スマホスライドメニューの「色設定」をカスタマイズしたい場合
まずは、WordPress管理画面の左側一覧から…
外観 ＞ カスタマイズ
をクリックして「カスタマイズ」設定画面を開き、さらにそのなかの左側一覧から…
各メニュー設定 ＞ スマホメニュー（スマホヘッダー）
という順にクリックしましょう
するとそのなかに…
↑ このように…
- スライドメニューボタン背景色
- スライドメニューアイコン色
- スライドメニューバー背景色
- スライドメニューバー背景色（グラデーション上部）
という項目があるので、こちらでまずスマホスライドメニューの「アイコン色」などを指定していきます
今回は例として…
↑ こちらの配色に設定してみます（カラーコードは下記の通り）
- スライドメニューボタン背景色 → デフォルトのまま
- スライドメニューアイコン色 → #523634
- スライドメニューバー背景色 → デフォルトのまま
- スライドメニューバー背景色（グラデーション上部） → デフォルトのまま
実際のスマホ画面上で見てみると…
↑ このような「スマホスライドメニュー」アイコンが表示されました
そして、こちらのアイコンをいざタップしてみると…
↑ 作成したメニューが、文字通り「スライド表示」されます
で、このスライド表示されるエリアの配色については、さきほどと同じ設定ページ内の「少し下側」に…
↑ このように…
- スライドメニュー内のテキストリンク色
- スライドメニュー内リンクのボーダー色
- スライドメニュー内背景色
という項目があるので、こちらで設定していきます
今回は例として…
↑ こちらの配色に設定してみます（カラーコードは下記の通り）
- スライドメニュー内のテキストリンク色 → デフォルトのまま
- スライドメニュー内リンクのボーダー色 → #515151
- スライドメニュー内背景色 → #515151
「公開」ボタンを再度クリックしてから、実際のスマホ画面で「スマホスライドメニュー」アイコンを改めてタップしてみると…
↑ このようなスライド表示に変わりました🐥
スマホスライドメニューの「位置・デザイン設定」をカスタマイズしたい場合
まずはWordPress管理画面から、左下の…
AFFINGER管理
をクリックし、さらにそのなかの左側一覧から…
メニュー
というタブをクリックしましょう
するとそのなかに…
↑「スマホスライドメニュー」という設定エリアがあるので、こちらでアイコンの【デザイン】や【位置】などを指定することができます
今回は例として…
↑【アイコンデザイン】内の…
- クール
- アイコン下に「MENU」「CLOSE」を追加する
という項目を選択してみます
変更したら、右上の「Save」ボタンで設定の保存を忘れずに行いましょう
実際のスマホ画面で確認してみると、左上の「三本線」アイコンが…
↑ このようなデザインにカスタマイズされました🐥
人気記事
あずきのワードプレスブログ「完全初心者」ガイド！
”全８章” の総合TOPページです
＼ 「なぜ売れないか？」を徹底解析 ／
結果が見えるサイト運営に
✔ よく使用する文章や画像、広告リンクを「テンプレート化」して使い回せる！
✔ 元データの更新だけで全記事に「一括反映」されるため、広告の差替えも一瞬！
✔ 広告の「クリック回数」や「クリックされたページ」などを自動計測！
AffiliateRun～なぜ売れないか？
PDFマニュアル付き！
公式：「AFFINGERタグ管理マネージャー4 + PVモニター」プラグインセット
関連：WordPressにおける広告リンクの貼り方を「３つのパターン」で１から解説【 ”タグ管理” が最強におすすめ】
-
WordPressにおける広告リンクの貼り方を「３つのパターン」で１から解説【 ”タグ管理” が最強におすすめ】
続きを見る
※当プラグインの使用には、別売のWordPressテーマ「ACTION AFFINGER6」最新版が必要です
About me
suzu azuki
あずき鈴々
独立5年目の専業ブロガー / 元アパレル → 歴10年
20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます。 普段はTwitter（@azuki_rinrin）にいるので覗いてもらえると嬉しいです^^