今回はAFFINGERの、タグボックスでwebicon(ウェブアイコン、ウェビコン)の設定をする話。
AFFINGERに標準で搭載されているクリップメモタグやボックスタグはとても便利ですよね。
こういうのとか
はてな
こういうやつ
こうしたタグで呼び出せるボックスは重宝しますが、さらにカスタマイズをしてオリジナリティを出したいと思ったときはありませんか?
そんなときに便利なのが、webアイコン(webicon)をカスタマイズすること!
webiconを変更することで、さきほどのボックスもこんなふうに変更することができます。
りんごマークにしたり
android
ドロイドくんにしたり
こういう遊びごころのあるボックスが作れたら楽しいですよね!
ブログの自由度が大幅にアップするので、オリジナリティも出しやすくなりますね!
ということで今回は、AFFINGERのwebiconを変更する方法について解説していきたいと思います。
AFFINGERカスタム情報まとめ
AFFINGER標準搭載のwebアイコンに変更する(初心者向け)
例として、このボックスをいじっていこうと思います。
はてな
これをいじる
このボックスを表示させるAFFINGERタグはこちらです。
shortcode(コピペする時は赤太字は解除してください) [st-mybox title="はてな" webicon="st-svg-question-circle" color="#03A9F4" bordercolor="#B3E5FC" bgcolor="#E1F5FE" borderwidth="2" borderradius="5" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"] これをいじる [/st-mybox]
webiconを変更する場合には、このタグの赤太字にした部分を変更していきます。
webicon="st-svg-question-circle"
この部分ですね。
" " の中身が、なんのアイコンを表示するかを指定しています。
この中のコードを変更することで、アイコンを変更することができます。
AFFINGERには、標準でいくつかのアイコンセットが登録されています。
アイコンセットを呼び出すには、まず「タグ」を選択します。(下はClassic Editor画面です)
続いて、
[/]ショートコード補助 > webアイコン(クラス) >
と進むと、いろいろなアイコンを選ぶ事ができると思います。
この中から例えば、ハートを押してみましょう。
するとこのようなものが貼り付けされると思います。
st-svg-heart
これが、webアイコンのコードになります。
これをそっくりそのまま、さきほどのボックスタグの webicon=" "の中に入れてあげます。
shortcode(コピペする時は赤太字は解除してください) [st-mybox title="はてな" webicon="st-svg-heart" color="#03A9F4" bordercolor="#B3E5FC" bgcolor="#E1F5FE" borderwidth="2" borderradius="5" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"] webiconがハートになります [/st-mybox]
このコードでできあがるボックスはこちらになります。
はてな
webiconがハートになります
同じ手順で、さきほどのwebiconリストのものから選んで、自由にボックスのアイコンをカスタマイズすることができます。
ちなみにボックスの「はてな」の文言を変えるときは以下の赤太字の場所を変えると変更できますよ。
shortcode(コピペする時は赤太字は解除してください) [st-mybox title="はーと" webicon="st-svg-heart" color="#03A9F4" bordercolor="#B3E5FC" bgcolor="#E1F5FE" borderwidth="2" borderradius="5" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"] ボックスの見出しが「はーと」になります [/st-mybox]
はーと
ボックスの見出しが「はーと」になります
Font Awesomeのwebアイコンに変更する(慣れてきた人向け)
このwebiconは、AFFINGER標準搭載のもの以外にもFont Awesomeを使ってカスタマイズすることができます。
りんご
これを作る方法を解説します
まずは「Font Awesome」プラグインをインストールします。
準備はこれで完了です。
それではこちらのボックスをいじっていきましょう。
はてな
これをいじる
基本のやり方は、AFFINGERのタグリストにあるwebiconを使う時と同じです。
webアイコンのコードをとってくる箇所はこちらのサイトです。
Font Awesomeのアイコンページにアクセスしたら、検索ボックスでアイコンを探してみます。
今回は「apple」で検索してみます。
検索結果がこちらです。
この中のアイコンならなんでもOK!と言いたいところですが、残念ながらそうはいきません。
Font Awesomeのアイコンには無料アイコンと有料アイコンがあるのですが、この方法では、無料で使えるアイコンでしか使用できません。
ここでは検索結果から無料アイコンに絞込むよう「Free」をクリックします。
すると検索結果を無料アイコンに絞り込むことができました。
この中のものであれば、自由に使うことができます。
今回はAppleのリンゴマークを選んでみましょう。
アイコンの詳細画面になったら、このwebアイコンを使用するためのコードをコピーします。
画像の赤丸で囲った部分をクリックすると、クリップボードにコピーされます。
貼り付けたものがこちら。
<i class="fa-brands fa-apple"></I>
このコードの中の赤太字の部分だけ、さらにコピーしましょう。
そしてタグボックスの、webicon=" "の中にコピーします。
ここで注意です!!
このコードのままコピーをしても、タグボックスに正しくアイコンが反映されません。
Font Awesomeのwebアイコンをタグボックスに反映させるには、先程コピーした部分の前に「fa」をもう一つ添える必要があります。
fa fa-brands fa-apple
このようにしてください。
そしてこの状態で、タグボックスのwebicon=""の中に入れましょう。
shortcode(コピペする時は赤太字は解除してください) [st-mybox title="りんご" webicon="fa fa-brands fa-apple" color="#03A9F4" bordercolor="#B3E5FC" bgcolor="#E1F5FE" borderwidth="2" borderradius="5" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"] これでアイコンがアップルになる [/st-mybox]
これで完成です。
りんご
これでアイコンがアップルになる