サイト改築中のため、表示崩れがあります

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

4 min

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

参考元:【公式】WordPressテーマAFFINGER(アフィンガー)

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

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

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

[st-kaiwa1]追加プラグインなどを入れる必要はありません!

ほぼコピペだけでできる、とーっても簡単な方法ですよ![/st-kaiwa1]

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

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

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

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

[st-kaiwa1]同じ方法で、スマホ用のスライドメニューやサイドメニューなど、ヘッダー以外のメニューにもアイコンを追加できますよ![/st-kaiwa1]

FontAwesomeのサイトにアクセス

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

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

[st-minihukidashi fontawesome=”” fontsize=”80″ fontweight=”” bgcolor=”#89D0F4″ color=”#fff” margin=”0 0 0 -6px”]ここにアクセス[/st-minihukidashi]

[st-cmemo fontawesome=”fa fa-external-link” iconcolor=”#89D0F4″ bgcolor=”#E8F6FF” color=”#000000″ iconsize=”200″]Font Awesome Icons[/st-cmemo]

引用元:Font Awesome Icons
[st-minihukidashi fontawesome=”” fontsize=”80″ fontweight=”” bgcolor=”#ef5350″ color=”#fff” margin=”0 0 0 -6px”]ココに注意[/st-minihukidashi]

[st-cmemo fontawesome=”fa-exclamation-circle” iconcolor=”#ef5350″ bgcolor=”#ffebee” color=”#000000″ iconsize=”200″]

2019年10月現在、AFFINGER5はFontAwesomeのバージョン4.7までしか対応していないので、FontAwesomeのそれ以降のバージョンで追加されたアイコンは表示されない可能性が高いです。

Font Awesome Iconsのサイトに移動すると、最新バージョンのページへの移動を促されるかもしれませんが、キャンセルしてバージョン4.7時点のアイコンを探してください。

[/st-cmemo]

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

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

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

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

参考:https://fontawesome.com/v4.7.0/icons/

コードをコピー

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

参考:https://fontawesome.com/v4.7.0/icon/envelope

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

参考:https://fontawesome.com/v4.7.0/icon/envelope

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

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

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

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

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

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

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

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

[st-kaiwa1]ここで別のメニューを選べば、スマホのスライドメニューやサイドメニューなどの、他のメニューにも追加できます。

追加先のメニューはサイトのどこに適用されているのかを必ず確認してから、作業を進めてくださいね。[/st-kaiwa1]

コードを貼り付けて保存

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

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

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

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

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

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

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

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

[st-kaiwa1]パッと見で「メールが送れる」って感じがして、わかりやすくなった気がする![/st-kaiwa1]

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

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

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

[st-kaiwa1]これで、メニューから複数の記事を読んでくれる方が増えるといいな~![/st-kaiwa1]

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

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

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

[st-kaiwa1]AFFINGER5は機能が豊富すぎて、この記事のように設定箇所がどこか迷ってしまうくらい、自由度の高いテーマです。

ただ、その分とってもサイト作りが楽しいので、このブログみたいなサイトを作ってみたい方は、ぜひチェックしてみてくださいね。[/st-kaiwa1]

[st_af id=”3493″]

カテゴリー:
タグ:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA