初心ちゃんメニューにアイコンを使ってるサイトのマネしてみたいな。ブログの中でアイコンを使うと見た目がグンと良くなります。このサイトでもメニューにアイコンを使用していますが、文字だけで表示するより確実にアイキャッチ効果があります。アフィンガー5を使っていてマネをしてみたいという方のために、この記事ではメニューにアイコンを表示させる方法を解説します。アフィンガー5でアイコンを表示させるにはFontAwesomeを使用します。FontAwesomeとはFontAwesomeは無料で使えるWebアイコンフォントです。アイコンの種類がとにかく豊富でブログの中でも色々なところで使うことができます。有料のアイコンもありますが、種類が豊富なので無料分だけでも十分です。アフィンガー5以外のテーマでも使用することは可能です。アイコンの探し方それではメニューに表示させるアイコンを探してみましょう。メニューの内容に合ったアイコンを探さないといけないので検索窓に英語でキーワードを入力します。fontawesomeは日本語対応ではないので英語での入力が必要です。いろいろなアイコンがあって見ているだけでも楽しいですが、キーワード検索をすると該当するアイコンが抽出されます。注意ポイント2020年4月1日現在、アフィンガー5はfontawesomeのver4.7までしか対応していません。使えるアイコンの数はver5の方が多いですが表示されない可能性があるので使わない方が無難です。それでは当サイトのメニューにも使っているスーツケースのアイコンを探してみましょう。検索窓にsuitcaseと入力するとスーツケースのアイコンが抽出されますのでクリックしてみましょう。画面下に生成されたコードがスーツケースアイコンを表示させるコードになっています。使用するアイコンが決まったらアフィンガーのメニューに表示させましょう。ワードプレスの管理メニューにログインして外観>メニューを選択します。メニュー選択画面です。今回はヘッダー部のメインメニューの「TRAVEL」の文字の前にアイコンを表示させたいのでヘッダー用メニューを選択します。「TRAVEL」の項目のプルダウンメニューを開き、先程のスーツケースのコードをナビゲーションラベルに入力します。コピペで大丈夫なので簡単です。aria-hidden="true"></i>アフィンガー5で行う設定はこれだけです。まとめコピペだけの簡単な作業でメニューにアイコンを表示させることができました。他のメニュー項目にもアイコンを表示させるとこんな感じで見た目もすごく良くなりました。皆さんも是非FontAwesomeのアイコンを使ってみましょう。ブログランキングに参加しています。よろしければクリックお願いします。コメントをキャンセルメールアドレスが公開されることはありません。ka-23マイルを使った国内旅行や居酒屋巡りが大好きな40代のサラリーマンです。出張が多い鹿児島のホテルや美味しい食べ物を記事にしています。鹿児島のホテル選びの参考になるとうれしいです。Domesenlife。