ブログのメニューにアイコンが付いてるサイト、見たことありませんか？
このブログ（COCOFREE）でも使っているコレ↓です。
このアイコンを誰でもかんたんに付けれます。
手順はたったの3つ。
- コードをコピペ
- アイコンを選ぶ
- コードをコピペ
これで完成です。
この記事では「WordPressのメニューにアイコンを付ける方法」を画像付きで詳しく解説していきます。ぜひあなたのブログのカスタマイズに役立ててください。
それでは順に紹介します。
＼このブログのWordPressテーマはこちら／
WordPressのメニュー（グローバルメニュー）にアイコンをつけるメリット
まず何でメニューにアイコンを付けるのがいいのか。メリットを2つあげます。
- 見栄えがよい
- アイコンでメニュー何を示しているのか分かる
分かりやすくアイコンがある場合とない場合を並べてみました。
| ある場合 |
|---|
 |
| ない場合 |
 |
あきらかにアイコンがあった方が見栄えがいいですね。それぞれのメニューが何を示しているのかも分かりやすいです。
このアイコンは誰でもかんたんに付けることができます。その方法について続いて解説していきます。
WordPressのグローバルメニューにアイコンを付けるのは誰でもかんたんにできる
WordPressのメニューにアイコンを付ける手順は次の3つです。
- テーマのheadタグにコードを貼りつける
- サイトでアイコンを選ぶ
- アイコンのコードを貼りつける
それぞれ順番に説明していきます。
1. テーマのheadタグにコードを貼りつける
メニューに付けるアイコンは「Font Awesome」というWebアイコンフォントを利用します。これを利用する準備として以下コードをコピーしてブログのheadタグ（<head>〜</head>内）に貼りつけます。
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
headタグへの貼りつけ方は次のどちらかでできます。
WordPressテーマのカスタマイズ機能をつかう
テーマによってはカスタマイズ機能でheadタグに追記ができます。いくつか例を載せておきます。
| LION BLOGの場合 | SWALLOWの場合 |
|---|---|
 |  |
WordPressのダッシュボードから「外観」＞「カスタマイズ」を選んで、headタグに追記できるメニューがないか探してみてください。
あった場合は、そこへ”Font Awesomeを利用するためにのコード“を貼りつければOKです。
WordPressテーマの「header.php」に追記する
上記のカスタマイズ機能がない場合は、テーマの「header.php」にコードを追加します。手順は次の3つです。
①. WordPressのダッシュボードから「外観」＞「テーマの編集」を選択。
②. テーマファイルの中の「header.php」を選択。
③. </head>の直前に”Font Awesomeを利用するためにのコード”を貼りつける。
これでFont Awesomeが使えるようになりました。
2.サイトでアイコンを選ぶ
次にメニューに付けるアイコンを選びます。
①. 「Font Awesome」にアクセスして「Icons」をクリック。
②. キーワードを入れてアイコンをリサーチ。（海外サイトなのでキーワードは英語で）
③. 使いたいアイコンを選択。（無料版で使えるのは色の濃いアイコンのみ。無料版で十分。）
④. アイコンのコード（<i…> </i>）をクリックしてコピー。
これでアイコンのコードがコピーできました。あとはこのコードをWordPressのメニューに貼り付ければ完成です。
3.アイコンのコードを貼りつける
①. WordPressのダッシュボードから「外観」＞「メニュー」を選択。
②. 「ナビゲーションラベル」のメニュー名の前に、先ほどコピーしたアイコンのコードを貼り付け。
これで完成です。
さらに追加でアイコンを付けたい場合は、”2″と”3″の「アイコンを選んでコードをコピペ」を繰り返せばOKです。
補足
WordPressのテーマによっては「メニューにアイコンをつける機能」が標準で付いています。あなたのテーマに入ってないか一度確認してみてください。
参考：JINのカスタマイズ事例
WordPressのメニューにアイコンをつけるのにプラグインはおすすめしません
ここまで紹介した「ブログのメニューにアイコンを付ける方法」はWordPressのプラグインを使ってもできます。しかしプラグインは便利な反面デメリットもあります。
主なデメリットは、
- 大量のプラグインを入れると、サイトの動作が重くなる
- プラグイン同士の相性が悪い場合、サイトの動作不良が起こる
どうしても必要なものを除いてできるだけプラグインは追加しないようにしましょう。メニューにアイコンを付けるのはプラグインを使わずこれまで紹介した方法でかんたんにできます。
まとめ
いかがでしたか？
WordPressで作ったブログのグローバルメニューに、アイコンを付ける方法を紹介しました。
手順はたったの3つ。
- テーマのheadタグにコードを貼りつける
- サイトでアイコンを選ぶ
- アイコンのコードを貼りつける
トラブルを避けるためにもプラグインを使わない方法を画像付きで解説しました。
ぜひ今回紹介した「WordPressのメニューにアイコンをつける方法」を使って、あなたのブログをカスタマイズしてみてください。この記事が少しでも役に立ったら、シェアしてもらえると嬉しいです。
＼このブログのWordPressテーマはこちら／