PR

【Font Awesomeも】AFFINGERのタグボックスのアイコンを変更する方法

でく
でく
みなさんこんにちは、でく(@dddekunoboh)です。

 

今回はAFFINGERの、タグボックスでwebicon(ウェブアイコン、ウェビコン)の設定をする話。

 

AFFINGERに標準で搭載されているクリップメモタグやボックスタグはとても便利ですよね。

 

こういうのとか

 

はてな

こういうやつ

 

こうしたタグで呼び出せるボックスは重宝しますが、さらにカスタマイズをしてオリジナリティを出したいと思ったときはありませんか?

 

そんなときに便利なのが、webアイコン(webicon)をカスタマイズすること!

 

webiconを変更することで、さきほどのボックスもこんなふうに変更することができます。

りんごマークにしたり

 

android

ドロイドくんにしたり

 

こういう遊びごころのあるボックスが作れたら楽しいですよね!

ブログの自由度が大幅にアップするので、オリジナリティも出しやすくなりますね!

 

ということで今回は、AFFINGERのwebiconを変更する方法について解説していきたいと思います。

 

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のアイコンページ

 

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]

 

これで完成です。

 

りんご

これでアイコンがアップルになる

 

でく
でく
Font Awesomeにある多種多様なアイコンで同じ方法で作ることができるので、ぜひ活用してみてくださいね!!

 

 

スポンサーリンク
  • この記事を書いた人

でく

元高校教師でブロガー。得意ジャンルは教育・家電・ガジェット・健康美容。便利グッズや電子機器を収集してレビューするのが趣味のオタク。 小学・中学・高校はゲーム三昧。東北大卒。大学院修了後は公立高校教諭。買ったものを人に紹介する趣味が高じてブログを立ち上げる。デグー・リチャードソンジリス・スナネズミを飼育するげっ歯類好き。

-ブログ運営・副業
-