ブログ

WordPressのグローバルメニュー横にアイコンを設定する方法【所要時間5分】

2020年8月6日

 

悩める人
WordPressのグローバルメニューにアイコンを設定したいです!

でもCSSとかHTMLをいじらないといけないのかなぁ?

なんだかめんどくさそう...

 

この記事ではこんな悩みにお答えします。

 

WordPressグローバルメニューのアイコン

 
↑ のようにメニューの横にアイコンが付いているブログを見たことはありませんか?

 

この記事を読んでくれている人は、
 

そうそう、これを設定したいんだよ!でもなんだか大変そう...

 
と思っている人がほとんどではないでしょうか?

 

この記事を最後まで読み進めてもらえれば、メニュー横にお洒落なアイコンが誰でも簡単に設定できますよ。 

 

本記事の内容

  • 【実例付き】グローバルメニューのBefore・After
  • グローバルメニューのアイコンを設定するメリット
  • グローバルメニューにアイコンを設定する手順

 

結論から言うと、グローバルメニューのアイコンはCSSやHTMLを触ることなく、プラグインも不要で所要時間5分ぐらいあれば簡単に設定が出来ます

 

僕も設定前は「ブログデザインをお洒落にしたいけど、なんだかめんどくさそうだなぁ...」となかなか重い腰が上がらず後回しにしていたのですが、実際にやってみるとあっけないほどサクッと完了しました。

 

この記事の手順通りに進めてもらえれば、簡単にグローバルメニューを設定することが可能です。

 

【実例付き】グローバルメニューのBefore・After

 

このブログ(KOU BLOG)のグローバルメニューにアイコンを設定してみましたのでBefore・Afterを見てみましょう。

 

Before

WordPressグローバルメニュー Before

 
↑ こんな感じでシンプルで味気なかったメニューのデザインが

 

After

WordPressグローバルメニュー After

 
↑ なんだかいい感じに変わりました。

 

やはりグローバルメニューにアイコンがあるのとないのとでは印象が変わりますね。

 

グローバルメニューにアイコンを設定するメリット

 

グローバルメニューにアイコンを設定するメリットは2点で、ユーザー目線と自分目線に分けて考えられます。
 

  • ユーザー目線:「どんな内容のメニューなのか?」が視覚的に分かりやすくなる

  • 自分目線:ブログデザインがお洒落になり、少し幸せな気持ちになる

 
上記の通りでして、特にユーザー目線で考えるとブログの視認性という面でも大切なポイントですね。

 

自分目線の方は具体的なメリットというよりも完全に気持ちです。笑

 

でもブログデザインが良くなれば、ブログ運営に対するモチベーションがUPするのでオススメですよ。

 

グローバルメニューにアイコンを設定する手順

 

さて、本題に入ります。

 

グローバルメニューにアイコンを設定する手順は下記の通りです。

 

step
1
Font Awesomeを使えるようにする(設定していない場合)

step
2
サイトでアイコンを選ぶ(コードをコピー)

step
3
アイコンのコードを貼り付ける

 

それでは順番に進めていきます。

 

WordPressグローバルメニュー

 

今はまだ ↑ のようにメニューにアイコンが設定されていない状態です。

 

ここにアイコンを設定していきます。

 

手順①:Font Awesomeを使えるようにする(設定していない場合)

 

グローバルメニューのアイコンはFont Awesomeで設定します。

 

アイコン

 

Font Awesomeとは、Web上でよく使われる上記のようなアイコンを画像ではなく「アイコンフォント」という文字として表示させるツールです。

 

「Font Awesomeを使えるようにする」と書きましたが、WordPressテーマを導入している場合は大体の場合すでに導入されているのでこの手順は飛ばしてもらって、手順②に進んでもらえればOKです。

 

WordPressテーマをまだ導入していない人は下記の記事を参考にWordPressテーマを導入するか、WordPressでFont Awesomeをプラグイン無しの導入設定方法と使い方(外部リンク)の記事を参考にまずはFont Awsomeを使えるように設定しましょう。

 

関連記事
ブログにおすすめのオシャレな有料WordPressテーマ5選+2【サイト見本あり】

 

注意ポイント

冒頭にHTML・CSS不要と書きましたが、WordPressテーマを導入せずに設定する場合はHTML・CSSの操作が必要となります。

 

手順②:サイトでアイコンを選ぶ(コードをコピー)

Fone Awesome 公式HP

 
Font Awesome」のサイトにアクセスし、メニューの「Icons」をクリックします。

 

Fone Awesome 公式HP

 
アイコンは「有料のもの」「無料のもの」がありますので、左にある「Free」をクリックし、「無料のもの」のみを表示させます。

※無料のものでも1,500種類以上のアイコンがありますので充分です。

 

上部にある検索窓からキーワード(英語のみ)で探してもOKです。

 

Fone Awesome 公式HP

 
良さげなアイコンが見つかったら、アイコンをクリックします。

 

Fone Awesome 公式HP

 
アイコンのコード(<i...></i>)をクリックしてコピーします。

 

ここでは、

<i class="fas fa-home"></i>

がコードとなります。

 

手順③:アイコンのコードを貼り付ける

WordPress ダッシュボード

 
次に、WordPressのダッシュボードから「外観」>「メニュー」を選択します。

 

WordPressダッシュボード

 
ナビゲーションラベル」のメニュー名の前に先程コピーしたアイコンのコードを貼り付けます。

 

ここでは、もともと設定していた[HOME]を「<i class="fas fa-home"></i>HOME」に変更します。

 

最後に「メニューを保存」を忘れずにクリックしたら設定は完了です。

 

WordPressグローバルメニュー

 
↑ サイトを表示してみると、メニューアイコンがしっかりと表示されていますね。

 

あとは残りのメニューも全てお気に入りのアイコンを設定すれば設定は完了です。

 

まとめ:早速メニューにお気に入りのアイコンを設定しよう

 

今回の記事ではWordPressのグローバルメニューにアイコンを設定する方法を解説しました。

 

再度振り返りになりますが、グローバルメニューにアイコンを設定する手順は下記通りです。

 

グローバルメニューにアイコンを設定する手順

step
1
Font Awesomeを使えるようにする(設定していない場合)

step
2
サイトでアイコンを選ぶ(コードをコピー)

step
3
アイコンのコードを貼り付ける

 

今回の設定はWordPressのプラグインでも同様の設定が可能ですが、

  • 他のプラグインと干渉し、動作不良を起こす可能性がある

  • プラグインが多いと、サイトの動作が重くなる

上記の2点の理由から、今回ご案内した方法で設定することをオススメします。

 

早速、お気に入りのアイコンを設定してお洒落なブログデザインを手に入れちゃいましょう!

-ブログ

© 2021 KOUBLOG