カスタマイズ（Customize）

AFFINGER6 メニューにアイコンを表示する方法｜オリジナル＆Webアイコンを使っておしゃれに！

2845_menu-icon-2

こんにちは "osaboo"です。"@osaboo_Bot"

AFFINGER6の「メニューにアイコンを表示する方法」を初心者さん向けに解説します。

Question
Question

メニューにアイコンを付けるにはどうすればいい？

ナビゲーションメニューにアイコンを表示して、見た目をもっとわかりやすく・おしゃれにしたい！

AFFINGER6なら、オリジナルアイコンもWebアイコン（REMIX ICON）も、メニューにカンタンに表示できます。

この記事では、初心者さんにもわかりやすく、メニューにアイコンを表示する方法とカスタマイズのコツを解説します。
画像付きで手順を紹介しているので、デザイン性をアップさせたい方はぜひ参考にしてください。

こんな方におすすめ！

  • メニューにアイコンをつけて「見やすくわかりやすく」したい
  • サイトの見た目をおしゃれにしたい
  • AFFINGER6でメニューの装飾に悩んでいる

この記事でわかること！

  • メニューにオリジナルアイコンを表示する方法
  • メニューにWebアイコン（REMIX ICON）を表示する方法
  • メニュー内アイコンのカスタマイズ（サイズ・色など）
  • 実際の表示イメージとHTMLの記述例

それではご覧ください。

AFFINGER6でメニューにアイコンを表示するには？

AFFINGER6では、ナビゲーションメニューに「オリジナルアイコン」や「Webアイコン（REMIX ICON）」を追加して、メニューの見た目をわかりやすく＆デザイン性アップさせることができます。

設定方法もとても簡単！WordPress管理画面の「外観 ＞ メニュー」から、メニュー項目の「ナビゲーションラベル」にアイコン用のHTMLタグを加えるだけでOKです。

特別なプラグインや難しいカスタマイズは不要で、初心者さんでも気軽に取り入れられます。

「オリジナルアイコン」や「Webアイコン（REMIX ICON）」に使い方がちょっと不安な方は、以下を参考にして下さい。

オリジナルアイコンの使い方はこちら！

Webアイコン（REMIX ICON）の使い方はこちら！

オリジナルアイコンをメニューに表示する方法

AFFINGER6には、独自の「オリジナルアイコン」があらかじめ用意されています。

これらのアイコンは、管理画面のカスタマイズや投稿編集画面など、さまざまな場所で使用できますが、メニューにも表示することが可能です。

手順は次の通りです。

  • Menu 『WordPress管理＞❶ダッシュボード＞❷外観＞❸メニュー』をクリックします。
  • ❹アイコンを付けたいメニューを選択します。
  • ❺ナビゲーションラベルにHTMLでアイコンを記述します。
  • ❻『メニューを保存』して完了です。
2845-1｜WordPress管理｜ダッシュボード｜外観｜メニュー｜メニュー選択｜ナビゲーションラベル

ナビゲーションラベルへの記述について

アイコンを表示させるには、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）で表示したメニューアイコン（オリジナルアイコン）のサンプルです。

2845-2｜メニュー｜アイコン記述サンプル

アイコンの設定ポイント

以下のスタイルを調整することでイメージ通りになるのではないでしょうか。

  • style="margin-right:0.1em;color:#f60606;font-size:16px;"
    1. margin-right:0.1em → アイコンとテキストの余白を調整
    2. color:#f60606 → アイコンの色を調整
    3. font-size:16px → アイコンのサイズを調整
  • デフォルトのままでいい場合は、記述を削除してOKです。

Webアイコン（REMIX ICON）をメニューに表示する方法

AFFINGER6では、REMIX ICON（Webアイコン）を使って、メニューに多彩なアイコンを表示することができます。視覚的なわかりやすさやデザイン性をアップさせたいときにおすすめです。

事前準備：REMIX ICONの読み込み設定

まず、テーマ管理画面でWebアイコン（REMIX ICON）が使えるようにしておきましょう。

REMIX ICONの読み込み設定は以下の記事でご紹介しています。あわせてご覧ください。

2760_web-icon-remix-icon-1
AFFINGER6 Webアイコン（REMIX ICON）の使い方｜かんたん設定＆デザイン活用術！

AFFINGER6で使えるWebアイコン（REMIX ICON）の挿入・設定方法を初心者向けにやさしく解説。HTMLやCSSなしで、記事をおしゃれに装飾できます！

基本の記述方法はオリジナルアイコンと同じで、違うのは読み込むアイコンの「クラス名」だけです。

Webアイコン（REMIX ICON）の中から、使いたいアイコンを選んで指定します。

  • Webアイコン（REMIX ICON）のアイコン一覧（クラス名）は、Remix Icon公式サイトで 確認できます。

まとめ！AFFINGER6 メニューにアイコンを表示する方法｜オリジナル＆Webアイコンを使っておしゃれに！

AFFINGER6で、メニューにアイコンを表示する方法をご紹介しました。

AFFINGER6では、ナビゲーションメニューにアイコン（オリジナル・Webアイコン）を簡単に追加することができます。HTMLでクラス名を指定するだけで、テキストにアイコンを添えて、見た目のわかりやすさや印象を大きくアップできます。

  • オリジナルアイコンとWebアイコン（REMIX ICON）のどちらも使用可能
  • アイコンは <i> タグ＋クラス名で表示
  • style="" 属性でサイズや色も自在にカスタマイズ
  • サイト全体のデザインに合わせて、視認性と統一感を高めましょう！

ちょっとしたアイコン表示でも、サイトの使いやすさ・おしゃれさがグッと変わります。

ぜひ、チャレンジしてみて下さい。この記事がお役に立てば嬉しいです。

「最後まで、ご観覧いただきありがとうございました。」
また、次の記事で…お会いしましょう。＼^^／

-カスタマイズ（Customize）
-,