AFFINGER5

アフィンガー5でスマホのフッターに固定メニューを表示させる方法

スマホのフッターに固定メニューを表示させたいのですが、アフィンガー5でもできますか?やり方を教えてください。

といった悩みにお答えします。

 本記事の内容

  • スマホのフッターに固定ニューを表示する方法
  • フォントとアイコンサイズを変更する方法
  • スマホのフッターに固定メニューを表示する際の注意点2つ

 本記事の信頼性


Ryota(@ryotablogger

アフィンガー5では、スマホのフッターに固定メニューを表示させることができます。

とはいえ、「アフィンガー5でスマホのフッターに固定メニューを表示させる方法を知りたい!」「固定メニューを表示させてPV数を上げたい!」と思っている方は多いのではないでしょうか?

今回は、スマホのフッターに固定メニューを表示させる方法について解説していきます。

本記事を読むことで、アフィンガー5でスマホのフッターに固定メニューを表示させることができるようになります。

そうすることで、スマホユーザーに対してもユーザビリティの高いサイト設計ができます。

スマホのフッターに固定メニューを設置するだけでPV数のUPにも繋がるから、まだ設定していない方は是非参考にしてみてください!
りょーた

スマホのフッターに固定メニューを表示する方法

アフィンガー5でスマホのフッターに固定メニューを表示させる手順は以下になります。

  1. メニューを作成する
  2. メニューを設定する
  3. メニューの色を変える
  4. 表示設定をする

1つずつ順番に解説していきます。

手順①:メニューを作成する

まずは、固定して表示させるメニューを作成していきます。

WordPress管理画面より、「外観」「メニュー」をクリックしてください。

すると、上記の画面になるので、右上にある「新しいメニューを作成しましょう」をクリックしてください。

続いて、メニュー名を入力してください。今回は分かりやすく「スマホ用フッター固定メニュー」と入力しておきましょう。

メニュー名を入力したら、「スマートフォンフッター用メニュー」または「スマホフッターメニュー」にチェックを入れ、「メニューを保存」をクリックしてください。

手順②:メニューを設定する

次に、表示させるメニューを設定していきます。

ちなみに僕は以下の4つを設定しているのですが、5つ以上になると、文字が小さすぎて逆に見にくくなってしまうので、1~4の間で設定するのがおすすめです。

 当ブログの設定メニュー4つ

  • HOME
  • AFFINGER5
  • Twitter
  • TOP

当ブログの設定を参考に進めていきます。

まずは「カスタムリンク」をクリックし、以下のように入力してください。

  • URL:https://example.com(example.comを変更)
  • リンク文字列:<i class="fa fa-home" aria-hidden="true"></i><br>HOME

上記を入力したら、「メニューに追加」をクリックしましょう。

アイコンを変更したい場合

ちなみに、アイコンを変更したい場合には「FontAwesome v4.7」にアクセスし、「Icons」をクリックすれば全アイコンが表示されるので、使いたいアイコンをクリックし、表示されている「fa-rocket」をリンク文字列の「fa-home」の部分に書き換えればアイコンを変更することができます。

注意:「fa-home」の前にある「fa」を消してしまうと正しく表示されないのでご注意ください。

また、AFFINGER6(ACTION)にアップデートしている場合には、「AFFINGER5 管理」「その他の設定」「FontAwesomeIcons4.7.0の読み込み」にチェックを入れてください。

これで1つ目が完成です。

次に「カテゴリー」をクリックしてください。

その中にある「AFFINGER5」(当ブログの場合)をクリックし「メニューに追加」をクリックしましょう。

追加されたメニューを開いて、以下のように入力してください。

  • ナビゲーションラベル:<i class="fa fa-wordpress" aria-hidden="true"></i><br>AFFINGER5

これで2つ目が完了です。

 

次に「カスタムリンク」をクリックし、以下のように入力してください。

  • URL:https://twitter.com/アカウント名(アカウント名を変更)
  • リンク文字列:<i class="fa fa-twitter" aria-hidden="true"></i><br>Twitter

上記を入力したら、「メニューに追加」をクリックしましょう。

これで3つ目が完了です。

 

最後に「カスタムリンク」をクリックし、以下のように入力してください。

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

これで4つ目が完了です。

スムーススクロールにする場合

TOPのボタンを押したときにスムーススクロール(滑らかに移動)にしたい場合には、以下の手順で設定してください。

WordPress管理画面より、「AFFINGER 管理」「その他」「ページ内スムーススクロールを使用する」にチェックを入れ、「保存」をクリックすれば完了です。

ここまでできたら、最後に「メニューを保存」をクリックすれば完了です。

手順③:メニューの色を変える

最後に、固定メニューの色を変更していきます。

WordPress管理画面より、「外観」「カスタマイズ」をクリック。

上記の画面になるので、「メニューのカラー設定」「スマホフッターメニュー」で、以下の項目をお好きな色に変更しましょう。

  • 文字色:テキストとアイコンの色
  • 背景色:メニューの背景色

何色にしようかなという方は「原色大辞典」を参考にしてみてください。

色の変更が終わったら「公開」をクリックして完了です。

手順④:表示設定をする

最後に作成したメニューが表示されるように設定していきます。

WordPress管理画面より、「AFFINGER 管理」「メニュー」「その他のスマホ用メニュー」のをクリックしてください。

下にスクロールするので、「スマホフッターメニューを表示する」にチェックを入れてください。

最後に「Save」をクリックすれば完了です。

お疲れ様です!これでスマホのフッターに固定メニューを表示させることができましたね!
りょーた

フォントとアイコンサイズを変更する方法

フォントとアイコンサイズを変更する方法

人によってはフォントとアイコンのサイズが小さくて見にくいと思う方もいると思うので、2つのサイズを変更する方法も解説します。

注意:必ず変更前にはバックアップを取っておきましょう。

 

WordPress管理画面より、「外観」「テーマの編集」をクリックしてください。

 

編集するテーマを選択を「AFFINGER(親テーマ)」に変更し、「選択」をクリックしましょう。

 

親テーマに変更できたら、テーマファイルの中にある「style.css」をクリック

 

探すのが面倒という方は、子テーマの「style.css」に以下のコードを記載し、「任意の数値」を変更すればOKです。(注意:アイコンとテキストを別の大きさにすることはできません。)

 html
#st-footermenubox ul.menu li{
	display:table-cell;
	vertical-align:middle;
	text-align:center;
	font-size:任意の数値px;
}
メニューが4つだったら17pxぐらいがおすすめです!
りょーた

