こんにちは "osaboo"
です。"@osaboo_Bot"
AFFINGER6でメニューにアイコンを表示する方法を解説。Webアイコンやオリジナルアイコンの設定手順から、おしゃれに整えるポイントまでまとめています。
メニューにアイコンを付けるにはどうすればいい？
＼初心者でも安心！ コスパ最強のWordPressテーマ／
＼効果測定に必要なプラグインをまとめた特別セット／
AFFINGER6でメニューにアイコンを表示するには？
AFFINGER6では、ナビゲーションメニューに「オリジナルアイコン」や「Webアイコン（REMIX ICON）」を追加して、メニューの見た目をわかりやすく＆デザイン性アップさせることができます。
設定方法もとても簡単！WordPress管理画面の「外観 ＞ メニュー」から、メニュー項目の「ナビゲーションラベル」にアイコン用のHTMLタグを加えるだけでOKです。
特別なプラグインや難しいカスタマイズは不要で、初心者さんでも気軽に取り入れられます。
オリジナルアイコンをメニューに表示する方法
AFFINGER6には、独自の「オリジナルアイコン」があらかじめ用意されています。
これらのアイコンは、管理画面のカスタマイズや投稿編集画面など、さまざまな場所で使用できますが、メニューにも表示することが可能です。
ナビゲーションラベルへの記述について
アイコンを表示させるには、HTMLに専用のタグとクラスを記述します。
HTMLでアイコンを表示させるには、次のように記述します。
<i class="クラス名" style="margin-right:0.1em;color:#f60606;font-size:16px;" aria-hidden="true"></i>メニュー名
記述内容は以下の通りです。
| 記述 | 内容 |
|---|---|
| class="〇〇" | オリジナルアイコンのクラス名 |
| style="〇〇" | マージン・カラー・サイズなど |
| aria-hidden="true" | 読み上げ不要の指示（無くてもOK） |
| <i…………></i>〇〇 | メニュー名 |
記述例（コードサンプル）
<i class="st-svg-caret-right" style="margin-right:0.1em;color:#f60606;font-size:16px;" aria-hidden="true"></i>ホーム上のコード（HTML）で表示したメニューアイコン（オリジナルアイコン）のサンプルです。
- オリジナルアイコンの一覧（クラス名）は、AFFINGER6公式マニュアルで確認できます。
Webアイコン（REMIX ICON）をメニューに表示する方法
AFFINGER6では、REMIX ICON（Webアイコン）を使って、メニューに多彩なアイコンを表示することができます。視覚的なわかりやすさやデザイン性をアップさせたいときにおすすめです。
事前準備：REMIX ICONの読み込み設定
まず、テーマ管理画面でWebアイコン（REMIX ICON）が使えるようにしておきましょう。
関連記事 REMIX ICONの読み込み設定は以下の記事でご紹介しています。あわせてご覧ください。
-
-
AFFINGER6のWebアイコン（Remix Icon）の使い方｜設定方法と活用を解説
AFFINGER6のWebアイコン（Remix Icon）の使い方を初心者向けに解説。設定方法から使い方、デザインに活かすコツまでわかりやすくまとめています。
基本の記述方法はオリジナルアイコンと同じで、違うのは読み込むアイコンの「クラス名」だけです。
Webアイコン（REMIX ICON）の中から、使いたいアイコンを選んで指定します。
- Webアイコン（REMIX ICON）のアイコン一覧（クラス名）は、Remix Icon公式サイトで 確認できます。
まとめ！AFFINGER6でメニューにアイコンを表示する方法｜設定手順を解説
今回は、AFFINGER6でメニューにアイコンを表示する方法をご紹介しました。
AFFINGER6では、ナビゲーションメニューにアイコン（オリジナル・Webアイコン）を簡単に追加できます。
HTMLでクラス名を指定するだけで、テキストにアイコンを添え、見た目のわかりやすさや印象を高めることが可能です。
アイコンは「視認性」と「デザイン性」を同時に向上させる要素なので、サイト全体の統一感を意識して取り入れるのがポイントです。
ちょっとした工夫でも、使いやすさや印象は大きく変わります。
まずはメニューから取り入れて、より見やすいサイトに整えてみてください。
