ブログ ワードプレス

【アフィンガー4】スマホでメニューを固定する方法!|30分で完成

更新日:

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

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

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

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

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

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

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

30分で作って、アクセスアップ!

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

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

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

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

固定メニューの作り方

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

固定メニューの作り方

メニューに表示させたい固定ページやカテゴリーを追加。

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

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

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

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

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

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

固定メニューの作り方

「メニュー設定」の「スマホ用アコーディオンメニュー」から「スマートフォンメニューを表示しない」にチェック。

固定メニューの作り方

その少し下「スマホ用フッターメニューを表示する」にチェックをつけます。「SAVE」を忘れずに!

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

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

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

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

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

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

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

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

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

固定メニューの作り方

アイコンはここの「ナビゲーションラベル」で編集します。

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

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

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

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

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

  1. アイコンのHTMLタグをコピーして、ナビゲーションラベルに貼り付けます。
  2. 貼り付けたHTMLタグの後ろに <br/> と追記。
  3. <br/>の後ろにアイコンの名前を書きましょう。

要は、

アイコン

改行(<br/>

まっわすって誰よ?

と書くわけですね!

 

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

 

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

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

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

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

まとめ

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

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

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

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

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

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

-ブログ, ワードプレス

Copyright© zackut , 2019 All Rights Reserved Powered by AFFINGER5.