AFFINGER6でのスマホスライドメニュー設定方法を解説します。
基本的な機能はスマホでのメニューを表示する機能ですが、AFFINGER6では少し特殊な設定があります。
そんな少し変わったAFFINGERの専用スライドメニューについて以下の方におすすめです。
今回はAFFINGER6でのスマホスライドメニューのおすすめ設定方法と他テーマとの違いについて解説していきます。
AFFINGER6スマホスライドメニュー
AFFINGER6のスライドメニューは2種類あります。
それが「スライドメニュー」と「検索オーバーレイ」です。
スマホのスライドメニューとは、ハンバーガーメニューをタップすると出てくるこのメニューのことです。
ここには上記のように様々な項目を設置することができます。
そしてAFFINGER6には検索オーバーレイにも様々なウィジェットや画像などを配置することができます。
メニューと検索オーバーレイは位置を入れ替えることもできます。
上記はデモサイトの画像ですが、実際に当サイトでカスタマイズした内容を紹介してみます。
スライドメニューはあまり変更ありませんが、検索オーバーレイにはかなり要素が増えています。
下にスクロールするとタグなどもあるので、たくさん表示することができます。
AFFINGERは検索オーバーレイにも、要素を追加できるので表示領域が大きいのが特徴です。
それぞれの設定方法を解説していきます。設定場所がそれぞれ違うので、詳しくみていきましょう！
- スライドメニュー｜メニュー設定
- 検索オーバーレイ｜ウィジェット設定
どちらも同じ要素を設定することができるので、重複しないように気をつけましょう。
スライドメニュー設定
手順としてはメニューを作成してからAFFINGERの機能で表示させます。
メニューの作成はヘッダーやフッターと同じ方法ですので、簡単に設定できます。
各メニューの設定方法はこちら
メニューを作成する
「新しいメニューを作成しましょう」をクリックすれば新規メニューを作成することができます。
スマホスライドメニューを選択してメニューを作成します。
メニュー名をつけてメニューを作成しましょう。
メニューに表示させたいページを選択します。
スライドメニューは表示幅が狭めなので、基本的にリンクを表示するようにしましょう！
左側の「メニュー項目を追加」から追加するページにチェックを入れて「メニューに追加」をクリックすると追加することができます。
メニューを追加したら保存します。
アイコンを設定する
他メニュー同様にアイコンを設定することもできます。。
使用したいアイコンを探してコードをコピーします。
どのアイコンを使う場合でも同じ場所をコピーしてください。
先程の「外観」＞「メニュー」の設定へ戻ります。
ナビゲーションラベルのお問い合わせ前にコードを丸ごとペースとします。
このままメニューを保存しすれば設定完了です。
アイコンと文字を改行したい場合は<br/>を入れれば改行できます。
表示の設定をする
ここではアイコンのデザインやアイコン下に文字を追加したりすることができます。
また、メニューの位置を左右で変更することができます。
カラーを設定する
カスタマイザーでカラーの設定を変更できます。
ここで背景色やテキスト色を変更できるようになっています。
トップページに画像を使っている場合などは、カラーの調整をしておきましょう。
検索オーバーレイ設定
検索オーバーレイはウィジェットから編集することができます。
操作は他のウィジェットと変わりなくドラッグ&ドロップで編集していきましょう！
ウィジェットの編集
「検索メニュー（スライド / オーバーレイ）」に要素を追加していきます。
ウィジェットでは検索を入れないと、検索が入らなくなるので注意しましょう。
画像やブログパーツなど様々な要素が対応しているので、より読者にナビゲーションすることができます。
表示の設定をする
ここで検索の表示を「オーバーレイ」か「スライド」かを選択できます。
必ずオーバーレイを選択しておきましょう。
スライドはメニューと同じ表示方法になります。
表示領域が大きいオーバーレイがおすすめなので、ここで変更しておきましょう！
そして、検索メニューでも他のメニュー同様にリンクのみを追加する場合は、追加メニューをここで設定することができます。
カラーを設定する
カスタマイザーでカラーの設定を変更できます。
ここでテキスト色を変更できるようになっています。
背景は画像を設定することができます。
AFFINGER6で賢く設定
AFFINGER6は検索オーバーレイを上手に使えば他のサイトと大きく差をつけることができます。
検索は読者が何かを調べたい時に開くので、より調べたいことにたどり着けるように誘導してあげましょう。
画像や動画、アフィリエイトリンクなども上手に使うと成果が上がりやすいと思います。