こんにちは。
Aoirolife運営者のあおいろ ( @ao_bloger ) です。
今回は、スマホスライドメニューのカスタマイズを紹介していきます。
↓↓↓
スライドメニュー ( ハンバーガーメニュー ) のデザインを変えていきます。
本記事で解決できるカスタマイズ
- スライドメニューアイコンを左から右に移動
- スライドメニューアイコンのデザイン変更 ( 全６パターン )
- 検索窓アイコンを追加
AFFINGER６スマホスライドメニューのカスタマイズ
さっそく見ていきましょう。
①：メニューアイコンを左から右へ
まずはスマホスライドメニューのアイコンを左から右に移動させる方法です。
下記の手順ですすめて下さい。
【 AFFINGER管理 】→【 メニュー 】→【 スマホスライドメニュー 】→【 メニューの位置 】→【 右 】→【 保存 】
１．AFFINGER管理画面をクリック
２．メニュー画面でスマホスライドメニューをクリック or 下にスクロール
３．【 メニューの位置 】で右を選択
４．１番下にある保存をクリック
個人的に右側の方が押しやすいと感じるので、当サイトもメニューアイコンは右側にしています。
②：スライドメニューアイコンのデザイン変更
スマホスライドメニューアイコンは、全６パターンのデザインがあります。下記の手順で変更していきましょう。
※【AFFINGER管理】～【スマホスライドメニュー】までは先ほどと同じ手順
【AFFINGER管理】→【メニュー】→【 スマホスライドメニュー 】→【 アイコンデザイン 】→【好きなデザイン選択 】→【保存】
１．スマホスライドメニューの【 アイコンデザイン 】で好きなデザインを選択。
この中から選んでいきます。
〇ノーマル 〇クール 〇リスト
⊡ アイコン下に「MENU」「CLOSE」を追加する
デザインは全６パターンあります。下の画像を参考に、好きなデザインを選んでください。
③：検索アイコンの追加
次は、読者がサイト内を検索できるように、検索アイコンを追加しましょう。手順は下記の通りです。
検索アイコン
【 AFFINGER管理 】→【メニュー】→【 スマホスライドメニュー 】→【 検索アイコン 】→【 スマホヘッダーに検索アイコンを追加する 】→【 保存 】→【 オーバーレイ or スライド選択 】→【 保存 】
１．検索アイコンで、「 スマホヘッダーに検索アイコンを追加する 」にチェック
※ここでいったん保存してください。 ( 保存後、オーバーレイ／スライドを選べます )
２．保存してから、オーバーレイ or スライドを選択
オーバーレイとスライドは、検索アイコンを押したとき、表示のされ方がちがいます。( 画像参照 )
３．選択後、保存をクリック
以上で検索アイコンの設置はおわりです。
筆者はよく読むブログの検索窓を乱用 (笑) するので、自分のサイトでもスマホヘッダーに検索アイコンを追加しています。ファンがつけば、検索窓からサイト内を回遊してくれます。
最後に：スマホスライドメニューカスタマイズの利点
ブログにきてくれる人の８割がスマホからです。
ちょっとこだわるだけで読者が見やすいメニューをつくれるので、当記事がカスタマイズの参考になれば幸いです(^^)
今回は以上です。
 です。 今回は、スマホスライドメニューのカスタマイズを紹介していきます。 ↓↓↓ スライドメニュー ( ハンバーガーメニ){kind=link}