Blog

【簡単】グローバルメニューにアイコンをつける方法【5分】

こんにちは、ナオマツモト@naosuke_shipです。

 

キリンくんA
キリンくんA
グローバルメニューがちょっと寂しいな。。
キリンくんB
キリンくんB
アイコンをつけたい!

 

ブログをいろいろカスタマイズしたいと思いながらも、何からすればいいんだろうと考えてそのまま。。なんてこともあるかと思います。

メニューにアイコンをつけるだけで、簡単に見た目がいい感じになるので今からつけちゃいましょう!今回はグローバルメニューにアイコンを追加する方法について共有したいと思います。

 

グローバルメニューにアイコンをつける手順

まずはざっと流れを見てみましょう。

  1. Font Awesome 4 Menus」のインストール|有効化
  2. Font Awesomeでアイコン探し
  3. 外観>メニューのカテゴリーにアイコンコード貼り付け
  4. 保存>出来上がり!

これだけです。ではでは、下記のようなアイコンをつけていきましょう!

グローバルメニューにアイコンをつける方法

アイコンは「Font Awesome 4 Menus」というプラグインを使えば簡単につけることが出来ます。

1、プラグインのインストール

  1. ダッシュボード>プラグイン>新規追加>検索窓に「Font Awesome 4 Menus」と入力
  2. 今すぐインストール>有効化

◎有効化すると、ダッシュボードの設定に「Font Awesome」という項目が追加されます。

2、Font Awesomeでアイコン探し

次に、つけたいアイコンを探していきます。

  1. 設定>Font Awesomeをクリック>click here to visit the Font Awesome websiteをクリック
  2. 別タブでFont Awesomeのページが開くのでつけたいアイコンを検索
  3. アイコンが見つかったらそのアイコンをクリック>コードをコピー

◎設定からFont Awesomeをクリックするとこんな画面になります↓

◎次にオレンジで囲ったとこをクリックすると。。
これ→click here to visit the Font Awesome website

Font Awesomeのページに飛びます!ここで付けたいアイコンを検索しましょう。

ここでは船のアイコンが欲しいので「ship」と検索します。すると候補が出てくるので、好きなアイコンをクリック。

※グレーのアイコンは有料版で使えます

◎こんなページになるので、オレンジ部分のコードをコピーしましょう。

3、メニューのカテゴリーにアイコンコード貼り付け

先ほどコピーしたコードをメニューのカテゴリーに貼り付けにいきます。

  1. 外観>メニュー
  2. グローバルナビゲーション選択>カテゴリークリック
  3. ナビゲーションラベルに先ほどコピーしたアイコンコードを貼り付け>メニューを保存

上記のような手順ですね。

4、できあがり!

保存ボタンを押したら終了です。トップページに戻って見てみましょう。

◎無事グローバルメニューに追加されました!

同じように他のカテゴリーにもつけると下記のようになります。

※コードと文字の間に半角スペースを入れるとアイコンと文字の間に隙間をつくることができます。参考→【<i class=”fas fa-ship”></i> 船】

 

キリンくんC
キリンくんC
おぉ、いい感じ!

グローバルメニューにアイコンをつける方法まとめ

メニューにアイコンをつけるだけでも見た目が変わっておしゃれなのでオススメです。

こうやって少しづつカスタマイズしていくとブログにも愛着がわいてきますね。という訳で今回はグローバルメニューにアイコンつける方法でした。

 

ではでは、ごきげんよー!!