▶ Amazon 新生活アイテム
スポンサーリンク

ページにプロモーションが含まれる場合があります。

ナビゲーションメニューにアイコンを追加する方法|WordPress・Cocoon

スポンサーリンク
初心者
初心者

ブログにナビゲーションメニューを設置してイイ感じになった!もっと見た目をオシャレにしたいな!

そんな要望におすすめのカスタマイズを紹介します。

よしてっく
よしてっく

それなら、メニューに合うアイコンを追加しましょう!

ブログのヘッダーにナビゲーションメニューを設置したけど、もっと本格的な見た目にしたい文字だけだとなんか寂しいという場合は、各メニューに合ったアイコンを追加してみましょう。

ナビゲーションメニュー名の前にアイコンを追加した状態

よしてっく
よしてっく

もっとサイトが本格的なデザインにレベルアップします!

今回は、WordPressでナビゲーションメニューのメニュー名の前にアイコンを追加する方法をご紹介します。
ナビゲーションメニューを設置していない人は下記を参考にしてみて下さい。
Cocoonテーマ以外でもFont Awesomeに対応しているWordPressサイトなら同様に設定できます。
 

WordPress:ナビゲーションメニューにアイコンを追加する方法

ナビゲーションメニューにアイコンを追加する
 
★ナビゲーションメニューにアイコンを追加する手順は3ステップです。

  1. Font Awesomeで使いたいアイコンを探す
  2. WordPressのメニュー設定でコードを追加する
  3. アイコンの表示確認と調整

順番に解説します。
 

①Font Awesomeで使いたいアイコンを探す

Font Awesomeでアイコンを探す

Font AwesomeはWEBで使えるアイコンを提供している便利なサイトです。無料と有料がありますが無料のアイコンで充分使えます。

 

(1)Font Awesomeのサイトにアクセスします。

>>> https://fontawesome.com/

 

 

 

(2)アイコンの一覧ページが表示されます。
Font Awesomeのアイコン一覧ページ
 
 
(3)使いたいアイコンを探します。上部の検索ボックスにメニューに合いそうな名称を入力します。
ここでは例としてhomeと入力してみます。
Font Awesomeのアイコン検索入力
 
Font Awesomeの検索は英語しか対応していないので英単語を入力して下さい。
↓日本語を英語に変換したい場合はGoogle翻訳がおすすめ。
関連 Google翻訳の使い方|不明な外国語の言語も調べられる
 
 
(4)homeに関連するアイコンが下に表示されますが、左メニューのFreeをクリックして無料版のアイコンだけを絞り込みます。
 
Font Awesome_無料アイコンの絞り込み
 
(5)イメージに合ったアイコンをクリックします。
Font Awesome_アイコンを選ぶ
 
(6)アイコンの詳細ページが表示されます。WordPressでは画面上部に記載しているコードを使います。
Font Awesome_アイコンの単体ページ
 
(7)コードはクリックするだけでコピーが完了しますので簡単です。
アイコンコードをコピー
 
よしてっく
よしてっく

このFont AwesomeでコピーしたコードをWordPressで使います!

ちなみに今回選んだホーム用のコードは<i class=”fas fa-home”></i>です。

 

 

②WordPressのメニュー設定でコードを追加する

WordPressのメニュー設定でコードを追加する

★Font AwesomeでコピーしたコードをWordPressのナビゲーションメニューのラベルに追加します。

  • WordPressでメニューの管理画面を表示
  • メニューにFont Awesomeコードを追加する

 

✅WordPressでメニューの管理画面を表示
(1)WordPress管理画面(ダッシュボード)の外観メニューをクリックします。
WP_外観のメニュークリック
 
(2)メニューの管理画面になるので編集するメニューヘッダーメニューになっていることを確認します。
※違うメニューになっている場合は右側にあるボタンで切り替えできます。
WP_メニュー管理画面のヘッダーメニューを選択
 
