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

AFFINGER5（アフィンガー５）でスマホ用フッター固定メニューを表示する方法を解説します。

ブログのスマホ用フッター固定メニューを使う目的は主に固定ファン作りです。

ブログは放っておいても固定ファンは増えません。

固定ファンを増やすことに成功すれば、SEOに関係なくブログのアクセス数を増やすことができます。

SNSやLINEへ登録してもらうことができれば、たまたまブログに訪れた読者をリピーターにすることができます。

ブログで固定読者を増やす施策をしているかしていないかで、将来的な固定ファンの獲得数が全く異なってきます。

ふなさん

アフィンガー５を使えば、むずかしいコードを書いたりする必要がなく、スマホ用固定フッターを表示することができるようになります。

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

スマホのフッター固定メニューとはこのようなメニューです。

ふなさん

スマホのフッター固定メニューを効果的に使うと、ブログのアクセス数が凄くわ変わってくるんですよね。

簡単にいうとリピート率が上がります。

１ユーザーが２ページ、３ページとブログ記事を読んでくれれば、ページセッション数というのが上がり、総PV数が上がります。

• 100人が２ページ読んでくれれば200PV
• 1000人が２ページ読んでくれれば2000PV
• １万人が２ページ読んでくれれば２万PV
• ５万人が２ページ読んでくれれば10万PV

このようにアクセス数は倍増するのです。

LINEやTwitterフォロワーなどを増やすことで、ブログ記事をみてもらう動機を増やすことができます。

固定読者を獲得する施策として、フッター固定メニューは必ず目に入るので非常に有効な方法です。

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

アフィンガーの公式サイトでもスマホ用フッターメニューの設定方法が解説されていますが、少しわかりにくいので詳しく解説していきます。

スマホ用フッターメニューの追加｜アフィンガー公式サイト

メニューを設定するのは簡単ですが、メニューの装飾が少し難易度が上がります。

ふなさん

メニュー数は３つぐらいがおすすめです

これで一応スマホ用フッター固定メニューが表示されるようになります。

WEBアイコンを装飾する

そのままだと、WEBアイコンが表示されているだけなので、色をつけたり大きさを変えます。

このブログの場合、以下のスタイルシートを入れてます。

#st-footermenubox ul.menu li .fa{
font-size:40px;
}

#st-footermenubox ul.menu li .fa-heart{
color: #f44336;
}
#st-footermenubox ul.menu li .fa-comments{
color: #39b900;
}
#st-footermenubox ul.menu li .fa-twitter{
color: #40a2f5;
}

これで一応、当ブログと同じようにスマホ用フッター固定メニューがひょうじされるようになります。

もっといろいろカスタムしたい人はサルワカというブログで詳しく丁寧に解説されているので参考にしてみてください。

【保存版】Font Awesomeの使い方：Webアイコンフォントを使おう｜サルワカ

WEBアイコンの使い方　FontAwesomeIcons

WEBアイコンの使い方を覚えるのが初心者の人には難しいかもしれません。

アフィンガー５ではFontAwesomeIconのバーション４まで対応していますが、その後のバージョンが使えない場合があります。
これにチェックを入れることで使えるWEBアイコンが増えます。

とはいえ、本当に表示されるかはコードを表示してみないとわかりません。

表示されないWEBアイコンもあります。

Font Awesome Free

公式サイトで文字コードを調べてコピペします。

よく使われるWEBアイコン一覧

※LINEはアフィンガーではうまく表示されません