WordPress

  (最終更新日:2016.05.3)

【WordPress】プラグインでメニューにアイコンを表示する方法

スポンサーリンク

WordPressのメニューといえば、上部に表示されているグローバルメニュー(ナビゲーションメニュー)ですが。そこに文字だけじゃなくてアイコン(例えば下図)を表示したいことってありますよね。

wordpress-plugin-FontAwesome4Menus-title

方法はいろいろありますが、ここではプラグインを導入することで一番簡単に出来る方法を解説したいと思います!

Font Awesome 4 Menusプラグインを使う

メニューにアイコンを挿入して表示するには、《Font Awesome 4 Menus》というプラグインがおすすめです。

プラグイン→新規追加》から《Font Awesome 4 Menus》を検索してインストールを行います。 インストール完了後に有効化するのをお忘れなく。

使い方

まずはメニューのCSSクラス機能を有効化します。
WordPress管理画面から《外観→メニュー》をクリック。

表示オプション》をクリック。

CSSクラス》にクリックでチェックを入れて有効化します。

CSSクラスを有効化すると、メニューの設定画面に《CSS class(オプション)》というのが表示されるようになっているはずです。こちらにアイコン(Font Awesome)のCSSクラスを入力していくことになります。

Font AwesomeのCSSクラスは Font Awesome Icons から検索して取得できます。 例としてホームアイコンを検索してみましょう。

検索文字列として《Home》を入力(②)すると、下段に検索結果のアイコン一覧が表示されます。ここで使いたいアイコンをクリック(②)します。

するとアイコンのサンプルがいろいろなサイズで表示されます。ここで、下図の場所に記載されているのがFont AwesomeのCSSクラス名になります。 この文字列をコピーします。

先ほどのメニューカスタム画面の CSS Class にコピーしたクラス名を貼り付けます。

これで完了。最後に《メニューを保存》をクリックして保存完了です。

ブログ画面を確認してみると無事にアイコンが表示されるようになっています。

あとは同じようにアイコンのCSSクラスを検索して貼り付けての繰り返しですね。 どんなアイコンがあるのかは、じっくり Font Awesome Icons のサイトを見てみればわかりますよー。 ちょっと面倒ですけどね‥。

ではでは!

関連記事

  1. WordPress

    さくらインターネットでWordPressのSimplicityテーマを簡単安全にバージョンアップする…

    ここ最近ちまたで話題になっている、SEO対策がバッチリ施されたWord…

  2. WordPress

    【WordPress】Simple Image Sizesのアップデート後にsyntax error…

    WordPressのプラグイン『Simple Image Sizes』…

  3. WordPress

    Batch Cat : WordPressでカテゴリーの一括変更を超簡単にできるプラグイン

    ちょっとWordpressで不要なカテゴリーが増えてきたなぁ と感じて…

  4. WordPress

    さくらインターネットのレンタルサーバーで通信の圧縮(mod_deflate)を利用する方法

    さくらインターネットのレンタルサーバーで、ブログ(Wordpress等…

コメント

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

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

最近の記事

Twitter

  1. Microsoft

    【Outlook.com】「ルール」でメールを振り分ける方法
  2. iPhone

    【iPhone】写真の共有アルバムからビデオを保存する方法
  3. GoogleAdsense

    GoogleAdsenseの広告ユニットのステータスが「休止中」と表示されている…
  4. デジタル機器

    HD-GDU3シリーズ。写真1,000枚をわずか約3.5秒でコピー。バッファロー…
  5. GoogleAdsense

    【Googleアドセンス】クリック単価(CPC)の調べ方
PAGE TOP