こんにちは。
Aoirolife運営者のあおいろ ( @ao_bloger ) です。
今回は、スマホスライドメニューのカスタマイズを紹介していきます。
↓↓↓
スライドメニュー ( ハンバーガーメニュー ) のデザインを変えていきます。

本記事で解決できるカスタマイズ
- スライドメニューアイコンを左から右に移動
- スライドメニューアイコンのデザイン変更 ( 全6パターン )
- 検索窓アイコンを追加
AFFINGER6スマホスライドメニューのカスタマイズ

さっそく見ていきましょう。
①:メニューアイコンを左から右へ
まずはスマホスライドメニューのアイコンを左から右に移動させる方法です。

下記の手順ですすめて下さい。
【 AFFINGER管理 】→【 メニュー 】→【 スマホスライドメニュー 】→【 メニューの位置 】→【 右 】→【 保存 】
1.AFFINGER管理画面をクリック

2.メニュー画面でスマホスライドメニューをクリック or 下にスクロール

3.【 メニューの位置 】で右を選択

4.1番下にある保存をクリック


個人的に右側の方が押しやすいと感じるので、当サイトもメニューアイコンは右側にしています。
②:スライドメニューアイコンのデザイン変更
スマホスライドメニューアイコンは、全6パターンのデザインがあります。下記の手順で変更していきましょう。
※【AFFINGER管理】~【スマホスライドメニュー】までは先ほどと同じ手順
【AFFINGER管理】→【メニュー】→【 スマホスライドメニュー 】→【 アイコンデザイン 】→【好きなデザイン選択 】→【保存】
1.スマホスライドメニューの【 アイコンデザイン 】で好きなデザインを選択。

この中から選んでいきます。
〇ノーマル 〇クール 〇リスト
⊡ アイコン下に「MENU」「CLOSE」を追加する
デザインは全6パターンあります。下の画像を参考に、好きなデザインを選んでください。



③:検索アイコンの追加
次は、読者がサイト内を検索できるように、検索アイコンを追加しましょう。手順は下記の通りです。
検索アイコン

【 AFFINGER管理 】→【メニュー】→【 スマホスライドメニュー 】→【 検索アイコン 】→【 スマホヘッダーに検索アイコンを追加する 】→【 保存 】→【 オーバーレイ or スライド選択 】→【 保存 】
1.検索アイコンで、「 スマホヘッダーに検索アイコンを追加する 」にチェック
※ここでいったん保存してください。 ( 保存後、オーバーレイ/スライドを選べます )

2.保存してから、オーバーレイ or スライドを選択

オーバーレイとスライドは、検索アイコンを押したとき、表示のされ方がちがいます。( 画像参照 )


3.選択後、保存をクリック

以上で検索アイコンの設置はおわりです。

筆者はよく読むブログの検索窓を乱用 (笑) するので、自分のサイトでもスマホヘッダーに検索アイコンを追加しています。ファンがつけば、検索窓からサイト内を回遊してくれます。
最後に:スマホスライドメニューカスタマイズの利点
ブログにきてくれる人の8割がスマホからです。
ちょっとこだわるだけで読者が見やすいメニューをつくれるので、当記事がカスタマイズの参考になれば幸いです(^^)
今回は以上です。