Function（機能紹介・使い方）

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

2760_web-icon-remix-icon

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

AFFINGER6で使える「Webアイコン（REMIX ICON）」の使い方を、初心者さんにもわかりやすく解説します。

Question
Question

Webアイコン（REMIX ICON）ってなに？

AFFINGER6には、記事をおしゃれに仕上げるための「Webアイコン（REMIX ICON）」機能があります。
HTMLやCSSといったむずかしい知識は不要で、初心者さんでも簡単に設定・挿入ができるのが魅力です。
この記事では、AFFINGER6のWebアイコンの基本的な使い方から、便利なカスタマイズ方法までわかりやすく解説します。

こんな方におすすめ！

  • AFFINGER6でWebアイコン（REMIX ICON）を使ってみたい
  • 記事をもっとおしゃれに、視覚的にわかりやすく装飾したい
  • HTMLやCSSなしで、かんたんにアイコンを挿入したい初心者さん
  • アイコンの設定場所や使い方がよくわからないと感じている

この記事でわかること！

  • AFFINGER6でWebアイコン（REMIX ICON）を使えるようにする設定方法
  • Webアイコン（REMIX ICON）の基本的な使い方とポイント
  • アイコンを挿入できるブロックや設定項目の確認方法
  • Webアイコンの色やサイズのカスタマイズ方法（初心者でも簡単）
  • 実際の挿入例を交えた、迷わず使える手順とコツ

それではご覧ください。

AFFINGER6でWebアイコン（REMIX ICON）を使う前に知っておこう

Webアイコン（REMIX ICON）

  • Webアイコン（REMIX ICON）ってなに？
  • AFFINGER6でWebアイコンを使えるようにするには？
  • オリジナルアイコンとの違い

Webアイコン（REMIX ICON）ってなに？

「REMIX ICON（リミックスアイコン）」は、無料で使えるオープンソースのアイコンライブラリで、さまざまなジャンルのアイコンが豊富に用意されているのが特長です。

2760-1｜REMIX ICON

シンプルで洗練されたデザインが多く、Webサイトやブログの装飾にもぴったり！

AFFINGER6ではこのREMIX ICONを、難しい設定なしで挿入できる仕組みが用意されています。

AFFINGER6でWebアイコンを使えるようにするには？

REMIX ICON（Webアイコン）のCDNコードをheadタグに読み込む設定をすることで、オリジナルアイコンと同じように簡単に使えるようになります。

それでは順番に見ていきましょう。

CDNのコードを取得する

githubで公開されているCDNのコードをコピーします。

2760-2｜REMIX ICON

以下のコードをコピーしてもOKです。（2025/05/07←取得）

<link
    href="https://cdn.jsdelivr.net/npm/remixicon@4.5.0/fonts/remixicon.css"
    rel="stylesheet"
/>

headに出力するコードとして設定

  • WordPress管理画面での操作になります。

Menu 『WordPress管理＞❶ダッシュボード＞❷AFFINGER管理＞❸その他』をクリックします。

2760-3｜AFFINGER管理｜その他

以下の画面が表示されるところまで下側にスクロールします。

CDNのコードをペーストします。

2760-4｜AFFINGER管理｜その他｜コードの出力

『Save』をクリックして完了です。

2760-5｜AFFINGER管理｜その他｜コードの出力｜Save

以上で Webアイコン「REMIX ICON」の読み込みが可能になりました。
※ オリジナルアイコンと同じように使えます。

オリジナルアイコンとの違い

AFFINGER6には、REMIX ICON以外にも「オリジナルアイコン」と呼ばれる標準アイコンがあります。

比較項目オリジナルアイコンWebアイコン（REMIX ICON）
収録方法AFFINGER6に内蔵REMIX ICONを外部から読み込み
見た目ややシンプル種類豊富でモダンなデザイン
挿入方法ショートコード or 設定画面ブロックメニューやショートコード
カスタマイズ性高い（色・大きさ自由）同様にカスタマイズ可

両方とも簡単に使えるので、使いたいデザインに応じて使い分けるのがおすすめです！

Webアイコン（REMIX ICON）の基本的な使い方

手順は次の通りです。

  • Webアイコン（REMIX ICON）の公式サイトにアクセスする。
  • 使いたいアイコンをリストから選ぶ。
  • アイコンコードをコピーして、アイコンのクラス名を抜粋する
  • テキストやブロック設定箇所にアイコンのクラス名をオリジナルアイコンと同じ容量で記述する。

REMIX ICON（リミックスアイコン）の公式サイトでアイコンコードを取得します。

対象のアイコンをクリックし、表示されるポップアップメニューから「コピー」をクリックします。

2760-6｜REMIX ICON

コピーしたアイコンコード（サンプル）

<i class="ri-arrow-left-up-line"></i>

投稿（エディタ）画面に、「<i class="ri-arrow-left-up-line"></i>」をそのまま貼ることはできません。

記事内のブロックでアイコンを使うときは、ダブルクオーテーション内にある「アイコンのクラス名」を使用します。

psアイコンのクラス名（マーキング部）のみを公式サイトからコピーしても大丈夫です。

2760-7｜REMIX ICON

アイコンのクラス名は、オリジナルアイコンと同じように使えます。

各ブロックのアイコン挿入例（Webアイコンとオリジナルアイコンの比較）

