WordPressのメニュー横にFont Awesomeアイコンを設置する方法

WEBデザイン
助手くん
助手くん
WordPress ブログのメニュー文字横に、アイコンを設置するにはどうすればいいんでしょうか?
管理人
管理人
その悩み、最速で解決してあげよう!

アイコンをメニューの文字横につけるだけで、読者にとってもわかりやすいメニューが完成します。

Google 検索エンジンにも、アイコンがつく仕様変更が実施されました。

つまりブログ運営をしているブロガーは、アイコンを設置して、読者にわかりやすい環境を用意することが必須かもしれません。

というわけで今回は、WordPressのグローバルメニュー横に、Font Awesome アイコンを設置する方法を、解説していきます。

WordPressのグローバルメニューに、アイコンを設置する方法

WordPressのグローバルメニュー横にアイコンを設置する方法
  • STEP1:Font Awesomeを準備する
  • STEP2:グローバルメニューを開く
  • STEP3:ナビゲーションラベルにコードを記入する

それでは、STEP1から解説していきます。


STEP1:Font Awesomeを準備しよう

Wp globalmenu icon5

Font Awesome:https://fontawesome.com/

使いたいアイコンを、Font Awesome で検索し、コードをコピーしてください。

まだ Font Awesome の導入準備がお済みでない方は、こちらの記事をご参照ください↓


STEP2:グローバルメニューを開こう

Wp globalmenu icon1

WordPress のダッシュボードから、グローバルメニューを開きます。

グローバルメニューの開き方
  1. 外観をクリック
  2. メニューをクリック
  3. アイコンを設置したいメニューを、クリック

STEP3:ナビゲーションラベルにコードを記入しよう

Wp globalmenu icon2

ナビゲーションラベルに、Font Awesome でコピーしたコードを貼り付けます。

コードを加える手順
  1. ナビゲーションラベルに、コードを貼り付けます。
  2. メニューを保存をクリック

実際のコードは、こんな感じになります↓

<i class="fab fa-apple"></i> Apple

ナビゲーションラベルが見つからない場合は、この手順を試してください↓

カスタムリンクを追加する手順
Customlink menu howto

  1. メニュー項目を追加のカスタムリンクをクリック
  2. URLに、カテゴリのリンクを記入
  3. リンク文字列に、Font Awesome のアイコンと文字を入力
  4. メニューに追加を、クリック。

それでは最後に、WordPress ブログのメニューを確認してみましょう。

Wp globalmenu icon3

無事に、メニュー文字の横にアイコンが表示されました。

以上で、WordPressのグローバルメニュー横にアイコンを設置する方法の解説を終わります。

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

グローバルメニューの文字横に、アイコンをつける理由が2つあります。

助手くん
助手くん
文字だけでも十分わかると思うのですが...?

と思うかもしれません。これもすべて、ユーザーにやさしいサイトデザインをするためなのです。

それでは、ひとつずつ理由を説明させてください。


理由1:Google検索エンジンの仕様変更

Wp globalmenu icon4

Google 検索エンジンに、アイコンが付いたからです。

記事執筆のちょっとまえまでは、文字だけでした。

みんながつかう Google 検索エンジンの仕様変更は、より使いやすいからこそ変更されるわけです。

ブロガーはちゃんと、そこについていく必要がありますよね。


理由2:文字よりも絵の方が目立つから

文字よりもアイコンのほうが、目立つからです。

リージョンマップで確認すると、注意を引きつけやすい確率が違うんです。

注意を引きつける確率

Yahoo!JAPAN のサイドバーを見てください。

Yahoo!JAPAN のサイドバー

フォントだけでは見づらくなる場面で、アイコンがあると見やすいですね。

  • 見やすい=読者にやさしい

なので、積極的にとりいれていきたいところです。

まとめ

WordPressのグローバルメニュー横にアイコンを設置する方法を、最速で解決するシリーズでした。まとめると、こんな感じです↓

WordPressのグローバルメニュー横にアイコンを設置する方法
  • STEP1:Font Awesomeを準備する
  • STEP2:グローバルメニューを開く
  • STEP3:ナビゲーションラベルにコードを記入する

むずかしい専門知識もいらないので、とても簡単に設置することができます。

アイコンがつくことで、20%も視認性があがるんですから、設置した方がいいですね。

そのほか Font Awesome の会員登録の方法や、導入方法などはこちらの記事をどうぞ↓

サウンドオルビス

3,507,082 views

サウンドテック・ラボ編集部兼ライター。「音楽×テクノロジー」をキーワードに、毎日記事を更新中。DTM音楽制作のハウツーや最新情報で、あなたの「やってみたい!...

プロフィール

ピックアップ記事

カテゴリ内の記事