(3)メニュー構造ヘッダーメニューになっていることを確認します。ナビゲーションメニューに設置している各メニューにアイコンを追加します。
ナビゲーションメニューに設置している項目
 
↓拡大
WP_ナビゲーションメニューに設置している項目拡大
✅メニューにFont Awesomeコードを追加する
★ここでは例としてナビゲーションメニューに設置しておいたホームにアイコンを追加します。
※先ほどFont Awesomeの解説でコピーしたホーム用のコードを使います。
 
(1)ホームのパネルの右側にある(下向き三角)をクリックします。
ホームの三角をクリック
 
(2)ナビゲーションラベルの欄に入力済のホームの前側に、コピーしておいたFont Awesomeのコード<i class=”fas fa-home”></i>を貼り付けます。
ホームラベルの前にコードを貼り付け

↓コード貼り付け後
ホームラベルの前にコードを貼り付け後

 

コード貼り付けのコツそのまま貼り付けるとアイコンとテキストが接近しすぎるので私の場合はコードとラベル名の間に半角スペースを入れています。

ラベルの前に半角スペースを入れる

実際に見た目のバランスを見ながらお好みで判断して下さい。

 

(3)コードを貼り付けたらメニューを保存をクリックします。

WP_ナビゲーションメニューの保存をクリック

 

以上でホームのメニュー名の前にアイコンを追加する手順は完了です。

 

同様の手順で他のメニューにもアイコンのコードをFont Awesomeから入手して貼り付けてください。

WP_ナビゲーションメニューの各ラベルにコードを追加

よしてっく
よしてっく

最後にメニューを保存をクリックするのを忘れずに!

 

③アイコンの表示確認と調整

アイコンの表示確認と調整

★全てメニューにコードを貼り付けたら、実際にサイトのPC版とスマホ版で表示を確認しましょう。

ナビゲーションメニューにアイコンを追加後

 

よしてっく
よしてっく

レイアウト的に表示しきれていなかったり窮屈になってバランスが悪くなっている場合は文字数を削ったり全角を半角にするなどの調整をしてみて下さい!

 

補足:CocoonでFont Awesome5に切り替える手順

補足CocoonでFont Awesome5に切り替える手順

★Cocoonテーマの場合は、初期設定がFont Awesome4になっていますのでFont Awesome5に切り替えてください。

 

Cocoon設定全体サイトアイコンフォントFont Awesome5に切り替え⇒変更をまとめて保存

Cocoon設定のFont Awesome5

 

 

まとめ:アイコンの追加でユーザーにもわかりやすく

今回は、WordPressで設置したナビゲーションメニューの、メニュー名の前にアイコンを追加する手順をご紹介しました。

よしてっく
よしてっく

文字だけではなくアイコンを追加することによって直感的にわかりやすくなる上、ぱっと見のサイトの印象も良くなります!

細かいカスタマイズですが、ユーザビリティも向上しますのでサイトのレベルアップに是非お試しください。

コメント

  1. ハナ より:

    はじめまして。
    こちらの記事を参考にアイコンを追加しましたが文字化けのようになり、うまく表示されません。Font Awesome5であることは確認済みなのですが、何かご存じでしたらご教授お願い致します。

  2. よしてっく よしてっく より:

    ハナさん、初めまして。
    ブログの訪問とコメントありがとうございます。
    Font Awesomeのアイコンが文字化け(□:四角)になる感じでしょうか?

    私の予想ですが、もしかしたらFont Awesomeのバージョン6のコードを使っていませんか?

    記事のリンクで飛ぶとそうなってしまっていたので申し訳ございません。

    ↓コチラのリンクからバージョン5のページに行けるでしょうか?

    https://fontawesome.com/v5/search?m=free

    行けたら、そこからバージョン5のアイコンを探してそのコードを使ってもらえますか?

    記事内のリンクも修正します。

    お手数をおかけしますが宜しくお願いします。

    m(_ _)m

タイトルとURLをコピーしました