でもCSSとかHTMLをいじらないといけないのかなぁ？
なんだかめんどくさそう...
この記事ではこんな悩みにお答えします。
↑ のようにメニューの横にアイコンが付いているブログを見たことはありませんか？
この記事を読んでくれている人は、
と思っている人がほとんどではないでしょうか？
この記事を最後まで読み進めてもらえれば、メニュー横にお洒落なアイコンが誰でも簡単に設定できますよ。
本記事の内容
- 【実例付き】グローバルメニューのBefore・After
- グローバルメニューのアイコンを設定するメリット
- グローバルメニューにアイコンを設定する手順
結論から言うと、グローバルメニューのアイコンはCSSやHTMLを触ることなく、プラグインも不要で所要時間5分ぐらいあれば簡単に設定が出来ます。
僕も設定前は「ブログデザインをお洒落にしたいけど、なんだかめんどくさそうだなぁ...」となかなか重い腰が上がらず後回しにしていたのですが、実際にやってみるとあっけないほどサクッと完了しました。
この記事の手順通りに進めてもらえれば、簡単にグローバルメニューを設定することが可能です。
目次
【実例付き】グローバルメニューのBefore・After
このブログ（KOU BLOG）のグローバルメニューにアイコンを設定してみましたのでBefore・Afterを見てみましょう。
Before
↑ こんな感じでシンプルで味気なかったメニューのデザインが
After
↑ なんだかいい感じに変わりました。
やはりグローバルメニューにアイコンがあるのとないのとでは印象が変わりますね。
グローバルメニューにアイコンを設定するメリット
グローバルメニューにアイコンを設定するメリットは2点で、ユーザー目線と自分目線に分けて考えられます。
- ユーザー目線：「どんな内容のメニューなのか？」が視覚的に分かりやすくなる
- 自分目線：ブログデザインがお洒落になり、少し幸せな気持ちになる
上記の通りでして、特にユーザー目線で考えるとブログの視認性という面でも大切なポイントですね。
自分目線の方は具体的なメリットというよりも完全に気持ちです。笑
でもブログデザインが良くなれば、ブログ運営に対するモチベーションがUPするのでオススメですよ。
グローバルメニューにアイコンを設定する手順
さて、本題に入ります。
グローバルメニューにアイコンを設定する手順は下記の通りです。
step
1Font Awesomeを使えるようにする（設定していない場合）
step
2サイトでアイコンを選ぶ（コードをコピー）
step
3アイコンのコードを貼り付ける
それでは順番に進めていきます。
今はまだ ↑ のようにメニューにアイコンが設定されていない状態です。
ここにアイコンを設定していきます。
手順①：Font Awesomeを使えるようにする（設定していない場合）
グローバルメニューのアイコンはFont Awesomeで設定します。
Font Awesomeとは、Web上でよく使われる上記のようなアイコンを画像ではなく「アイコンフォント」という文字として表示させるツールです。
「Font Awesomeを使えるようにする」と書きましたが、WordPressテーマを導入している場合は大体の場合すでに導入されているのでこの手順は飛ばしてもらって、手順②に進んでもらえればOKです。
WordPressテーマをまだ導入していない人は下記の記事を参考にWordPressテーマを導入するか、WordPressでFont Awesomeをプラグイン無しの導入設定方法と使い方（外部リンク）の記事を参考にまずはFont Awsomeを使えるように設定しましょう。
-
-
ブログにおすすめのオシャレな有料WordPressテーマ５選＋2【サイト見本あり】
注意ポイント
冒頭にHTML・CSS不要と書きましたが、WordPressテーマを導入せずに設定する場合はHTML・CSSの操作が必要となります。
手順②：サイトでアイコンを選ぶ（コードをコピー）
「Font Awesome」のサイトにアクセスし、メニューの「Icons」をクリックします。
アイコンは「有料のもの」「無料のもの」がありますので、左にある「Free」をクリックし、「無料のもの」のみを表示させます。
※無料のものでも1,500種類以上のアイコンがありますので充分です。
上部にある検索窓からキーワード（英語のみ）で探してもOKです。
良さげなアイコンが見つかったら、アイコンをクリックします。
アイコンのコード（<i...></i>）をクリックしてコピーします。
ここでは、
［<i class="fas fa-home"></i>］
手順③：アイコンのコードを貼り付ける
次に、WordPressのダッシュボードから「外観」＞「メニュー」を選択します。
「ナビゲーションラベル」のメニュー名の前に先程コピーしたアイコンのコードを貼り付けます。
ここでは、もともと設定していた［HOME］を「<i class="fas fa-home"></i>HOME」に変更します。
最後に「メニューを保存」を忘れずにクリックしたら設定は完了です。
↑ サイトを表示してみると、メニューアイコンがしっかりと表示されていますね。
あとは残りのメニューも全てお気に入りのアイコンを設定すれば設定は完了です。
まとめ：早速メニューにお気に入りのアイコンを設定しよう
今回の記事ではWordPressのグローバルメニューにアイコンを設定する方法を解説しました。
再度振り返りになりますが、グローバルメニューにアイコンを設定する手順は下記通りです。
グローバルメニューにアイコンを設定する手順
step
1Font Awesomeを使えるようにする（設定していない場合）
step
2サイトでアイコンを選ぶ（コードをコピー）
step
3アイコンのコードを貼り付ける
今回の設定はWordPressのプラグインでも同様の設定が可能ですが、
- 他のプラグインと干渉し、動作不良を起こす可能性がある
- プラグインが多いと、サイトの動作が重くなる
上記の2点の理由から、今回ご案内した方法で設定することをオススメします。
早速、お気に入りのアイコンを設定してお洒落なブログデザインを手に入れちゃいましょう！