AFFINGER

AFFINGER5で使えるアイコンの増やし方【カスタマイズも】

2020年9月7日

アイコン

AFFINGER5で使えるアイコンの種類を増やす方法の紹介です。

デフォルトで用意されているアイコンの「何倍もの種類のアイコン」を表示できるようになります。

記事後半では、挿入したアイコンのカスタマイズ方法も紹介しています。

 

こんな人のお役に立てる記事です。

小豆
AFFINGER5で使えるアイコンの種類をもっと増やせないかなぁ。
サイズやカラーなんかも自分好みに変えられると嬉しいんだけど。

AFFINGER5で使えるアイコン一覧

AFFINGER5には、ボタン一つで挿入できる便利なアイコンが最初から用意されています。

AFFINGER5アイコン

アイコン呼び出し方法

タグ → ショートコード補助 → WEBアイコン(クラス) 

 

デフォルトで用意されているアイコンの種類は30種類。

一見すると十分な数のアイコンが用意されているように感じますが、時にはこんなことも・・。

バッテリーの節約方法

  • サンプルテキスト
小豆
ここでバッテリーのアイコンを使えたら便利なんだけどなぁ。

 

今回紹介する方法は、こんな場合に大活躍。

バッテリーの節約方法

  • サンプルテキスト

記事内容にピッタリのアイコンを表示させることが可能になります。

 

アイコンはFontAwesomeから選びたい放題

AFFINGER5にないアイコンは【FontAwesome】のものを使用します。

FontAwesomeアイコン

【FontAwesome】は、AFFINGER5(公式)で推奨されているアイコン素材サイトです。

好きなアイコンを記事内で表示させる方法【2パターン紹介】

以下の方法をそれぞれ紹介します。

  • デフォルトのアイコンを好みのアイコンに変更する方法
  • 記事内でアイコンを単体で表示する方法

 

デフォルトのアイコンを好みのアイコンに変更する方法

手順

  1. 記事装飾を選択
  2. FontAwesomeからアイコンタグをコピー
  3. コピーしたタグに入れ替え

 

step
1
記事装飾を選択

マイボックス

記事内で使用したい装飾タグを選択

メモ

ここでは、マイボックス(ポイント)を選択しました。

タグ → ボックスデザイン → マイボックス → ポイント

 

step
2
FontAwesomeからアイコンタグをコピー

任意のアイコンをクリック

FontAwesomeを開き、使用したいアイコンをクリック

アイコンタグをコピー1

赤枠内に表示されているタグをコピー

 

step
3
コピーしたタグに入れ替え

記事内に挿入した装飾タグ内の【アイコン表示タグ】をコピーしたタグと入れ替えます。

デフォルトの状態 fontawesome="fa-check-circle"
入れ替え後の状態 fontawesome="fa-ambulance"

