カスタマイズ

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

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

こんにちは。WordPressテーマ研究家SHINです。

スマホユーザーへ訴求する重要なポジションとも言えるのがフッターメニューですよね。

 

スマホフッターメニューと言えば、パソコンで言う「CTA」のような存在。ホームリンクや各種SNSフォローやシェア、人気記事、おすすめ記事、広告リンク、カテゴリーメニュー、Feedly、読者登録などなど、目的別にスマホユーザーへ訴求できます。

 

今回AFFINGER5でフッターメニューを設置する手順と方法をご紹介します。

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

 

スマホ用フッターメニューを作成する2つの注意点

スマホフッターメニューは、ユーザーへ誘導できるメニューとして効果的な反面、注意する点も確認しておきましょう。

 

1.設置するメニューは4つまで設置が適当

フッターメニューは多く設置すると・・・

アイコンや文字が小さくなりメニューが見えづらくなる

メニューが多い=選択肢が広くクリック率が下がる

メニューひとつひとつの「価値」が下がる

逆を言えば、フッターメニューが少ないほど見えやすい・クリック率が上がる・メニュー価値が上がりま

 

メニューは4つまでに抑えて必要最低限の設置を心がけましょう。

 

2.フッターメニューはユーザーに一番行動して欲しいものだけ設置する

記事を多く読んでもらいたい(PVアップを目的)なら、「人気記事」「おすすめ記事」などのメニューを設置すれば効果的ですし、フォロワーを増やしたい(Twitter、Facebookなど)なら、各SNSアカウントページを設置すると効果的ですよね。

アレもコレも!とメニューを設置すると訪問ユーザーは迷ってしまい、結果的に何もしないでサイトを離脱してしまう確率が上がります

 

厳選に厳選したメニューだけを設置するようにしましょう。

 

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

ではスマホメニューを作っていきましょう。

 

step
1
WordPressダッシュボード画面より「外観」>「メニュー」に進み、メニュー画面で「新しいメニューを作成しましょう。」のテキストリンクをクリックします。

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

 

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

 

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

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

 

 

ここから、僕が実装しているフッター固定メニューを紹介していきます。

1.ホームメニューを追加

ホームメニューは、サイトトップページへ飛ぶリンクメニューですね。

 

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

スマホフッターメニュー作成8-min

SHIN
「ホーム」はたった2ステップで追加できます♪

 

2.Twitterの「Follow」メニューを追加

Twitterを設置する場合、「Twitterアイコン」と「Followリンク」が必要になるので、AFFINGER5が対応している外部サイト「fontawesome v4.7」を利用していきます。

 

fontawesome v4.7

注意ポイント

AFFINGER5では、最新版「fontawesome v5」にまだ対応していないので、「fontawesome v4.7」を使いましょう。

 

step
1
早速「fontawesome v4.7」へアクセスし、グローバルメニューにある「Icons」をクリックします

スマホフッターメニュー作成9-min

 

step
2
アイコンサーチ枠に「Twitter」と入力すると、下にTwitterアイコンが登場しますので、クリックしましょう

スマホフッターメニュー作成10-min

 

step
3
このページにTwitterアイコンを表示させるためのコードが取得できます。ちなみに、他のアイコンも同じ手順でコードを取得できます。

スマホフッターメニュー作成11-min

このコードを取得したら、WordPressメニュー作成に戻ります。

 

step
4
カスタムリンクを開き、fontawesome v4.7で取得したコードを「リンク文字列」へ入力し、あなたのTwitterフォローURLを「URL」へ入力して、「メニューに追加」をクリックします

スマホフッターメニュー作成12-min

参考

URL≫ https://twitter.com/intent/follow?screen_name=WPThemeNavi(あなたのTwitterアカウント)

リンク文字列≫ <i class="fa fa-twitter" aria-hidden="true"></i><br/>(改行させるコード)Follow(表示する文字)

SHIN
アイコンとTwitterフォローそれぞれのコードが必要なので、ちょっと手こずりますけどね;

このコードをTwitterアカウントだけ差し替えれば、コピペで使えるのでぜひ活用してください♪

 

3.ページトップへ飛ぶメニューを追加

ページトップへ一気にスクロールする便利なメニューです。

 

step
1
カスタムリンクを開いて、URLには「#wrapper」と入力。リンク文字列は、fontawesomeで「」(角度倍増)を選んで入力しています

スマホフッターメニュー作成13-min

参考

