WordPressのグローバルメニューにアイコンを付けるのは超かんたん!手順を画像付きで紹介!!

Tool

 

こんにちは、ふじぱん(@fujipan8960)です。

 

ブログのメニューにアイコンが付いてるサイト、見たことありませんか?

このブログ(COCOFREE)でも使っているコレ↓です。

Global menu icon 00 1
このアイコンを誰でもかんたんに付けれます。

 

手順はたったの3つ。

  • コードをコピペ
  • アイコンを選ぶ
  • コードをコピペ

これで完成です。

 

この記事では「WordPressのメニューにアイコンを付ける方法を画像付きで詳しく解説していきます。ぜひあなたのブログのカスタマイズに役立ててください。

それでは順に紹介します。

 

 

\このブログのWordPressテーマはこちら/

OPENCAGE 公式ページ

 

WordPressのメニュー(グローバルメニュー)にアイコンをつけるメリット

Global menu icon 01

 

まず何でメニューにアイコンを付けるのがいいのか。メリットを2つあげます。

  • 見栄えがよい
  • アイコンでメニュー何を示しているのか分かる

 

分かりやすくアイコンがある場合とない場合を並べてみました。

ある場合
Global menu icon 01 1
ない場合
Global menu icon 01 2

あきらかにアイコンがあった方が見栄えがいいですね。それぞれのメニューが何を示しているのかも分かりやすいです。

このアイコンは誰でもかんたんに付けることができます。その方法について続いて解説していきます。

WordPressのグローバルメニューにアイコンを付けるのは誰でもかんたんにできる

Global menu icon 02

 

WordPressのメニューにアイコンを付ける手順は次の3つです。

  1. テーマのheadタグにコードを貼りつける
  2. サイトでアイコンを選ぶ
  3. アイコンのコードを貼りつける

それぞれ順番に説明していきます。

1. テーマのheadタグにコードを貼りつける

メニューに付けるアイコンは「Font Awesome」というWebアイコンフォントを利用します。これを利用する準備として以下コードをコピーしてブログのheadタグ(<head>〜</head>内)に貼りつけます。

<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">

引用:【保存版】Font Awesomeの使い方:Webアイコンフォントを使おう

headタグへの貼りつけ方は次のどちらかでできます。

 

WordPressテーマのカスタマイズ機能をつかう

テーマによってはカスタマイズ機能でheadタグに追記ができます。いくつか例を載せておきます。

LION BLOGの場合SWALLOWの場合
Global menu icon 02 1Global menu icon 02 2

WordPressのダッシュボードから「外観」>「カスタマイズ」を選んで、headタグに追記できるメニューがないか探してみてください。

あった場合は、そこへ”Font Awesomeを利用するためにのコード“を貼りつければOKです。

 

WordPressテーマの「header.php」に追記する

上記のカスタマイズ機能がない場合は、テーマの「header.php」にコードを追加します。手順は次の3つです。

①. WordPressのダッシュボードから「外観」>「テーマの編集」を選択。

②. テーマファイルの中の「header.php」を選択。

③. </head>の直前に”Font Awesomeを利用するためにのコード”を貼りつける。

Global menu icon 02 3

これでFont Awesomeが使えるようになりました

2.サイトでアイコンを選ぶ

次にメニューに付けるアイコンを選びます。

①. 「Font Awesome」にアクセスして「Icons」をクリック。

Global menu icon 02 4

 

②. キーワードを入れてアイコンをリサーチ。(海外サイトなのでキーワードは英語で)

Global menu icon 02 5

 

③. 使いたいアイコンを選択。(無料版で使えるのは色の濃いアイコンのみ。無料版で十分。)

Global menu icon 02 6

 

④. アイコンのコード(<i…> </i>)をクリックしてコピー。
Global menu icon 02 7

 

これでアイコンのコードがコピーできました。あとはこのコードをWordPressのメニューに貼り付ければ完成です。

3.アイコンのコードを貼りつける

①. WordPressのダッシュボードから「外観」>「メニュー」を選択。

②. 「ナビゲーションラベル」のメニュー名の前に、先ほどコピーしたアイコンのコードを貼り付け。Global menu icon 02 8

 

これで完成です

さらに追加でアイコンを付けたい場合は、”2″と”3″の「アイコンを選んでコードをコピペ」を繰り返せばOKです。

補足

WordPressのテーマによっては「メニューにアイコンをつける機能」が標準で付いています。あなたのテーマに入ってないか一度確認してみてください。

参考:JINのカスタマイズ事例

WordPressのメニューにアイコンをつけるのにプラグインはおすすめしません

Global menu icon 03

 

ここまで紹介した「ブログのメニューにアイコンを付ける方法」はWordPressのプラグインを使ってもできます。しかしプラグインは便利な反面デメリットもあります。

主なデメリットは、

  • 大量のプラグインを入れると、サイトの動作が重くなる
  • プラグイン同士の相性が悪い場合、サイトの動作不良が起こる

 

どうしても必要なものを除いてできるだけプラグインは追加しないようにしましょう。メニューにアイコンを付けるのはプラグインを使わずこれまで紹介した方法でかんたんにできます。

まとめ

いかがでしたか?

WordPressで作ったブログのグローバルメニューに、アイコンを付ける方法を紹介しました。

手順はたったの3つ。

  1. テーマのheadタグにコードを貼りつける
  2. サイトでアイコンを選ぶ
  3. アイコンのコードを貼りつける

トラブルを避けるためにもプラグインを使わない方法を画像付きで解説しました。

 

ぜひ今回紹介した「WordPressのメニューにアイコンをつける方法」を使って、あなたのブログをカスタマイズしてみてください。この記事が少しでも役に立ったら、シェアしてもらえると嬉しいです。

 

 

\このブログのWordPressテーマはこちら/

OPENCAGE 公式ページ