
グローバルメニューを画面に固定すれば、どこからでもホームにアクセスできます。
回遊率が上がってアクセスアップにも繋がる便利な機能です。
ブログのアクセスの80%くらいが「スマホ」の時代です。
スマホ時代に合わせて、ブログもスマホ向けにカスタマイズしましょう。
当ブログもスマホで見ると、下にメニューが出てくるはずです。
こんな感じのメニューを作ってみましょう!
今回は「アフィンガー4」で「スマホで追尾するグローバルメニューの作り方」を紹介します。
30分で作って、アクセスアップ!
アフィンガー4でスマホ用メニューを作ろう
スマホ用のメニューは幅を小さくする必要があります。
そこで、パソコンで表示されるメニューと、スマホで表示されるメニューを別々に作りましょう。
まずはワードプレスの編集画面から「外観」→「メニュー」でメニューの編集画面へ。

「新規メニューの作成」から、適当にメニューの名前をつけて「メニューの作成」

「スマートフォンフッター用メニュー」を選ぶのを忘れずに!
最後に「メニューを保存」してスマホ用メニューの完成です。
スマホは画面が細いため、メニューの項目は多くても5つ程度にしましょう。
アフィンガー4のメニュー設定をしよう
先ほど作ったスマホ用のメニューが、ブログでどのように表示されるか設定します。
ワードプレスの管理画面から、「AFFINGER4管理」へ。


さあ、自分のスマホでブログを見てみましょう!
画面下にメニューが固定されているはずです。
ちなみに「スマホ用アコーディオンメニュー」は、ハンバーガー型のメニューのことなんですよ。
ハンバーガー型メニューの方がしっくりくるよね
アフィンガー4のメニューにアイコンをつけよう!
メニューは固定できたけど、なんか味気ない・・・
では、メニューのそれぞれの項目にアイコンをつけてみましょう!
各項目がわかりやすくなって、ポップな見た目になりますよ!
まずは「外観」→「メニュー」と進み、さっき作ったスマホ用メニューの編集画面に入ります。

アイコンはここの「ナビゲーションラベル」で編集します。
肝心のアイコンはFont AwesomeというサイトからHTMLタグをコピーして貼り付けるんです・・・
アフィンガー4では最新版のアイコンに対応していないみたいです。
少し古いアイコンが紹介されているサイトからお借りしましょう。
使いたいアイコンが見つかったら、
- アイコンのHTMLタグをコピーして、ナビゲーションラベルに貼り付けます。
- 貼り付けたHTMLタグの後ろに <br/> と追記。
- <br/>の後ろにアイコンの名前を書きましょう。
要は、
アイコン
改行(<br/>)
ガクマーケの井上って誰よ?
と書くわけですね!
これで終わりです。お疲れ様でした!
さて、最後にスマホで自分のブログをチェックしてみましょう。
どうですか?ちゃんとアイコンが表示されていますか?
文字化けしている場合は、アフィンガーに対応していないアイコンを使った可能性が高いです。
別のアイコンで試してみてください。
まとめ
スマホでグローバルメニューを固定する方法を紹介しました。
作り方をおさらいしますと、
- スマホ用のメニューを作る
- メニューがどうやって表示されるか設定する
- アイコンを設定する
の3ステップで完了です。
どこからでもホームやカテゴリー一覧へリンクできますので、回遊率がアップすると思います。
簡単なのに、ブログの見た目がかっこよくなりますよ!

「日本一変なキャリアの元公務員」
北海道在住のライターです。
olbb(株)取締役、ガクマーケティング代表
市役所と北海道庁職員を併任した後、WEBマーケターに転職。2年後に独立し、現在はライター&経営者をしています。
「働き方をもっと自由に、だけど堅実に」がモットー。
■もう少し詳しく
≫プロフィール・お仕事の実績
≫お問い合わせはコチラ