Life-Style

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

By ナオマツモト

せいるん
せいるん
グローバルメニューがちょっと寂しいな。。
ほまりん
ほまりん
アイコンをつけたいわ!
ナオ
ナオ
メニューにアイコンをつけるだけで簡単に見た目がいい感じになるよ!

今回はグローバルメニューにアイコンを追加する方法について見ていこう!

 

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

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

  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> 船】

 

せいるん
せいるん
おぉ、いい感じ!



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

 

せいるん
せいるん
最後にまとめるとこんな感じだね!
要約リスト
  1. Font Awesome 4 Menus」のインストール|有効化
  2. Font Awesomeでアイコン探し
  3. 外観>メニューのカテゴリーにアイコンコード貼り付け
  4. 保存>出来上がり!
ほまりん
ほまりん
あっという間にできたわ!
ナオ
ナオ

アイコンをつけるだけで簡単にメニューがオシャレになるからオススメ!こうやって少しづつカスタマイズしていくとブログに愛着が湧いてくるね!

 

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

WordPressでお問い合わせフォームの作り方を解説【簡単5分】By ナオマツモト お問い合わせフォームの設置方法 お問い合わせフォームをグローバル...
ブログコンセプトの決め方|本当に伝えたいことを考えてみようBy ナオマツモト ブログコンセプトとは コンセプトは決めるべきか コンセプト...