AFFINGER

【AFFINGER5】スマホフッターに固定メニューを設置する方法

2020年4月13日

AFFINGER5 スマホフッター 設置方法

 

女性
スマホフッターにメニューバーがあるサイトがあるけど、あれはどうやるの?

こんな悩みにお答えします。

 

稼ぐことに特化したWordPressテーマ「AFFINGER5(アフィンガー)」。

 

今回はスマホの画面下に「固定メニュー」を設置する方法についてご紹介します。

スマホで見られる方が多いかと思いますので、手を入れていると離脱率を下げられたり、ホームリンクや各種SNSフォローやシェア、人気記事、おすすめ記事、広告リンク、カテゴリーメニュー、Feedly、読者登録などなど、目的別にスマホユーザーへ誘導をすることも可能ですよ!

WordPressにある程度慣れている方なら、5分もあれば設置できますので順番にやっていきましょう。

 

まだAFFINGER5を導入していない人はこちらもおすすめです。

[fa class=fa-angle-double-right]有料テーマ「AFFINGER5」を初心者に向けて徹底解説する

 

スマホ用フッター固定メニューとは

青い部分がスマホ用フッターです

スマホ フッター

スクロールをした際に、このメニューバーを表示することで、サイト推しであったり、Twitterなど
プッシュすることが可能です。

注意ポイント

注意点が2つあります

  1. 設置するメニューは4つまで設置が適当
    フッターメニューは多く設置すると・・・
    アイコンや文字が小さくなりメニューが見えづらくなる
    メニューが多い=選択肢が広くクリック率が下がる
    メニューひとつひとつの「価値」が下がる逆を言えば、フッターメニューが少ないほど見えやすい・クリック率が上がる・メニュー価値が上がります。
  2. フッターメニューはユーザーに一番行動して欲しいものだけ設置する
    記事を多く読んでもらいたい(PVアップを目的)なら、「人気記事」「おすすめ記事」などのメニューを設置すれば効果的ですし、フォロワーを増やしたい(Twitter、Facebookなど)なら、各SNSアカウントページを設置すると効果的ですね。ただ、アレもコレも!と様座ななメニューを設置すると訪問ユーザーは迷ってしまい、結果的に何もしないでサイトを離脱してしまう確率が上がります。厳選に厳選したメニューだけを設置するのがおすすめです。

スマホ用フッター固定メニューの作り方

step
1
WordPress管理画面>外観>メニューから、「新しいメニューを作成しましょう。」のテキストリンクをクリック。

フッターメニュー作成

step
2
「メニュー名」を記入して一度保存、メニュー設定は一番下「スマートフォン用フッターメニュー」にチェックし、「メニューを保存」をクリック

スマホ用フッターメニュー作成

step
3
スマホフッターへ設置するメニューを決めます。メニューは「固定ページ」「投稿ページ」「カスタム」「カテゴリー」から選べます。

メニュー 投稿カテゴリーメニュー 固定ページ メニュー カスタムリンク

 

RYO'S NOTEのフッターメニュー

以下4つです。

  • HOME
  • AFFINGER
  • Twitter
  • TOP

やり方は基本共通です。(HOMEを例に記載します。他の作成方法は補足しているのを参考にしてください)

step
1
固定ページタブを開き、全て表示タブから「ホーム」をチェックして「メニューに追加」します。

メニュー ホーム追加

step
2
アイコンを加えるために「fontawesome v4.7」へアクセスし、グローバルメニューにある「Icons」をクリックします

fontawesome

[fa class=fa-angle-double-right]「fontawesome v4.7」へアクセス

step
3
アイコンサーチ枠に「HOME」と入力すると、下にHOMEに関連するアイコンが登場しますので、クリックします

fontawesome home

step
4
HOMEアイコンを表示させるためのコードが取得できます。他のアイコンも同様の手順で行います。

fontawesome コード

ここまできたらステップ1の画面に戻ります。

step
5
カスタムリンクを開き、fontawesome v4.7で取得したコードを「リンク文字列」へ入力し<br>「表示したい文字」を入れて、「メニューに追加」をクリックします

ナビゲーションラベル

参考

[fa class=fa-exclamation-circle] AFFINGER「<i class="fa fa-rss" aria-hidden="true"></i><br>AFFINGER」
[fa class=fa-exclamation-circle] Twitter「<i class="fa fa-twitter" aria-hidden="true"></i><br/>Twitter」
[fa class=fa-exclamation-circle] TOP「<i class="fa fa-angle-double-up" aria-hidden="true"></i><br/>TOP」

ポイント

TOPの作成は下記画像を参考にしてください

メニュー TOP

  • URL : #wrapper
  • ナビゲーションラベル : <i class="fa fa-angle-double-up" aria-hidden="true"></i><br/>TOP

 

これで、スマホフッター固定メニューが完成です。

このできたものを最後にAFFINGER5管理で設定すれば終わりです!あとちょっと!

 

AFFINER5(アフィンガー)でスマホフッター固定メニュー表示設定をする

WordPress管理画面>AFFINGER5管理画面>メニュー

下の方にある「スマホ用フッターメニューを表示する」にチェックを入れ、「save」をクリック。

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

 

WordPress管理画面>AFFINGER5管理画面>その他

次に、「ページ内スムーススクロールを使用する」にチェックを入れ、「保存」をクリック。

ページ内スムーススクロールを使用する

 

以上で、スマホ用固定フッターの完成\ バンザイ /

 

まとめ:AFFINGER5なら簡単にスマホ用フッターの設置ができる!

以上、AFFINGER5でスマホフッターに固定メニューを設置する方法をご紹介してきました。

固定メニューの作り方と、アイコンの表示の仕方を覚えられれば多くの場面で活用できます。

アイコンは記事内にも入れられますし、もちろんヘッダーメニュー内にも入れることができ、サイトの幅を広げられますね。

 

AFFINGER5ではこういった機能を標準として搭載している稼ぐためのテーマです。

導入したものの使いこなせていないのは損してます。

AFFINGER5のカスタマイズに関してはこちらがおすすめです。

[fa class=fa-angle-double-right]AFFINGER5のカスタマイズ・CSS一覧

 

まだ、AFFINGER5を導入していない人はこちらもおすすめです。

[fa class=fa-angle-double-right]有料テーマ「AFFINGER5」を初心者に向けて徹底解説する

AFFINGER5の詳細はこちら

稼ぐに特化したWordPressテーマ!

 

今回は以上です。

-AFFINGER