AFFINGERの使い方

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

2021年3月6日

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

 

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

 

この記事を書いた人

  • イスさん。ブログ1年目。記事執筆数170本以上
  • ブログ副業収益6.2万円
  • ブロガー・Webライターとして活動中
  • 詳しいプロフィールはこちら / Twitter:@istblog1

 

ブログのメニューバーに下記画像のような、アイコンがついているのを見たことありませんか?

 

追加後メニューバー

 

アイコンがついているとパッと見で何の項目かすぐにわかるだけでなく、見た目もかっこよくなりオシャレに見えますよね。

 

ユーザーにもメニューの内容がひと目でわかるようになるので、アイコンをつけておくと利便性もあがります。

 

このアイコンの設定は初心者の方でも簡単にできるので、本記事を見ながら真似するだけでオッケーです!

 

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

 

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

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

 

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

≫ Font Awesomeにアクセスする

 

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

 

fontawesome

 

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

 

アイコン追加方法

 

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

 

メニュー画面からアイコンを追加する

 

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

 

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

 

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

 

外観メニュー画面

 

 

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

 

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

 

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

 

お問い合わせ

 

コードを貼り付ける

 

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

 

お問い合わせ2

 

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

 

お問い合わせ

 

メモ

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

 

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

 

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

アイコン

 

メールマークが表示されていて、何のメニューかわかりやすくなりましたね。

 

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

 

追加後メニューバー

 

 

まとめ

 

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

 

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

 

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

 

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

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

 

また当ブログよりAFFINGERをご購入いただくと、豪華10特典が付与されますので内容をチェックしてみてください。

≫ イスとブログ限定10特典つきACTION(AFFINGER6)の購入はこちら

 

おわります

    • この記事を書いた人

    イスさん

    ブログ1年目 | ゆるめのフリーランスブロガー | 月1万円稼ぐまでに必要な情報をわかりやすくまとめています

    -AFFINGERの使い方