メニューアイコン表示方法

AFFINGER5の使い方 ブログ

AFFINGER5(アフィンガー)でメニューにアイコンを表示させる方法

2021年3月6日

悩んでいる人
ブログサイトでメニューにアイコンがついているのを見かけるんだけど、どうやってつけるんですか?

 

本記事ではこのようなお悩みについて、サクッと解説いたします。

 

あなたは、ブログやサイトを見ているときメニューバーにアイコンがついているのを見たことありませんか?

 

メニューバーにアイコンがついているとパッと見で何の項目かすぐにわかるだけでなく、見た目もかっこよくなってちょっとおしゃれに見えますよね。

 

ブログやサイトを見にきてくれた人にもメニューの内容がひと目でわかるようになるので、アイコンをつけておくと親切です。

 

ちなみに初心者の方でも簡単にできるので、本記事を見ながら真似するだけでオッケーです!

 

それでは早速設定していきましょう。

 

 

AFFINGER5(アフィンガー)でメニューにアイコンを表示させる方法

メニューバーにアイコンを表示させる方法

メニューバーに表示させるアイコンはFont Awesomeというサイトのアイコンを表示させていますので、まずはHPにアクセスしてください。

≫ Font Awesomeにアクセスする

 

すると下記画面が開かれますので、この中から表示させたいアイコンを選びましょう。

 

fontawesome

 

アイコンを選ぶと画面に選んだアイコンのコードが出てきますので、枠内の部分をコピーしてください。

 

アイコン追加方法

 

これでFont Awesome側の準備はオッケーです!

 

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

それでは、ここから先ほどのアイコンを実際に追加する作業になります。

 

作業と言ってもさきほどコピーしたコードをメニューに貼り付けるだけなので、とっても簡単に追加できますよ!

 

まずはメニュー画面に移動したいので、ダッシュボードの『外観』『メニュー』の順で進みましょう。

 

外観メニュー画面

 

 

アイコンを追加するメニューを開く

メニュー画面を開いたら、実際にアイコンを追加したいメニューを開きましょう。

 

今回は、お問い合わせにメールマークを表示させたいので「お問い合わせ」の項目を選択します。

 

お問い合わせ

 

コードを貼り付け

 

「お問い合わせ」の文字の前に、先ほどコピーしたコードを貼り付けて保存をします。

 

お問い合わせ2

 

文字の前にアイコンを表示させたい場合は、文字の前にコードを貼り付けてください。

 

お問い合わせ

 

メモ

後ろにアイコンを表示させたい場合は、文字の後ろにコードを貼り付ければオッケーです!

 

 

TOPページでメニューバーを確認

実際にアイコンがついているか確認してみるとこんな感じになりました。

 

アイコン

 

メールマークが表示されていてパッと見ですぐに何のメニューかわかりやすくなりましたね!

 

全てのメニューにアイコンを設定すると見栄えがよくなってちょっといい感じのメニューバーに変わりました。

 

追加後メニューバー

 

 

まとめ

AFFINGER5(アフィンガー)でメニューにアイコンを表示させる方法について解説しました。

 

実際にやっていることは、表示させたいアイコンのコードをコピーしてメニューに貼り付けているだけなので、誰でも簡単に追加できちゃいます。

 

ちょっとしたことでサイトやブログの見栄えが良くなるので、まだアイコンを追加していない方はパパッと追加しちゃいましょう!

 

そして今回、表示方法の解説をした内容は、当ブログで使用している「AFFINGER5」というテーマにて作成しています。

 

有料テーマですが、優秀ですので気になる方は関連記事をご覧ください。

 

関連記事①:AFFINGER5(アフィンガー5)の口コミ・評判はどうなの?【リアルな声を調査】

関連記事②:AFFINGER5(アフィンガー)のメリット・デメリットを解説。

関連記事③:【AFFINGER5】アフィンガー 5の値段とコスパはどうなの?

 

AFFINGER5の購入方法については、下記記事を参照し進めていただくと簡単に完了できます。

AFFINGER5(アフィンガー5)購入方法とインストール手順を優しく解説

 

AFFINGER5以外の他のテーマが気になる方はWordPress(ワードプレス)ブログでおすすめのテーマ厳選8つ!にて解説しているのであわせて見てみてください。

 

今回はここまでとなります。

-AFFINGER5の使い方, ブログ

© 2021 イスとブログ