【アフィンガー４】スマホでメニューを固定する方法！｜３０分で完成

グローバルメニューを画面に固定すれば、どこからでもホームにアクセスできます。

回遊率が上がってアクセスアップにも繋がる便利な機能です。

ブログのアクセスの８０％くらいが「スマホ」の時代です。

スマホ時代に合わせて、ブログもスマホ向けにカスタマイズしましょう。

当ブログもスマホで見ると、下にメニューが出てくるはずです。

こんな感じのメニューを作ってみましょう！

今回は「アフィンガー４」で「スマホで追尾するグローバルメニューの作り方」を紹介します。

３０分で作って、アクセスアップ！

アフィンガー４でスマホ用メニューを作ろう

スマホ用のメニューは幅を小さくする必要があります。

そこで、パソコンで表示されるメニューと、スマホで表示されるメニューを別々に作りましょう。

まずはワードプレスの編集画面から「外観」→「メニュー」でメニューの編集画面へ。

「スマートフォンフッター用メニュー」を選ぶのを忘れずに！

最後に「メニューを保存」してスマホ用メニューの完成です。

スマホは画面が細いため、メニューの項目は多くても５つ程度にしましょう。

アフィンガー４のメニュー設定をしよう

先ほど作ったスマホ用のメニューが、ブログでどのように表示されるか設定します。

ワードプレスの管理画面から、「AFFINGER4管理」へ。

さあ、自分のスマホでブログを見てみましょう！

画面下にメニューが固定されているはずです。

ちなみに「スマホ用アコーディオンメニュー」は、ハンバーガー型のメニューのことなんですよ。

ハンバーガー型メニューの方がしっくりくるよね

アフィンガー４のメニューにアイコンをつけよう！

メニューは固定できたけど、なんか味気ない・・・

では、メニューのそれぞれの項目にアイコンをつけてみましょう！

各項目がわかりやすくなって、ポップな見た目になりますよ！

まずは「外観」→「メニュー」と進み、さっき作ったスマホ用メニューの編集画面に入ります。

肝心のアイコンはFont AwesomeというサイトからHTMLタグをコピーして貼り付けるんです・・・

アフィンガー４では最新版のアイコンに対応していないみたいです。

少し古いアイコンが紹介されているサイトからお借りしましょう。

Webフォント「Font Awesome4」の使い方

使いたいアイコンが見つかったら、

 

これで終わりです。お疲れ様でした！

 

さて、最後にスマホで自分のブログをチェックしてみましょう。

どうですか？ちゃんとアイコンが表示されていますか？

文字化けしている場合は、アフィンガーに対応していないアイコンを使った可能性が高いです。

別のアイコンで試してみてください。

まとめ

スマホでグローバルメニューを固定する方法を紹介しました。

作り方をおさらいしますと、

1. スマホ用のメニューを作る
2. メニューがどうやって表示されるか設定する
3. アイコンを設定する

の３ステップで完了です。

どこからでもホームやカテゴリー一覧へリンクできますので、回遊率がアップすると思います。

簡単なのに、ブログの見た目がかっこよくなりますよ！