ブログ

WING(affinger5) ヘッダーメニューにアイコンを簡単に表示させる方法|プラグイン不要

WING(アフィンガー5)AFFINGER5

 

WING(affinger5) って何?

この記事はWING(affinger5)のメニューにアイコンを表示させる方法です。

 

WING(affinger5)は有料ですが、一度購入すると無料でアップデートされた機能が使える点が人気の秘密。

ASPのブログコンテストで上位入賞したサイトはほとんどWING(affinger5) といってよいくらい。稼げるんですね、きっと。

 

ただ初心者には難しい、中級の人以上と言われています。

でも超初心者のわたしでさえ何とかなったので、調べることが好きな人なら大丈夫です(^-^)/

 

ヘッダーメニューにアイコンを表示する方法

さて本題。今回の記事はヘッダーメニューに小さなアイコンを表示させる方法です。

最近はメニューにアイコンがあるブログをよく見かけるようになりました。

やってみたいな~と思っていたら、なんと簡単にできることがわかったんです!いざ!

 

 

step
1
「外観」>「メニュー」でメニューを作る

WING(affinger5) 外観

 

何はともあれ「メニュー」を作りますよ。

例としてヘッダー用メニューを作ることにします。フッターやサイドバーのメニューも同じです。

 

WING(affinger5) メニューにアイコンを表示させる方法

 

 

step
2
Font Awesomeでアイコンを選びます

WING(affinger5) メニューにアイコンを表示する方法

 

英語で検索しよう!

ここにアクセス>>https://fontawesome.com/v4.7.0/icons/

 

気に入ったアイコンを見つけたら、次のステップに進みますよ。

 

 

step
3
アイコンを決めたらタグをコピーします

WING(affinger5) メニューにアイコンを表示させる方法

赤枠部分を全部コピーします!

 

 

step
4
準備したメニューの「ナビゲーションラベル」にタグを貼ります

WING(affinger5)メニューにアイコンを表示させる方法

 

コピーしたタグを「ナビゲーションラベル」に貼って、後ろにタイトル名を入力するとこんな感じに出来上がります。

 

WING(affinger5) ヘッダーメニューにアイコンを表示する

 

以上です。簡単!(^-^)/

Copyright© びびあんジャーナル , 2020 All Rights Reserved.