WordPressのグローバルナビゲーションメニューを使っていますか？ブログに訪れてくれた人に対して分かりやすく案内できる機能で、ブロガーの皆さんはほとんどの方がこのグローバルナビゲーションメニューを採用されているのではないでしょうか？私のサイトでも採用しています。
このグローバルナビゲーションメニューはデフォルトだとシンプルなメニューですが、実はアイコンを付けたり画像を挿入したりと様々なカスタマイズが可能になっています。
その中でも、アイコンを付けることは簡単にできますし見た目がかっこよく／可愛くできるため覚えておいて損はないと思います。この記事ではグローバルナビゲーションメニューをアイコンで装飾する方法を書いていきます。
グローバルナビゲーションメニューを表示する
まずはグローバルナビゲーションメニューの設定方法から見ていきましょう。グローバルナビゲーションメニューと呼んでいますが、Wordpress上で作成したメニューをヘッダー部分に表示させる操作になります。
メニューの設定方法
- 外観＞メニューをクリックする。
- 新規にメニューを作成する時は、画面上部の「新しいメニューを作成しましょう。」をクリック／タップしてメニューの作成画面に移る。既に作成済みのものを設定したければドロップダウンリストから編集したいメニューを選びます。
- 新しくメニューを作る場合は以下の手順で設定していきます。
- メニュー名を入力する。
- ヘッダーメニューのチェックボックスにチェックを入れる。
- メニューを作成をクリックする。
- 左側の[メニュー項目を追加]からメニューに表示したいものを選択してメニューに追加をクリック／タップします。すると、右側の[メニュー構造]に選択したメニューが表示されます。最後にメニューを保存をクリック／タップをクリックするとメニューが完成します。
- メニューにできる項目は以下です。
- 固定ページ
- 投稿
- カスタムリンク
- カテゴリー
- メニューにできる項目は以下です。
親メニューの中に子メニューを作る時はメニューをドラッグして副項目にすることで可能になります。
メニューの設定はおおよそこの手順で作れます。順番変更などは入れ替えたいメニューをドラッグすることで簡単に入れ替えることができます。
メニューの頭にアイコンをつける
いよいよ本題に移りますが、これからメニューの頭にアイコンをつけて装飾していきます。
Logicalrat.online(https://www.Logicalrat.online)のグローバルナビゲーションメニューは以下の画像のようになっており、それぞれのメニューの先頭にアイコンが付いています。このアイコンを付ける方法について解説していきます。手順はとても簡単です。
まずはメニューの設定画面をご紹介
本サイトのグローバルナビゲーションメニューにある「HOME」の横には 
というアイコンが設置されています。そのメニューの設定画面は以下のようになっています。
設定の概要
メニューの設定画面は主に2つの設定で成り立っています。
- リンクURL（メニューをクリックしたら表示されるページのアドレス）
- ナビゲーションラベル
この内、2つ目のナビゲーションラベルの方を編集してメニューにアイコンを付けていきます。
アイコンの設定方法
アイコンの設定方法を解説します。外部サイトにアクセスする必要がありますのでご注意下さい。
- Font Awesomeにアクセスする。
Free Icons | Font Awesome
※無料です。有料版もありますので必要な人は契約しましょう。 - アイコンを検索して気に入ったものをクリック／タップします。
※検索は英語になります。
※例では”HOMEで検索した結果を掲載しています。
- アイコンのHTMLをコピーします。
- Wordpresに戻り、アイコンを表示したいメニューを選択します。そのメニューの「ナビゲーションラベル」の欄に先ほどコピーしたHTMLをペーストします。その後ろに「半角スペース＋表示したい文字」を入力します。半角スペースを入力するのは程よい隙間ができ、より見えやすくなるためです。
これでアイコン付きのメニューを設定することができました！とても簡単ですね！
アイコンを設定したのに表示されない時は
HTMLをコピーして貼り付けてもアイコンが反映されない時はFont Awesomeの設定を確認しましょう。
Font Awesomeには現在3種類の世代があります。
- Font Awesome4
- Font Awesome5
- Font Awesome6（Beta）
※Font Awesome6はまだβ版ですが次世代のFont Awesomeとしてテストを開始しているようですね。
多くの方はFont Awesome4もしくは5の何れかを選択していると思いますが、この記事でご紹介したFont Awesomeは「5」の方になります。（Font Awesome4の方はこちらから）
サイトの設定がFont Awesome4だと「5」は表示されません。その逆もまた然りです。
Cocoonの場合の修正方法
Cocoonを利用されている方は以下の方法でFont Awesomeの設定の確認が行えます。
Cocoon設定＞全体＞サイトアイコンフォントのラジオチェックボックスで選択できます。
今後はFont Awesome5がデフォルトとなる可能性が高く、その先に「6」も控えていますので，当サイトではFont Awesome5の使用を推奨します。
コメント