URL≫ #wrapper

リンク文字列≫ <i class="fa fa-angle-double-up" aria-hidden="true"></i><br/>(改行させるコード)TOP(表示する文字)

SHIN
Twitterフォローメニューが設置できれば、ここはある程度慣れたもんですよね♪

 

これで、スマホフッター固定メニューが出来ました。最後にAFFINGER5管理で、メニューを表示する設定をしていきます。と言ってもチャチャっと簡単に出来ます♪

 

スマホフッター固定メニュー表示設定(AFFINER5)

WordPressダッシュボードから「AFFINGER5 管理」に入って、2箇所にチェックを入れていきます。

 

step
1
AFFINGER5管理メニューの「メニュー」に入り、下の方に「スマホ用フッターメニューを表示する」にチェックを入れてsaveします

スマホフッターメニュー作成14-min

 

step
2
AFFINGER5管理メニューの「その他」に入り、その他の設定内にある「ページ内スムーススクロールを使用する」にチェックを入れて、一番下「保存」をクリックします

スマホフッターメニュー作成15-min

 

この2点の設定を完了すれば、スマホフッターに固定メニューが表示されます。チェックしてみましょう♪

では、ちょっとカスタマイズできるワザを紹介していきます。

 

フッターメニューカスタマイズ集

1.フッターメニュー文字色と背景色を変える

めちゃくちゃ簡単に変更できます。と言うか、こういったかゆいところまで簡単にカスタマイズできるAFFINGER5は・・神!!

 

WordPressダッシュボードから「外観」>「カスタマイズ」に進み、「メニューのカラー設定」>「スマホフッターメニュー」と進めば、テキストの文字色と背景色を自由に変更できます。

スマホフッターメニューカスタマイズ-min

 

2.フッターメニューのアイコンとテキストフォントのサイズを変える

AFFINGER5のデフォルトのフッターメニュー「アイコンサイズ」と「フォントサイズ」が小さいなぁ・・って思いませんでしたか?このサイズも、簡単に変更可能です。

注意ポイント

簡単とは言えども「style.css」のコードを変更するので、あらかじめバックアップを取っておくorCSSコードをマルッとコピペしておくか、対策を取ってから実施しましょう。

 

step
1
WordPressダッシュボードから「外観」>「テーマエディター」に進みます

 

step
2
「style.css」にある「スマホフッターメニュー」の下にあるコードpxを変更するだけです

フォントサイズ変更(列5877~)

#st-footermenubox ul.menu li{
display:table-cell;
vertical-align:middle;
text-align:center;
font-size:15px;
}

アイコンサイズ変更(列5884~)

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

 

ちなみにデフォルトサイズは、フォントもアイコンも「13px」です。僕は、上にある「フォント15px」「アイコン18px」に変更。画像で説明すると・・・左側が変更前、右側が変更後。

変更前-min変更後-min

 

右側のサイズの方が見やすいですよね。もちろん好みはありますけど、訪問ユーザーを考えたサイズへ簡単に変更できますので、ぜひ試してみてください。

 

3.メニューアイコンを動くアニメーションにする

フッターメニューアイコンに、動きを付けた「アニメーション」にすることもできます。

こんな感じ →    

アニメーションで気を引くケースもあるし、女性なら可愛らしく表示したいってときにアクセントになりますよね。設定は簡単です。

 

step
1
まずアニメーションにしたいメニューアイコンを選びましょう。

fontawesome v4.7

 

step
2
メニューアイコンが決まったら、表示されたHMTLコードをコピーしておき、メモ帳などにペーストしておきます。

スマホフッターメニュー作成11-min

step
3
上の基本HTMLコードに、以下アニメーションごと赤字部分のコードを追加して「ナビゲーションラベル」にペーストすれば出来上がり。

 ≫ <i class="fa fa-snowflake-o faa-wrench animated" aria-hidden="true"></i>

 ≫ <i class="fa fa-snowflake-o faa-ring animated" aria-hidden="true"></i>

 ≫ <i class="fa fa-snowflake-o faa-horizontal animated" aria-hidden="true"></i>

 ≫ <i class="fa fa-snowflake-o faa-vertical animated" aria-hidden="true"></i>

 ≫ <i class="fa fa-snowflake-o faa-flash animated" aria-hidden="true"></i>

 ≫ <i class="fa fa-snowflake-o faa-bounce animated" aria-hidden="true"></i>

 ≫ <i class="fa fa-snowflake-o faa-spin animated" aria-hidden="true"></i>

 ≫ <i class="fa fa-snowflake-o faa-float animated" aria-hidden="true"></i>

 ≫ <i class="fa fa-snowflake-o faa-pulse animated" aria-hidden="true"></i>

 ≫ <i class="fa fa-snowflake-o faa-shake animated" aria-hidden="true"></i>

 ≫ <i class="fa fa-snowflake-o faa-tada animated" aria-hidden="true"></i>

 ≫ <i class="fa fa-snowflake-o faa-passing animated" aria-hidden="true"></i>

 ≫ <i class="fa fa-snowflake-o faa-passing-reverse animated" aria-hidden="true"></i>

 ≫ <i class="fa fa-snowflake-o faa-burst animated" aria-hidden="true"></i>

