AFFINGER slide-menu customize

AFFINGER6 ブログ

【アフィンガー6】スマホスライドメニューのデザインをカスタマイズ

こんにちは。

Aoirolife運営者のあおいろ ( @ao_bloger ) です。

今回は、スマホスライドメニューのカスタマイズを紹介していきます。

↓↓↓

スライドメニュー ( ハンバーガーメニュー ) のデザインを変えていきます

スマホスライドメニューカスタマイズ

本記事で解決できるカスタマイズ

  • スライドメニューアイコンを左から右に移動
  • スライドメニューアイコンのデザイン変更 ( 全6パターン )
  • 検索窓アイコンを追加

AFFINGER6スマホスライドメニューのカスタマイズ

さっそく見ていきましょう。

①:メニューアイコンを左から右へ

まずはスマホスライドメニューのアイコンを左から右に移動させる方法です。

スマホスライドメニューアイコン右へ

下記の手順ですすめて下さい。

【 AFFINGER管理 】→【 メニュー 】→【 スマホスライドメニュー 】→【 メニューの位置 】→【 右 】→【 保存 】

1.AFFINGER管理画面をクリック

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

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

スマホスライドメニューの位置

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

これでメニューアイコンは右側になります。
あおいろ

個人的に右側の方が押しやすいと感じるので、当サイトもメニューアイコンは右側にしています。

②:スライドメニューアイコンのデザイン変更

スマホスライドメニューアイコンは、全6パターンのデザインがあります。下記の手順で変更していきましょう。

【AFFINGER管理】~【スマホスライドメニュー】までは先ほどと同じ手順

【AFFINGER管理】→【メニュー】→【 スマホスライドメニュー 】→【 アイコンデザイン 】→【好きなデザイン選択 】→【保存】

1.スマホスライドメニューの【 アイコンデザイン 】で好きなデザインを選択。

スマホスライドメニューアイコンデザイン

この中から選んでいきます。

ノーマル  クール  リスト

アイコン下に「MENU」「CLOSE」を追加する

デザインは全6パターンあります。下の画像を参考に、好きなデザインを選んでください。

スマホスライドメニューアイコンデザイン
スマホスライドメニューアイコンデザイン
当サイトは リスト + MENU をつかっています。
あおいろ

③:検索アイコンの追加

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

検索アイコン

【 AFFINGER管理 】→【メニュー】→【 スマホスライドメニュー 】→【 検索アイコン 】→【 スマホヘッダーに検索アイコンを追加する 】→【 保存 】→【 オーバーレイ or スライド選択 】→【 保存 】

1.検索アイコンで、「 スマホヘッダーに検索アイコンを追加する 」にチェック

※ここでいったん保存してください。 ( 保存後、オーバーレイ/スライドを選べます )

スマホヘッダーに検索アイコンを追加する

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

検索アイコンオーバーレイ スライド

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

検索アイコン オーバーレイ
検索アイコン スライド

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

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

当サイトはオーバーレイをつかっています。
あおいろ

筆者はよく読むブログの検索窓を乱用 (笑) するので、自分のサイトでもスマホヘッダーに検索アイコンを追加しています。ファンがつけば検索窓からサイト内を回遊してくれます。

最後に:スマホスライドメニューカスタマイズの利点

ブログにきてくれる人の8割がスマホからです。

ちょっとこだわるだけで読者が見やすいメニューをつくれるので、当記事がカスタマイズの参考になれば幸いです(^^)

今回は以上です。

-AFFINGER6, ブログ