グローバルナビゲーションメニューにアイコンを表示する方法

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

グローバルナビゲーションメニューの役割

サイトにとって、グローバルナビゲーションメニューとは訪問者がサイト内を巡回するときの道案内役になると言えます。

そのサイトがどういったコンセプトなのかとか、どこにどんな情報が書いてあるのかの案内であるべきですよね。あるいは訪問者にはまずここのページは見てもらいたいなというようなページへ誘導するとか。

なので初見でもパっと目を引くようになっているとより役割を果たしてくれます

当サイトではご覧になってもわかるように、アイコンをつけることで目を引くように工夫をしていますが、複数の方からこのやり方を教えてほしいという要望をいただきましたので、ご紹介します。

※ Simplicity2のテーマに対してバックカラーもカスタマイズしていますが、これはまた次回にでもご紹介しようと思います。

プラグイン Font Awesome 4 Menus をインストールする

まずはアイコン表示のために使うプラグインのFont Awesome 4 Menusをインストールして有効化します。

WordPress内ダッシュボード>>プラグイン>>新規追加をクリックするとプラグインを追加できる画面になりますが、ここの右上部にあるプラグインの検索とデフォルトで薄く書いてある部分へFont Awesome 4 Menusと入力します。

すると、入力するだけで検索結果が現れて、該当のプラグインが表示されます。

グローバルナビゲーションメニューアイコン表示

おそらく、Font Awesome 4 Menusのプラグインは一番上に出てくると思いますが、今すぐインストールボタンをクリックしてこれをインストールし、すぐ後に現れる有効化ボタンをクリックして有効化しましょう。

特に設定などは必要はありませんので、有効化まで行えたらOKです。

メニュー構造にCSSを追加する

WordPress内ダッシュボード>>外観>>メニューをクリックしてメニュー構造を設定できる画面に移動します。

グローバルナビゲーションメニューアイコン表示

画面右上のほうに表示オプションというタブがあるので、これをクリックします。

グローバルナビゲーションメニューアイコン表示

メニュー構造で設定できる項目のうち、どの項目を画面に表示させるかという設定画面が広がるので、ここでCSSクラスにチェックを入れます。(チェックを入れ終わったら、また表示オプションタブをクリックして閉じておきましょう。)

グローバルナビゲーションメニューアイコン表示

その状態で、メニュー構造に表示する内容として並んでいる項目の右端にある▼をクリックすると、今までは無かったCSS class (オプション)という項目が見えるようになっています。

ここまでワードプレス内で設定できたら、次はアイコンのCSS classを探して設定します。

アイコンのCSS class IDを設定する

アイコンのCSSclassは、FontAwesomeIconsというサイトで探すことが出来ます。

グローバルナビゲーションメニューアイコン表示

>>>FontAwesomeIcons

サイトを開くと、英語でFontAwesome5Proへのアップグレードが促される画面がオーバーレイ表示されることがありますが、✕で閉じてしまって大丈夫です。

そしてスクロールして下のほうを見ていくと、様々なアイコンが並んでいるのがわかります。その中から、自分が使いたいアイコンの形のものをざっと目視で探していきます。マウスオーバーすると、アイコンの形が少し大きく表示されますので確認してみてください。

例えば、当サイトのホームに使っているアイコンは家の形をしたアイコンを選びました。

グローバルナビゲーションメニューアイコン表示

使うアイコンを見つけたら、そのアイコンをクリックします。

グローバルナビゲーションメニューアイコン表示

すると、このアイコンのIDはfa-homeだということがわかります。

このfa-homeをコピペして、さきほどメニュー構造で追加設定できるようにしたCSS class (オプション)の項目へ貼り付けると、このアイコンがメニューに表示されるようになります。

見栄えがメニュー項目のイメージに合ったようなアイコン探しがポイントにもなってきます。

今回の例のようにホームにはかなりマッチしたアイコンがすぐに見つかりましたが、なかなか見つからないこともあります。そういった場合はメニュー項目のイメージを大きく膨らませていって適当なアイコンを見つけるといいです。

グローバルナビゲーションメニューにアイコンを表示させるテクニックは、少し手間暇がかかりますが、実際にクリック率が変わってきたりしますので活用してみてください。

ジー・アウトフィッターのメルマガ

メールアドレスと名前をご登録ください【無料】

お名前(必須)  
メールアドレス(必須)

ジー・アウトフィッター代表 吉川ごうが
アフィリエイト・ネットビジネスの最新情報をお届けします!

※プロバイダーアドレスでは、メールが受け取れない場合がございますので、
Yahoo、Gmail、Hotmailなどのメールアドレスでの登録をお薦めいたします。

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

新着記事

  1. グローバルナビゲーションメニューアイコン表示

    2017-1-23

    グローバルナビゲーションメニューにアイコンを表示する方法

    グローバルナビゲーションメニューの役割 サイトにとって、グローバルナビゲーションメニューとは訪…
  2. グローバルナビゲーションメニュー

    2017-1-17

    グローバルナビゲーションメニューの設定方法

    ワードプレスのメニューとは ワードプレスでメニューと一言で言うような場合は、たいていは下のよう…
  3. ワードプレス記事投稿方法

    2017-1-8

    ワードプレスの記事を投稿する方法

    ワードプレスの記事とは WordPressで作るサイトとは、記事を投稿し続けていくブログ型のサ…
  4. ジー・アウトフィッター

    2016-12-27

    アフィリエイトのノウハウ・手法・作業内容を知れば稼げるか?

    アフィリエイトのノウハウや手法、具体的な作業内容って知りたいですよね? 先に書いておきますが、…
  5. ミニバード

    2016-12-18

    ミニバードでワードプレスを使う手順

    ミニバードとは ミニバードとは、ネットオウルという会社が運営しているレンタルサーバーのことで、…
ページ上部へ戻る