AFFINGER5(アフィンガー5)でスマホ用フッター固定メニューを表示する方法を解説します。
ブログのスマホ用フッター固定メニューを使う目的は主に固定ファン作りです。
ブログは放っておいても固定ファンは増えません。
固定ファンを増やすことに成功すれば、SEOに関係なくブログのアクセス数を増やすことができます。
SNSやLINEへ登録してもらうことができれば、たまたまブログに訪れた読者をリピーターにすることができます。
ブログで固定読者を増やす施策をしているかしていないかで、将来的な固定ファンの獲得数が全く異なってきます。
目次
AFFINGER5でスマホ用フッター固定メニューを表示
スマホのフッター固定メニューとはこのようなメニューです。
簡単にいうとリピート率が上がります。
1ユーザーが2ページ、3ページとブログ記事を読んでくれれば、ページセッション数というのが上がり、総PV数が上がります。
- 100人が2ページ読んでくれれば200PV
- 1000人が2ページ読んでくれれば2000PV
- 1万人が2ページ読んでくれれば2万PV
- 5万人が2ページ読んでくれれば10万PV
このようにアクセス数は倍増するのです。
LINEやTwitterフォロワーなどを増やすことで、ブログ記事をみてもらう動機を増やすことができます。
固定読者を獲得する施策として、フッター固定メニューは必ず目に入るので非常に有効な方法です。
AFFINGER5でスマホ用フッター固定メニューを表示する手順
アフィンガーの公式サイトでもスマホ用フッターメニューの設定方法が解説されていますが、少しわかりにくいので詳しく解説していきます。
- スマホ用フッターメニューを設定
- メニューを装飾する
メニューを設定するのは簡単ですが、メニューの装飾が少し難易度が上がります。
外観 → メニュー →「スマホ用フッター」を設定
カスタムリンク設定例
<i class="fa fa-heart"></i><br />無料プレゼント
<i class="fa fa-comments"></i><br />LINE
<i class="fa fa-twitter"></i><br />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;
}
カスタマイズ → 「追加CSS」にコピペします。
これで一応、当ブログと同じようにスマホ用フッター固定メニューがひょうじされるようになります。
もっといろいろカスタムしたい人はサルワカというブログで詳しく丁寧に解説されているので参考にしてみてください。
【保存版】Font Awesomeの使い方:Webアイコンフォントを使おう|サルワカ
WEBアイコンの使い方 FontAwesomeIcons
WEBアイコンの使い方を覚えるのが初心者の人には難しいかもしれません。
AFFINGER5 → その他 → 「FontAwesomeIcon4.7.0」にチェックを入れる
アフィンガー5ではFontAwesomeIconのバーション4まで対応していますが、その後のバージョンが使えない場合があります。
これにチェックを入れることで使えるWEBアイコンが増えます。
とはいえ、本当に表示されるかはコードを表示してみないとわかりません。
表示されないWEBアイコンもあります。
公式サイトで文字コードを調べてコピペします。
よく使われるWEBアイコン一覧
WEBアイコン | 表示 | コード |
home | <i class="fa fa-home"></i> | |
<i class="fa fa-twitter"></i> | ||
<i class="fa fa-instagram"></i> | ||
chat | <i class="fa fa-comments"></i> | |
file | <i class="fa fa-file"></i> | |
user | <i class="fa fa-user"></i> |
※LINEはアフィンガーではうまく表示されません
-
-
【当ブログ限定】AFFINGER PACK3 特典付き購入リンク
2021/4/15
ブログアフィリエイト収入に必要な機能を詰め込んだWordPress有料テーマがAFFINGER PACK3です。 有料テーマの中では最上クラスです。 AFFINGER PACK3 特典付き購入リンク ...
-
-
AFFINGER無料版テーマ STINGER
2021/4/11
-
-
AFFINGER5 デザイン済みデータ設定・リセット方法
2021/4/11
-
-
AFFINGER6 レビュー!WordPressテーマ ACTION 購入方法
2021/4/14
目次AFFINGER6 アフィンガー6とは?AFFINGER6(アフィンガー&)購入・アップデート方法AFFINGER6 β アップデート情報AFFINGER6 β 使用レビュー(ブロックエデ ...
-
-
AFFINGERとは?購入手順&カスタマイズ方法 初心者向け【簡単です】
2021/4/14
AFFINGER5の使い方・カスタマイズ方法を初心者向けにわかりやすく解説しました。 簡単なので是非参考にしてください。 目次アフィンガー(AFFINGER)とは? AFFINGERレビューWordP ...