WordPress|グローバルメニューにアイコンフォントを表示する方法!

サイトを訪れたユーザーを迷子にさせないためのグローバルメニュー。

設置が完了して喜んでいましたが…、ふと「文字だけじゃ寂しくない?」と思ってしまいました。

テキストだけだと寂しいなぁ…

調べてみると、Font Awesomeのアイコンフォントを簡単に表示できることが分かりました。

見た目の比較

アイコンフォントが「ある/なし」で、視覚的にどう違うかを見てみましょう。

アイコンフォントなし
アイコンフォントあり

だいぶ雰囲気が違いますよね。

無料テーマCocoonには、最初からFont Awesomeが使えるようになっていますから、使わない手はないと思います。

Font Awesome(アイコンフォント)とは?

グローバルメニューに表示するイラストは、イラストの形をしたフォント「アイコンフォント」を使います。Web上には様々なアイコンフォント配布サービスがありますが、中でも有名で人気のあるサービスが『Font Awesome』です。

Font Awesomeの使い方がよくわからない方は、別記事に詳細がありますのでご確認ください。

どんなアイコンがあるかというと、

    などのイラスト系や、   といった矢印系。他にも、

    みたいに、どこかで見たことがあるようなものまで…。

Font Awesomeを利用するには前もって準備が必要ですが、Cocoonを使っているなら大丈夫。ただし、自分のサイトで選択しているバージョンが「4」か「5」かを確認してください。

バージョンの確認方法 → ダッシュボード[Cocoon設定]→[全体]タブ

\ Cocoonで対応している Font Awesome Ver.5 /

グローバルメニューにアイコンフォントを設定する方法

こちらの記事は、テーマCocoonを使用していることを前提として作成しています。違うテーマを使っている場合は、テーマでFont Awesomeを使えるか、又は、使う準備が済んでいるかを別途確認してください。

1.【Font Awesome】のサイトでアイコンのコードをコピーしてくる

まずは、使いたいアイコンのコードをもらって来ましょう。

  1. Font Awesomeにアクセスします。
  2. フリー版の中から使いたいものを探し、対象のアイコンをクリックします。

  3. ポップアップウィンドウに表示された<i class="●"></i>のコード部分をクリックします。

これでコードがコピーされたので、次の作業へ進みます。

2.【グローバルメニュー】にアイコンフォントを表示させる

今度は自分のサイトに戻り、メニューにアイコンが表示されるように設定していきます。

  1. 管理メニュー[外観]→[メニュー]を開きます。
  2. [メニュー構造]の中に並んでいるメニュー項目の中から、アイコンを設置したいメニューの▼ボタンをクリックします。

  3. [ナビゲーションラベル]のテキストの前にコードを貼り付けます。

    アイコンとテキストの間に余白が欲しい時は、半角スペースを入れるのが簡単です。

  4. [メニューを保存]ボタンをクリックします。

  5. ブログを更新し、アイコンが表示されるのを確認しましょう。

他のメニューにもアイコンを設置する場合は、この作業を繰り返します。

タイトルとURLをコピーしました