アイコンの挿入方法、「色・大きさ」などのカスタマイズ方法は こちらの記事で詳しくご紹介しています。
あわせてご覧ください。

AFFINGER6 オリジナルアイコンの使い方｜標準機能で簡単！

AFFINGER6でオリジナルアイコンを使う方法を初心者向けに解説！テーマに標準で搭載されているアイコンをHTMLや CSSを使わずに挿入・カスタマイズする方法をご紹介します。

テキストに直接アイコンコード（ショートコード）を入力したサンプル

以下のサンプルでは見やすい様に「24px」のサイズで表示しています。記述例とあわせて、実際のアイコン表示もご確認ください。

[st-i class="ri-arrow-left-up-line" add_style="font-size: 24px"] →

上サンプルの色を変更し、読み上げ不要の記述を追加しました。

[st-i class="ri-arrow-left-up-line" add_style="color: #e60033; font-size: 24px;" aria-hidden="true"] →

コードの記述について

  • aria-hidden="true"
    • 画面には表示されていても、「この要素は読み上げなくていいよ」と伝える属性です。
  • add_style="〇〇"
    • アイコンの見た目をカスタマイズするための装飾用の指定に使う属性です。
    • 〇〇には、「色・サイズ・余白・表示位置」などを設定できます。
スタイル書き方例
色を変えるcolor: #007bff;（青）
サイズを変えるfont-size: 20px; または 2em
余白をつけるmargin-right: 8px;（テキストとの間にスペース）
アイコンを中央にdisplay: block; text-align: center;

補足

  • サイズは em指定にすると、文字サイズに比例して調整されるので便利です。
  • 色はカラーコードでも名前でもOKです。（例：red, #ff0000 など）
  • プレビューで確認して、エディターに反映されないことがある点に注意してください。

AFFINGER：メモのサンプル

「AFFINGER：メモ」で Webアイコン（REMIX ICON）を150％で挿入したサンプルです。
※ ラベルは表示できません。

「AFFINGER：メモ」で オリジナルアイコンを150％で挿入したサンプルです。
※ ラベルは「test」です。

AFFINGER：マイボックスのサンプル

webアイコン（REMIX ICON）

「AFFINGER：マイボックス」で Webアイコン（REMIX ICON）を挿入したサンプルです。

オリジナルアイコン

「AFFINGER：マイボックス」で オリジナルアイコンを挿入したサンプルです。

AFFINGER：タイトル付きフリーボックス

Webアイコン（REMIX ICON）

「AFFINGER：タイトル付きフリーボックス」で Webアイコン（REMIX ICON）を挿入したサンプルです。

オリジナルアイコン

「AFFINGER：タイトル付きフリーボックス」で オリジナルアイコンを挿入したサンプルです。

AFFINGER：バナー風ボックス

Webアイコン（REMIX ICON）

「AFFINGER：バナー風ボックス」で Webアイコン（REMIX ICON）を挿入したサンプルです。

オリジナルアイコン

「AFFINGER：バナー風ボックス」で オリジナルアイコンを挿入したサンプルです。

AFFINGER：カスタムボタンのサンプル

Webアイコン（REMIX ICON）

オリジナルアイコン

Webアイコン（REMIX ICON）は、エディター画面では表示されません。プレビュー画面または公開後のページで確認できます。

アイコンを挿入できる場所や方法（ブロック／設定項目）

AFFINGER6では、Webアイコン（REMIX ICON）をさまざまな場所に挿入できます。

使い方によって、「直接HTMLを入力する方法」や「追加 CSS クラスを指定する方法」が選べます。

主に使える場所・ブロックの例

ブロック名挿入方法備考
段落（pタグ）ブロック テキストに直接入力文字と一緒に使いやすい
AFFINGERブロックアイコンクラス名を設定画面に入力バリエーションを拡大
ボタンブロックアイコンクラス名を設定画面に入力ボタンの前後に設置可
カラム・ボックス装飾カスタマイズや装飾アイコンとして使用可デザインのアクセントに便利
メニューブロックHTML編集で直接記述が必要メニュー名の前後に配置可
ウィジェット（HTML）<i>タグをHTMLとして記述サイドバー等で活用できる

挿入のポイント

  • テキストと一緒に表示したいときは段落ブロックが便利です。
  • デザインとして使いたいときは、ボタンやカラムと組み合わせると映えます。
  • 設定パネルの「追加 CSS クラス」に入力するだけで、HTML不要で使えるケースも多いです。

まとめ！AFFINGER6 Webアイコン（REMIX ICON）の使い方｜かんたん設定＆デザイン活用術！

AFFINGER6では、Webアイコン（REMIX ICON）を使うことで、記事に視覚的なアクセントを加えることができます。HTMLやCSSの専門知識がなくても、以下のようにシンプルな手順で使えます。

  • Webアイコン（REMIX ICON）の公式サイトにアクセスする。
  • 使いたいアイコンをリストから選ぶ。
  • アイコンコードをコピーして、アイコンのクラス名を抜粋する
  • テキストやブロック設定箇所にアイコンのクラス名をオリジナルアイコンと同じ容量で記述する。

AFFINGER6にWebアイコン（REMIX ICON）を読み込む設定をすれば、オリジナルアイコンと同じ感覚で手軽に使えるようになります。

ぜひ、トライして下さい。この記事がお役に立てば嬉しいです。

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

-Function（機能紹介・使い方）
-