AFFINGER5【スマホ用フッターメニューを設置】カスタマイズも

AFFINGER5で、スマホ用フッターメニューを表示する方法の紹介です。

記事後半では、自分好みの表示にカスタマイズする方法も解説しています。

こんな人のお役に立てる記事です。

小豆

スマホでの閲覧時に、画面下にメニューが表示されるようにしたい。
他のAFFINGER5ブログで表示されているのを見たけど、あれってどうやるの？

AFFINGER5でスマホ用フッターメニューを表示する

AFFINGER5では、スマホでの閲覧時に画面下に任意のメニューを表示することができます。

実際の表示がこちら。

メニューの数やリンク先などは、自由に設定が可能です。

小豆

うん、やっぱりかっこいい！

確かに、見た目がいいよね。
でも、実はそれだけじゃないんだ。

大福

スマホ用ヘッダーメニューのメリット

スマホ用ヘッダーメニューを設置することで、以下のメリットがあります。

小豆

いい記事だったなぁ。
この人のブログ、もう少し読んでみたいかも。

スマホ用フッターメニューは、こんな時に最適。

ブログのTOPページや、任意の記事にスムーズにアクセスを誘導することができます。

これって、動画配信サービスなどでよくある「この作品を観た人はこんな作品も観ています」にちょっと似ていますね。

アクセスしやすい位置にそれがあることで、クリックしてもらえる効果を期待できそうです。

スマホ用フッターメニューの設定方法

スマホ用フッターメニューの設定方法は、実はちょっと複雑です。

というわけで、設定項目ごとに丁寧にわかりやすく解説していきます。

step
1メニューの設定

WordPressメニュー　→　外観　→　メニュー　→　メニューを編集

メニュー名を入力　→　メニューの位置を指定　→　メニューを作成

メニューのリンク先を選択　→　メニューに追加

選択するリンク先によって、「1記事に移動」もしくは「カテゴリー一覧ページに移動」するかが決まります。

それぞれの設定方法は、以下のとおりです。

step
2アイコンの挿入

Font Awesomeへ移動

任意のアイコンを選択　→　コードをコピー

ナビゲーションラベルにコードを貼り付け

step
3メニューの保存

スマートフォン用フッターメニューにチェック　→　メニューを保存

step
4表示設定

AFFINGER5管理　→　メニュー　→　その他のスマホ用メニュー　→　スマホ用フッターメニューを表示するにチェック　→　save

大福

お疲れ様でした。
これで、スマホ用フッターメニューの設定は終わりだよ。

カラー・アイコンサイズ・表示方法のカスタマイズ

スマホ用フッターメニューは、自分好みにカスタマイズが可能です。

カラー・アイコンサイズの変更

WordPressメニュー　→　外観　→　カスタマイズ　→　メニューのカラー設定　→　スマホフッターメニュー

アイコンサイズ：100％（デフォルト）	アイコンサイズ：150％

※画像はクリックで拡大できます

スクロール方法の変更

TOPへ戻るボタンを押したときの、挙動を変更します。

AFFINGER5管理　→　その他　→　ページ内スムーススクロールを使用するにチェック 　→　保存

まとめ：フッター用メニューで任意の記事への導線を作ろう

ブログへのアクセスの多くは、スマホからの閲覧です。

たとえば当ブログの場合、その割合は実に7割以上。

というわけで、スマホ用フッターメニューの効果は大きそうですね。

すべての記事から「任意の記事へのアクセスの導線」を作ることができます。

AFFINGER利用者向けオリジナル特典の販売

＼ AFFINGER6にも対応済み ／

AFFINGERをすでに利用しているユーザー向けの「カスタマイズ＆役立つテクニック」集です。

目的に合わせて、以下の2つを用意しました。

特典詳細ページへ移動する