[st-mybox title="ポイント" fontawesome="fa-check-circle" color="#FFD54F" bordercolor="#FFD54F" bgcolor="#FFFDE7" borderwidth="2" borderradius="5" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"]

ポイント

[st-mybox title="ポイント" fontawesome="fa-ambulance" color="#FFD54F" bordercolor="#FFD54F" bgcolor="#FFFDE7" borderwidth="2" borderradius="5" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"]

ポイント

 

記事内でアイコンを単体で表示する方法

FontAwesomeのアイコンは、飾り枠以外でも使用することが可能です。

こんな感じ👇

サンプルテキスト
サンプルテキスト
サンプルテキスト

手順

  1. FontAwesomeからアイコンタグをコピー
  2. テキストエディタにタグを貼り付け
  3. テキストを挿入

 

step
1
FontAwesomeからアイコンタグをコピー

任意のアイコンをクリック

FontAwesomeを開き、使用したいアイコンをクリック

アイコンタグをコピー2

赤枠内のタグをコピー

 

step
2
テキストエディタにタグを貼り付け

アイコンタグを貼り付け

コピーしたアイコンタグをテキストエディタに貼り付け

アイコンタグは、必ずテキストエディタに貼り付けます。
ビジュアルエディタに貼り付けを行った場合は、アイコンが表示されません。

 

step
3
テキストを挿入

テキストを挿入

貼り付けたアイコンタグにテキストを入力します。

テキストを入力しないと、アイコンが表示されません。
アイコンのみを表示したい場合は、赤枠内にスペースを入力します。

 

  • ビジュアルエディタ上での表示に注意

挿入したアイコンは、ビジュアルエディタ上では表示されません。

アイコンの表示確認は、プレビュー画面で行います。

アイコンを自分好みにカスタマイズする方法

ここでは、アイコンのカスタマイズ方法を3つ紹介します。

アイコンカスタマイズ

  1. サイズを変更
  2. カラーを変更
  3. アニメーション

 

サイズを変更

<i class="fa fa-ambulance fa-3x" aria-hidden="true"></i> サンプルテキスト

テクストエディタを選択し、表示されているアイコンタグ内に「大きさを指定するタグ」を追加。

 

大きさを指定するタグ

【fa-〇x】

 :オリジナル
 :fa-2x
 :fa-3x

 

カラーを変更

アイコンカラーの変更方法は2パターン。

  • 記事装飾内のアイコンカラーを変更
  • アイコン単体のカラーを変更

 

記事装飾内のアイコンカラーを変更

記事装飾内のアイコンカラーを変更するには、「カラーコードタグ」を書き換えます。

例として、クリップメモのアイコンカラーを変更してみます。

クリップメモ表示方法

タグ → テキストパーツ → クリップメモ → メモ

オリジナルのタグ

[st-cmemo fontawesome="fa-file-text-o" iconcolor="#919191" bgcolor="#fafafa" color="#000000" bordercolor="" borderwidth="" iconsize=""][/st-cmemo]

オリジナル

カラー変更後のタグ

[st-cmemo fontawesome="fa-file-text-o" iconcolor="#e53935" bgcolor="#fafafa" color="#000000" bordercolor="" borderwidth="" iconsize=""][/st-cmemo]

アイコンカラーを赤に変更

 

大福
カラーコードは、タグから簡単に呼び出せるよ。

カラーコードの呼び出し

タグ → ショートコード補助 → HTMLカラーコード

 

アイコン単体のカラーを変更

単体で入力したアイコンのカラーを変更するには、「カラーを指定するタグ」を追記します。

カラーを指定するタグ

style="color: カラー名を入力;"

 

オリジナルの状態のアイコンタグ

<i class="fa fa-ambulance" aria-hidden="true"></i>

 サンプルテキスト

アイコンカラーを指定した状態のアイコンタグ

<i class="fa fa-ambulance" style="color:red;" aria-hidden="true"></i>

 サンプルテキスト

 

「HTMLカラーコード」でなく、「カラー名」を入力します。
HTMLカラーコードを入力しても反映されません。

HTMLカラー名は、以下のサイトを参考にしました。

参考原色大辞典

 

アニメーション

アイコンを動かすには、アニメーションタグを追記します。

オリジナルの状態

<i class="fa fa-ambulance" aria-hidden="true"></i>

 サンプルテキスト

アニメーションタグを追記

<i class="fa fa-ambulance faa-passing animated" aria-hidden="true"></i>

 サンプルテキスト

 

アニメーションタグは、タグから簡単に呼び出せます。

アニメーション呼び出し

タグ → ショートコード補助 → アニメーションタグ(クラス

 

まとめ:AFFINGER5なら思い通りの記事装飾ができる

AFFINGER5を使えば、記事装飾も思いのままですね。

ただし、中にはこんな人もいるはず。

大福
AFFINGER5を購入したはいいけど、全然使いこなせない。

こんな人は、以下で紹介している記事を参考にしてください。

何を隠そう僕自身も、最初は全然AFFINGER5を使いこなせませんでした(^-^;

 

👉【AFFINGER5】使い方やカスタマイズ色々

AFFINGER5記事一覧へ移動

👉AFFINGER5の購入を検討中の人は、以下の記事を参考にしてください。

参考AFFINGERの評判を使用歴1年の僕が解説【見本サイトも紹介】

参考AFFINGER5でお気に入りの機能や記事装飾20選【2020年版】

 

当ブログ限定「AFFINGER5購入オリジナル特典」は以下の記事で詳しく紹介しています。

特典
AFFINGER5限定特典
【AFFINGER5購入特典】当ブログ限定オリジナル特典を5つ紹介

続きを見る

こちらの記事もよく読まれています

  • この記事を書いた人
大福

大福

人間関係に嫌気がさして10年間務めた会社を退職。その後3年間のニート生活を送る。自宅にいながらパソコン1台で稼げることを知り、現在はストレスフリーな毎日を送っています。このサイトではブログやアフィリエイトで稼ぐ方法を発信しています。自宅にいながら稼げるって素晴らしい♪

-AFFINGER

© 2020 大福日記