AFFINGER5【Font Awesomeアイコン】を動かす方法

AFFINGER5で【Font Awesome】のアイコンに動きを付ける方法です。

記事後半では、設定可能なアニメーショーンの一覧も紹介しています。

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

小豆

AFFINGER5で、Font Awesomeのアイコンに動きをつけたい。
テキストを動かす方法はわかったけど、アイコンってどうやって動かすの？

AFFINGER5で【Font Awesome】のアイコンを動かす

早速ですが、アニメーションを付与したアイコンがこちら。

小豆

そうそう！やりたいのはこれ。
でも、テキストと同じ方法でやってみたけど動かなかったよ！？

実は、テキストとアイコンとではアニメーションの設定方法が少し違うんだ。

大福

というわけで、早速アイコンを動かす方法を解説していきます。

Font Awesomeのアイコンの使い方がわからない人はコチラ

小豆

そもそも、アイコンを表示させる方法すらよくわからない。

こんな人は、こちらの記事を参考にしてください。

アイコンにアニメーションを付与する方法

AFFINGER5なら、Font Awesomeのアイコンに簡単にアニメーションを付与することが可能。

ただし、「記事装飾内のアイコン」と「単体表示したアイコン」とでは設定方法が少し異なります。

記事装飾内のアイコンを動かす方法

• アイコンを挿入する

  

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

  記事装飾内のfontawesome=”ここにアイコンコード” にアイコンコードを挿入します。

  コード例

  [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 faa-spin animated" iconcolor="#919191" bgcolor="#fafafa" color="#000000" bordercolor="" borderwidth="" iconsize=""]サンプルテキスト[/st-cmemo]

単体のアイコンを動かす方法

• アイコンを挿入する

  

  Font Awesome　→　アイコンコードをコピー

  

  コピーしたコードは、テキストエディタに貼り付けます。




• アニメーションタグを挿入する

  

  挿入したアイコンコード内に、アニメーションタグを挿入します。

小豆

なるほど。
でもテキストエディタでは、アニメーションタグって呼び出せないよね？

確かにね。
そんなときは、以下のアニメーションタグをコピペして使うと便利だよ。

大福

コピペで使える！アニメーションタグ一覧

Font Awesomeのアイコンに使用可能なアニメーションタグの一覧です。

コピペで使ってください。

テキストや絵文字を動かす方法

Font Awesomeのアイコン同様に、テキストや絵文字にも動きをつけることが可能です。

実際のプレビューがこちら。

顔文字や絵文字、特殊文字の簡単な入力方法は、以下の記事を参考にしてください。

step
1テキストを入力

テキスト、顔文字、絵文字を入力

step
2アニメーションを付与

テキストを選択　→　スタイル　→　アニメーション　→　任意の動きを選択

大福

手順は、たったこれだけ。
アイコンを動かすより全然簡単だね。

まとめ：動きをつけて記事内で目立たそう

アニメーションは、記事内で使用するとめちゃくちゃ目立ちます。

というわけで、流し読みされたくない箇所に使用すると、とても効果的ですね

ただし、頻繁に使いすぎるのはNG。

効果が半減する上に、記事の見た目もごちゃごちゃしてしまうので注意です。

AFFINGER利用者向けオリジナル特典の販売

＼ AFFINGER6にも対応済み ／

AFFINGERをすでに利用しているユーザー向けの「カスタマイズ＆役立つテクニック」集です。

目的に合わせて、以下の2つを用意しました。

特典詳細ページへ移動する