AFFINGER6公式マニュアル

Webアイコン「REMIX ICON」を使用する

2022年3月11日

「番外編」カテゴリーはテーマ外のサービスやサポート外のカスタマイズを紹介するカテゴリーです。状況や今後の仕様変更によっては使用できない場合や不具合が生じる可能性もありますので自己責任にてご参考ください。

https://remixicon.com/

Webアイコンを提供しているサイト「remixicon.com」をAFFINGERで使用する方法を紹介致します。

「REMIX ICON」の利用の流れ

CSSを読み込む

githubで公開されているCDNのコードをAFFINGER管理の「その他」->”headに出力するコード”に記入します。

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

クラスを記入する

「remixicon.com」で使用したいアイコンを選択すると以下ような画面が出るので「class="●●●"」の「●●●」だけをコピーします。

使用したいブロックやウィジェットの「アイコンクラス」に記載します。

このように表示されます。

注意点

投稿画面側には表示されません
メモブロックで使用した場合はラベルは利用できません
アイコンやブロックによっては使用できない場合もございます
REMIX ICONは他社サービスのため仕様変更や当機能では使用できなくなる可能性もございます。

あなたにおすすめ

Good / Bad プラグイン [PRO]

Good / Bad プラグインでは、ユーザーの評価を手軽に確認することができるプラグインです。

クリックされたボタンに応じたコメントを作成することができます

※「チップを送る」は他サービス Square を使用した例です。当プラグインに送金及び決済機能はございません。

実装サンプル

[st-reaction-buttons enabled="1" /]

※プラス1ボタン以外はブラウザを再更新することで再度、クリックできます。

クリック数も確認できます

記事一覧で各ボタンのクリック数が確認できるので、ユーザーの記事に対する評価がひとめでわかるようになります。

: Good / Bad プラグイン [PRO]

このプラグインを利用するには別途、WordPressテーマ「AFFINGER6」が必要です Good ...

on-store.net

オススメ記事

1: レイアウト及びウィジェットエリア名称の一部変更について

ver20240115よりレイアウト及びウィジェットエリア名称を一部変更いたしました。下部にPDF ...

2: 【サンプルコード付き】トップページを作る

https://action-sample.com/ 上のサイトのようなカテゴリーで分けた記事一覧の ...

3: Gutenbergを今より少し使いやすくするステップアップガイド

AFFINGERブロックプラグインプラグインを有効化しよう当テーマは「AFFINGERブロックプラ ...