By ナオマツモト
今回はグローバルメニューにアイコンを追加する方法について見ていこう！
グローバルメニューにアイコンをつける手順｜流れ
まずはざっと流れを見てみましょう。
- 「Font Awesome 4 Menus」のインストール｜有効化
- Font Awesomeでアイコン探し
- 外観＞メニューのカテゴリーにアイコンコード貼り付け
- 保存＞出来上がり！
これだけです。
ではでは、下記のようなアイコンをつけていきましょう！
グローバルメニューにアイコンをつける方法
アイコンは「Font Awesome 4 Menus」というプラグインを使えば簡単につけることが出来ます。
１、プラグインのインストール
- ダッシュボード＞プラグイン＞新規追加＞検索窓に「Font Awesome 4 Menus」と入力
- 今すぐインストール＞有効化
有効化すると、ダッシュボードの設定に「Font Awesome」という項目が追加されます。
２、Font Awesomeでアイコン探し
次に、つけたいアイコンを探していきます。
- 設定＞Font Awesomeをクリック＞click here to visit the Font Awesome websiteをクリック
- 別タブでFont Awesomeのページが開くのでつけたいアイコンを検索
- アイコンが見つかったらそのアイコンをクリック＞コードをコピー
設定からFont Awesomeをクリックするとこんな画面になります↓
次にオレンジで囲ったとこをクリックすると。。
これ→click here to visit the Font Awesome website
Font Awesomeのページに飛びます！ここで付けたいアイコンを検索しましょう。
ここでは船のアイコンが欲しいので「ship」と検索します。すると候補が出てくるので、好きなアイコンをクリック。
※グレーのアイコンは有料版で使えます
こんなページになるので、オレンジ部分のコードをコピーしましょう。
３、メニューのカテゴリーにアイコンコード貼り付け
先ほどコピーしたコードをメニューのカテゴリーに貼り付けにいきます。
- 外観＞メニュー
- グローバルナビゲーション選択＞カテゴリークリック
- ナビゲーションラベルに先ほどコピーしたアイコンコードを貼り付け＞メニューを保存
上記のような手順ですね。
４、できあがり！
保存ボタンを押したら終了です。トップページに戻って見てみましょう。
無事グローバルメニューに追加されました！
同じように他のカテゴリーにもつけると下記のようになります。
※コードと文字の間に半角スペースを入れるとアイコンと文字の間に隙間をつくることができます。参考→【<i class=”fas fa-ship”></i> 船】
グローバルメニューにアイコンをつける方法｜まとめ
- 「Font Awesome 4 Menus」のインストール｜有効化
- Font Awesomeでアイコン探し
- 外観＞メニューのカテゴリーにアイコンコード貼り付け
- 保存＞出来上がり！
アイコンをつけるだけで簡単にメニューがオシャレになるからオススメ！こうやって少しづつカスタマイズしていくとブログに愛着が湧いてくるね！
ではでは、ごきげんよー！！
https://funabito-life.com/blog-concept/
