【WordPress】メニューのアイコン設置プラグインFont Awesome 4 Menusの使い方

こんにちは、飲食店さんの集客サポーターことshunsukeです。つい先日生まれた娘ですが、生後10日ほど経過し、随分と顔つきが変わって来ました!生まれたてはまるでお猿さんだったのですが…w 毎日大変なことばかりですが、日々の成長を感じつつ楽しんで子育てできたらと思います(・´з`・) さてさて本日は、ご依頼頂いているポータルサイト作成の中で実装した、「グローバルメニューのアイコン」の設置について。WordPressで作成中のサイトですが、プラグイン「Font Awesome 4 Menus」を使用して簡単に設置出来るので、その情報を今回はシェアしたいと思います。

スポンサードリンク

Font Awesome 4 Menusとは

font-awesomeFont Awesome 4 Menus」は、 トップ(グローバル)、サイド、フッターの 各メニューに、アイコンフォントを設定出来る とても便利で簡単なプラグインです!   自分でCSSをいじって設定することも出来ますが、 結構面倒だったりしますからね〜。 Font Awesome 4 Menusを使用すれば 5分でアイコン設定が完了します。 それでは使い方を説明していきますね。

Font Awesome 4 Menusの有効化

まずはいつも通り、 プラグイン>新規追加、から 「Font Awesome 4 Menus」を検索し インストール>有効化をして下さい。

CSSクラスにチェック

font-awesome   外観>メニューから、 メニューの編集ページに移動します。   ページ右上に「表示オプション」 という項目がありますので、そこをクリックし 中にある「CSSクラス」にチェックを入れます。  

shunsuke
「CSSクラス」にチェックを入れないと、プラグインを有効化していても設定が出来ないので忘れないようにね!

CSSクラスを設定する

チェックを入れると、このようになります。

Before

font-awesome3

After

font-awesome2   画像の赤枠で囲った部分に アイコンのクラス名を入力することで メニューのテキスト前に 任意のアイコンが設定されます。

Font Awesome 4 Menusのクラス名

アイコン毎のクラス名は 公式サイトに一覧が載っています。 一部を画像でご紹介してみます。 font-awesome6 font-awesome7     ここにあるだけでも結構な数ですが、 まだまだ沢山のアイコンが用意されています。 ちゃんと数えていませんが、 上の画像の5倍以上はありますね^^;   かなり多いので、 テキスト検索を利用して 良さそうなアイコンを見つけてみましょう☆

Font Awesome 4 Menus使用上の注意

良さそうなアイコンを見つけて 設定が完了!でも表示されない… こんな時に見るべきポイントがあります。   それは…クラス名です! 実は、一覧に表示されている名前を そのまま設定してしまうと 上手く表示されないのです。   一覧表示されたアイコンの中から どれか一つクリックしてみて下さい。 先程と違った名前が 大きめのフォントで表示されるはずです。 font-awesome8   どれも、先頭に「fa-」がついているんです。 つまり、これが抜けていたために 表示されなかったんですね。 (「fa-home」を「home」にしていた等)   それ以外には落とし穴は無さそうなので もし上手く行かなかったときには そこを確認して見てください。

僕のサイトの実例

せっかくなので、 僕のサイトにも反映させてみます。

Before

font-awesome5     元々これだったのが、

After

font-awesome4   こんな感じになります!     いかがでしょうか、 随分と雰囲気が変わりますよね^^   アイコンの有無だけで、 ユーザビリティがグンッと上がりますので、 必要に応じて取り入れてみて下さい。

まとめ

  • WordPressサイトのメニューアイコン設置は超簡単
  • プラグインFont Awesome 4 Menusが便利すぎる
  • アイコンフォントの数も豊富すぎる

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitter でshunsukeをフォローしよう!

関連記事

  1. 【WordPres】スライドショー作成プラグインMeta Slider…

  2. 画像に動き(ホバーエフェクト)を付けるCSSライブラリが簡単すぎる!

  3. 【WordPress】SNSボタンを設置するプラグイン「AddToAn…

  4. imagehover.cssの使い方・設定方法は?反映されない時の対処…

  5. wordpressのサイトアドレスを入力し間違えた時の修正方法はこれ!…

  6. 【WordPress】有料テーマおすすめ4選!オシャレデザインが成功の鍵!

    【WordPress】有料テーマおすすめ4選!オシャレデザインが成功の…

ツールバーへスキップ