AFFINGER6｜スマホミドルメニューの設定

AFFINGER6にはスマホ表示でも最上段にメニューを表示する機能があります。

表示場所的にも目につきやすく閲覧者を誘導できるので、使い勝手がいいメニューです。

こんな方におすすめ

スマホミドルメニューの設定方法
おすすめの表示コンテンツは？

今回はスマホミドルメニューの設定方法を解説します。

AFFINGER6スマホミドルメニュー

スマホミドルメニューは上記の赤枠の部分のことです。

トップページや階層ページにも表示されるので、ユーザーを誘導しやすくサイトを分かりやすく回遊することができます。

また、PCのヘッダーメニューと同様にアイコンや文字色、背景色も変更できるので、強調させたりと様々な使い方ができます。

設定方法

手順としてはメニューを作成してからAFFINGERの機能で表示させます。

メニューの作成はヘッダーやフッターと同じ方法ですので、簡単に設定できます。

各メニューの設定方法はこちら

メニューを作成する

「ダッシュボード」＞「外観」＞「メニュー」

「新しいメニューを作成しましょう」をクリックすれば新規メニューを作成することができます。

スマホミドルメニューを選択してメニューを作成します。

メニュー名をつけてメニューを作成しましょう。

スマホミドルメニューに表示させたいページを選択します。

おすすめはヘッダーメニューと同じですが、お問い合わせやプラバシーポリシーを設定しておきます。

基本的にスマホミドルメニューは2列での使用がおすすめです。（3列設定もできます）

左側の「メニュー項目を追加」から追加するページにチェックを入れて「メニューに追加」をクリックすると追加することができます。

メニューを追加したら保存します。

メニューを表示させる

メニューを実際に表示させていきます。

「AFFINGER管理」＞「メニュー」＞「その他のスマホメニュー」

「スマホミドルメニューを表示する」にチェックを入れます。

SAVEをすれば表示されるようになります。

その他にも「スマホミドルメニューを3列にする」や「ヘッダー画像に対しての位置」も設定することができます。

アイコンを設定

アイコンを設定していきます。

FontAwesome(Ver4.7)

使用したいアイコンを探してコードをコピーします。

どのアイコンを使う場合でも同じ場所をコピーしてください。

先程の「外観」＞「メニュー」の設定へ戻ります。

ナビゲーションラベルのお問い合わせ前にコードを丸ごとペースとします。

このままメニューを保存しすれば設定完了です。

アイコンと文字を改行したい場合は<br/>を入れれば改行できますが、ミドルメニューではおすすめしません

カラーを設定する

カスタマイザーでカラーの設定を変更できます。

「外観」＞「カスタマイズ」＞「メニュー」＞「スマホミドル・横列メニュー」

文字色と背景色をそれぞれ設定することができます。

文字色などを見やすく設定すると分かりやすくていい感じになります。

画像はデモサイトのトップ画に動画を挿入して文字色を通常のリンクの色から白に設定してみました。

より見やすくなったと思います。

自分のサイトでより見やすくなるように設定で調整してみてください。