このブログでも導入している「スマホサイドメニュー」、Affinger6の機能としては「スマホスライドメニュー」として実装されている。
ワンタップでメニューを呼び出せるので、画面の小さいスマホでは絶対に合った方がいい機能だ。
この記事では「スマホスライドメニュー」の作り方やデザイン設定について解説する。
スマホスライドメニューとは
スマホスライドメニューを設定すると、ブログの右上に「MENU」が表示されるようになる。
「MENU」をタップすると次のようにカテゴリーがスライドして出てくる。
スライドメニューがあるととても便利なのでぜひ作成してほしい。
スマホスライドメニューの作成方法
まずはスライドメニューを作成していく。
事前にカテゴリーが作成できていれば、作るのはとても簡単だ。
管理画面＞メニュー＞新しいメニュー作成＞スマホスライドメニューにチェック＞メニューを作成
※メニュー名は任意。ここではスマホスライドメニュー。
「カテゴリー」から好きなカテゴリーを選択＞メニューに追加
これで好きなカテゴリーがスマホスライドメニューに表示されるようになります。
スライドメニューのデザイン変更
続いてスマホスライドメニューの文字や背景の色を変更します。
管理画面＞カスタマイズ＞各メニュー設定＞スマホスライドメニュー
スライドメニューのデザイン変更画面に変わったら、スマホを見ながら色合いを決定していく。
ブログのテーマカラーが決まっていなければ、「スライドメニューアイコン色」のみ黒色にして、他はデフォルトで良いだろう。
AFFINGER設定
続いてAFFINGER独自の設定を行う。
管理画面＞AFFINGER管理＞AFFINGER管理＞メニュー＞スマホスライドメニュー
枠に囲った部分がスライドメニューの設定項目になる。
実際にスマホを見ながら設定を変えて自分のサイトに合うデザインを探してみてほしい。
メニューの位置と検索アイコン
メニューの位置は右側の方がタップし易いので、このブログでは「右」にしている。
また、検索アイコンはあると利用者に便利なので表示している。
スマホスライドメニューの作成は簡単
以上がスマホスライドメニューの作成方法だ。
「AFFINGER６」ではとても簡単な設定で作成できるので、まだ作っていない人は是非設定してみてほしい。
