AFFINGER5(WING)でメニューにアイコンを追加する方法

私がこのサイトで使っているテーマ「AFFINGER5（WING）」の公式サイトさんを眺めていたら、ヘッダーメニューにアイコンがあることに気づきました。

メニューの頭にアイコンをつけると、メニューを選んだ先で何が見られるのかがパッと見でわかりやすく、サイトをたくさん見てもらえる気がします。

私もさっそく試してみようと思ったのですが、どうやったらアイコンを追加できるのか解説しているサイトがなかなか見つからず、けっこう困りました。

なのでこの記事では、同じように悩んでいるAFFINGER5ユーザーさんのために、AFFINGER5でメニューにアイコンを追加する方法を解説します。

追加したいアイコンのコードを調べる

このアイコンを表示する機能は、FontAwesomeというWebフォントを使って作られています。

AFFINGER5はテーマを有効にした時点で、FontAwesomeのコードを入力するだけでアイコンが表示されるようになっているので、FontAwesomeを使うための下準備は必要ありません。

今回は例として、このサイトのヘッダーメニューの「お問い合わせ」に、それっぽいアイコンを追加してみたいと思います。

FontAwesomeのサイトにアクセス

まずは使いたいアイコンを探します。

「Font Awesome Icons」にアクセスしてみましょう。

2020年4月現在、AFFINGER5はFontAwesomeのバージョン4.7までしか対応していないので、FontAwesomeのそれ以降のバージョンで追加されたアイコンは表示されません。Font Awesome Iconsのサイトに移動すると、最新バージョンのページへの移動を促されるかもしれませんが、キャンセルしてバージョン4.7時点のアイコンを探してください。

使いたいアイコンを探して選択

たくさん表示されているアイコンの中から、目的に合ったアイコンを探してみます。

サイト上部の検索窓から、マークのイメージに当てはまりそうな英単語で検索すると、見つけやすいはずです。

今回は、お問い合わせっぽいアイコンを表示するために「mail」で検索し、「envelope」というアイコンを見つけたので、クリックします。

コードをコピー

クリックすると、このようなページに移動すると思います。

このページの下の方にある「<i class=”○○○” aria-hidden=”true”></i>」みたいな感じのコードをコピーしてください。

これで、下準備は終わりました。

メニューを編集してアイコンを追加

ここからは、実際にサイトを編集していきます。

といっても、先ほどコピーしたコードをメニューに貼り付けるだけです。

メニューの編集画面に移動

自分のWordPressサイトのダッシュボードに移動して、画面左枠のメニューから「外観」→「メニュー」に移動します。

メニューの編集画面まで来ました。

私の場合、今回はヘッダーメニューを編集したいので、ヘッダーに適用しているメニューを選んで「選択」をクリックします。

私の場合は「ヘッダー用メニュー」というメニューを選択していますが、ここは人によって名前が違います。

コードを貼り付けて保存

出てきたメニューの一覧の中から、アイコンを追加したいメニュー（私の場合は「お問い合わせ」）をクリックします。

この中の「ナビゲーションラベル」がメニューの見出しとして表示される部分なので、ここの先頭にコードを貼り付けます。

貼り付けるとこんな感じになると思います。

あとは「メニューを保存」ボタンをクリックすれば、完了です。

完成したメニューをチェック

これで、サイトのヘッダーメニューにアイコンが表示されているはずです。

元は文字のみのメニューでしたが……。

こんな感じになりました！

実際の見栄えを確認すると感じるのですが、ヘッダーメニューの場合は、枠線だけのアイコンより塗りつぶし部分の多いアイコンを選んだほうが、くっきり見えてわかりやすい気がします。

逆にスッキリ見せたい場合は、枠線だけのアイコンを使ってみてもいいかもしれません。

お問い合わせだけアイコン有りだとおかしいので、全てのメニューにアイコンを追加してみました。

まとめ：ほぼコピペだけでできます

というわけで、とっても簡単な方法でメニューにアイコンを追加して、どこに何があるかわかりやすくすることができました。

要するにコピペだけでできることなので、特に可愛いサイトや視認性の高いサイト作りを目指している方は、ぜひ試してみてくださいね。