スマホのフッターに固定メニューを表示する際の注意点2つ

スマホのフッターに固定メニューを表示する際の注意点2つ

スマホのフッターに固定メニューを表示する際には、以下の2つの注意点があります。

  1. メニューは多くても最大4つ
  2. スマホのTOPへ戻るボタンが非表示になる

1つずつ解説していきます。

注意点①:メニューは多くても最大4つ

メニューの数は多くても最大4つまでにしておきましょう。

スマホのフッターに固定メニューを表示することで、CTRが向上するのですが、メニューが多いと逆に迷ったり、文字が小さすぎて見にくいといったことにもなりかねません。

そうならないように、自分が見てほしいものだけを厳選して表示させるようにしましょう。

自分の記事で力を入れているカテゴリーやまとめページなんかを設置すればPV数の向上が見込めるのでおすすめです。

収益につながるような記事を設置してもいいですが、あからさまだとかえって警戒心が高くなってしまうので気を付けましょう!
りょーた

注意点②:スマホのTOPへ戻るボタンが非表示になる

スマホのフッターに固定メニューを表示させると、自動的に「TOPへ戻るボタン」が非表示となります。

例えば、「一番下まで読んだけどもう一度読み返したい」といった場合に、自分でスクロールしなくてはいけないのでかなり面倒です。

そうなってしまうと逆に利便性が悪くなってしまい、離脱率が増えてしまう可能性も高くなります。

そうならないように、当記事でも紹介した「TOP」も作成しておくことがベストといえます。

読者に対してちょっとでも面倒と思われないようなサイト設計が重要です!
りょーた

まとめ:アフィンガー5ならスマホのフッターに固定メニューを設置することもできる!

まとめ:アフィンガー5ならスマホのフッターに固定メニューを設置することもできる!

今回は、アフィンガー5でスマホのフッターに固定メニューを表示させる方法といった内容を解説しました。

もう一度おさらいをすると、以下の手順でスマホのフッターに固定メニューを表示させることができます。

 スマホのフッターに固定メニューを表示させる手順

  1. メニューを作成する
  2. メニューを設定する
  3. メニューの色を変える
  4. 表示設定をする

アフィンガー5ならスマホユーザーに対しても、快適に使えるような設定を簡単にすることができます。

ただSEOに強いだけでなくユーザビリティにも特化しているので、まだスマホのフッターに固定メニューを設定していない方は、是非参考にしてみてください。

-AFFINGER5