ここでは「REMIX ICON」のWebアイコンをAFFINGER6で利用する手順を詳しく解説します。
「REMIX ICON」とは、1300もの汎用的で使いやすいWebアイコンを無償提供しているサイトです。
サイトはこちら
→ https://remixicon.com/
Webアイコンといえば「Font Awesome」が有名なんですが、実はいろいろ制限があって使いにくいところがあります。
たとえば、AFFINGER専用ブロックでは一部のアイコンが使えないとか・・・
「REMIX ICON」のいいところは、すべてのWebアイコンをAFFINGER専用ブロックで使えるということです。
それでは「REMIX ICON」を使用する手順を解説していきます。
「REMIX ICON」を使用する準備
「REMIX ICON」を使用するための準備として、「CDNコード」を<head>タグに追加します。
アフィンガーはAFFINGER管理から簡単に「CDNコード」を追加できます。
CDNコードをコピーする
まずはじめに、「CDNコード」をコピーします。
下記コードをコピーしてください。
<link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">またはGitHubで直接コードをコピーしてください。
GitHubで直接CDNコードをコピーする場合は下記リンクより行ってください。
https://github.com/Remix-Design/remixicon#cdn
CDNコードのイメージ
「headに出力するコード」に貼り付ける
AFFINGER管理をクリックし「その他」を開きます。
下へスクロールすると「 上級者向け 」メニューがあります。
その下にある「 コードの出力 」の「headに出力するコード」の欄に、先ほどコピーしたCDNコードを貼り付けます。
これで「REMIX ICON」を使用する準備は完了です。
「REMIX ICON」のWebアイコンの使い方
「REMIX ICON」のWebアイコンを使用する方法は2つあります。
- AFFINGER専用ブロックで使用する
- AFFINGER専用ショートコードで使用する
詳しく解説します。
AFFINGER専用ブロックで使用する
AFFINGER専用ブロックとは、クリップメモやマイボックス、見出し付きフリーボックスなどの装飾ブロックのことです。
これらに使用するのは簡単で、ブロックの設定にアイコンクラスを記入するだけです。
たとえばクリップメモでWebアイコンの「はかり」を使いたい場合は、
<i class="ri-scales-2-fill"></i>
赤文字の部分だけを「アイコンクラス」に記入すればOKです。
AFFINGER専用ショートコードで使用する
AFFINGER専用ショートコードとは、任意の場所にWebアイコンを表示させるための専用コードです。
たとえば、見出しや文章中などにもWebアイコンが使えます。
こんな感じで！→「 」
見出しの場合はこんな感じです
挿入するショートコード
[st-i class="クラスを記入"]たとえば「ピン」を表示させたい場合は、ピンのクラス（ri-pushpin-fill）を以下のように入力します。
[st-i class="ri-pushpin-fill"]するとピンのWebアイコンが文章の途中でも「」文章の最後でもどこでも表示できますよ。「」
さらには、Webアイコンの色やサイズも自由に変更できます。
こんな感じで！→
Webアイコンの色やサイズを変更する方法については以下の記事に詳しく書いているので、そちらを参考にしてください。
（記事へのリンク）