アイコンに合わせたアニメーションを選んでみてください。

 

まとめ

昨今からスマホユーザーとパソコンユーザーが、逆転していく時代になってきているので、スマホユーザー向けのユーザビリティを考えていかないといけませんよね。

 

そのひとつの「スマホフッターメニュー」は、記事が多い少ない、初心者上級者関係なく設置した方が絶対いいです。

サイトに合わせたフッターメニューを設置しましょう!

ではまた(◎´▽`)ノシ

AFFINGER5カスタマイズ記事

AFFINGER5,フォントカスタマイズ
【AFFINGER5】フォントカスタマイズでイメージをガラッと変えてみよう!

こんにちは、SHINでございます♪   今回、AFFINGER5のフォントデザインをガラッと変える2つの方法を解説していきます。   デフォルトでも十分ですけど、もっとポップにした ...

続きを見る

AFFINGER5
【AFFINGER5】ブログサイトの背景画像をオシャレに変える方法

こんにちは!SHINです♪ 今回は、ブログサイトの背景画像をオシャレに変えてみよう!というテーマでお話していきます♪   ただ注意してほしいのは、背景画像で大きくイメージが変わるということ。 ...

続きを見る

【AFFINGER5】ファビコンとロゴ画像をかっこいいデザインに設定しよう!

Googleより、2019年5月22日公開で「モバイル端末の検索結果表示にファビコン(アイコン)を表示する」という変更が発表されましたね。 こんにちは。WordPressテーマ研究家SHINです。 & ...

続きを見る

【AFFINGER5】記事下にアドセンス横並び+リンク広告をセット表示する方法
【AFFINGER5】記事下にアドセンス横並びとリンク広告をセット表示する方法

こんにちは。SHINです♪   Googleアドセンス広告の設置方法に、PHPやカスタムCSSにコードを記述する方法がありますけど、正直・・・ めんどくさい! ややこしい! むずかしい! わ ...

続きを見る

【AFFINGER5】カエレバ・ヨメレバを実装!カスタマイズデザイン6選
【2019最新版】カエレバ・ヨメレバをコピペで実装するカスタマイズ5選

こんにちは。WordPessテーマ研究家SHINです。 カエレバ&ヨメレバは、Amazonや楽天市場、Yahoo!ショッピングなど複数サイトの商品アフィリエイトリンクを、ボタンに設置して告知できるツー ...

続きを見る

【AFFINGER5】コレは使える!クリップメモのアイコンカスタマイズ大特集
【AFFINGER5】コレは使える!クリップメモのアイコンカスタマイズ集

"AFFINGER5生活"も、かれこれ3ヶ月ほど。相変わらずの使いやすさに、ほれぼれ感が全く薄れないSHINです。   今回は、タグパーツの一つ「クリップメモ」のアイコンを、いろんなバリエー ...

続きを見る

alt=【AFFINGER5】テキストやアイコン画像をアニメーション化できる機能紹介
【AFFINGER5】テキストやアイコン画像をアニメーション化できる機能紹介

AFFINGER5に実装されている機能に、テキストやアイコン、画像を簡単にアニメーションにできる機能をご紹介していきます。 こんにちは。WordPressテーマ研究家SHINです。   AF ...

続きを見る

  • この記事を書いた人
  • 最新記事
SHIN

SHIN

WordPressテーマ研究家のSHINです。WPテーマとコーヒーをこよなく愛し、日々マウスをカチカチ!キーボードをパチパチ!しながら研究をしている人。

-カスタマイズ
-

Copyright© WordPress theme NAVI , 2019 All Rights Reserved Powered by AFFINGER5.