【AFFINGER6(アフィンガー6)使い方】FontAwesome5のアイコンにアニメーションを付ける方法
みなさま、おはこんばんは☺️
今回は、FontAwesome5のステキなアイコンにアニメーションを付けて、よりステキにしてしまう方法を解説します✨
ぜひ、ブログのアクセントに使用してみてくださいね🤗
ピザ食べた〜い😆
サッカー結果
チーム VS チーム
1 : 0
こんな感じのアニメーションを付けることができます。
その前に"FontAwesome5"って?という人や導入したいという人は、こちらの記事を参考にしてみてくださいね。
-
【AFFINGER6(アフィンガー6)使い方】FontAwesome5の設定方法・使い方
【AFFINGER6(アフィンガー6)使い方】FontAwesome5の設定方法・使い方 皆さま、おはこんばんは😊WING AFFINGER5からACTION AFFINGER6になり ...
続きを見る
それでは、解説していきます。
文章中に入れたい場合は、step1〜5
見出し付きボックス等に入れたい場合は、stepA〜D
をご覧になってください✨
【AFFINGER6(アフィンガー6)使い方】FontAwesome5のアイコンにアニメーションを付ける方法
step
1"を押す
![【AFFINGER6(アフィンガー6)使い方】FontAwesome5のアイコンにアニメーションを付ける方法①](https://sp-no-enjoy-life.com/wp-content/uploads/2021/10/2137390cfcf7313fa5c3eb564e7ac2c9-3-1024x799.jpg)
step
2ブロックのテキストから"クラシック"を選択
![【AFFINGER6(アフィンガー6)使い方】FontAwesome5のアイコンにアニメーションを付ける方法②](https://sp-no-enjoy-life.com/wp-content/uploads/2021/10/268357284f04ce7c602fe33268204d7e-1024x508.png)
step
3書く場所に出てきた"クラシック"をクリックする
![【AFFINGER6(アフィンガー6)使い方】FontAwesome5のアイコンにアニメーションを付ける方法③](https://sp-no-enjoy-life.com/wp-content/uploads/2021/10/9dfcfef075242360132731a487a6c797-1024x514.png)
step
4"スタイル"から"アニメーション"を選択すると多数のアニメーションが出るので、好みのものを選択
![【AFFINGER6(アフィンガー6)使い方】FontAwesome5のアイコンにアニメーションを付ける方法④](https://sp-no-enjoy-life.com/wp-content/uploads/2021/10/image.jpeg)
step
5この青い"動"のアイコンのとなりにコードを入れる
![【AFFINGER6(アフィンガー6)使い方】FontAwesome5のアイコンにアニメーションを付ける方法⑤](https://sp-no-enjoy-life.com/wp-content/uploads/2021/10/2815fb26aa681aae3824eb3f5b6fc6ee-1-1024x477.png)
"動"アイコンの右(入れたい文言を入力)のところにコードを入れます。
[st-i class="(クラス名)" add_style=""]
この(クラス名)のところに、FontAwesome5からチョイスしたコードを入れます。
例)fas fa-font → [st-i class="fas fa-font" add_style=""]
[st-i class="(クラス名)" add_style=""] ←これをユーザー辞書に登録しておくとラクですよ。
これで完成です。
続いて、"STINGER:見出し付きフリーボックス"等にアニメーションを付ける方法です。
step
A"を押す
![【AFFINGER6(アフィンガー6)使い方】FontAwesome5のアイコンにアニメーションを付ける方法⑥](https://sp-no-enjoy-life.com/wp-content/uploads/2021/10/2137390cfcf7313fa5c3eb564e7ac2c9-3-1024x799.jpg)
step
BブロックのSTINGERから"STINGER:見出し付きフリーボックス"を選択
![【AFFINGER6(アフィンガー6)使い方】FontAwesome5のアイコンにアニメーションを付ける方法⑦](https://sp-no-enjoy-life.com/wp-content/uploads/2021/10/a345d25741f04eb171970bfe009d992d-1024x317.png)
step
C見出しテキスト部分を選択し、右上の""のボタンをクリック
![【AFFINGER6(アフィンガー6)使い方】FontAwesome5のアイコンにアニメーションを付ける方法⑧](https://sp-no-enjoy-life.com/wp-content/uploads/2021/10/52662e6ff7a5bb29d0172502accec022-1024x317.png)
step
D"アイコンクラス"のボックス内に2つのコードを入力する
![【AFFINGER6(アフィンガー6)使い方】FontAwesome5のアイコンにアニメーションを付ける方法⑨](https://sp-no-enjoy-life.com/wp-content/uploads/2021/10/baa63498efa9d2bd9944cec2228d4a8e-1024x540.jpg)
![](https://sp-no-enjoy-life.com/wp-content/uploads/2021/10/18de2ccf3103d82f10972136a24e78ad.png)
この"アイコンクラス"のボックス内に、
①"FontAwesome5"のコードを入力し、
半角スペースを空けて、
②"アニメーションコード"を入力する。
ポイント
例)fas fa-font st-wrench animated
fas fa-font : fontAwesome5コード
st-wrench animated : アニメーションコード
アニメーションコードをまとめましたので、良かったら参考にしてください☺️
アニメーション (クラス) | アイコン装飾 | アニメーションコード |
45°揺れ | st-wrench animated | |
ベル揺れ | st-ring animated | |
横揺れ | st-horizontal animated | |
縦揺れ | st-vertical animated | |
点滅 | st-flash animated | |
バウンド | st-bounce animated | |
回転 | st-rotation animated | |
ふわふわ | st-float animated | |
大小 | st-pulse animated | |
シェイク | st-shake-s animated | |
シェイク(強) | st-shake animated | |
拡大(ゆれ) | st-tada animated | |
過ぎる | st-passing animated | |
戻る | st-passing-reverse animated | |
バースト | st-burst animated | |
落ちる | st-falling animated |
うまくできましたでしょうか?
ステキなブログのアクセントに、ぜひ使ってみてくださいね☺️
また、文字や画像にアニメーションを付ける方法をお探しの方は、の記事で解説していますのでご覧ください✨
-
【AFFINGER6(アフィンガー6)使い方】文字にアニメーションを付ける方法
【AFFINGER6(アフィンガー6)使い方】文字にアニメーションを付ける方法 みなさん、おはこんばんは☺️今回は、文字にアニメーションを付ける方法を解説していきます ...
続きを見る
![](https://sp-no-enjoy-life.com/wp-content/uploads/2021/07/action_banar-1-1024x916.png)
AFFINGER6の使い方
AFFINGER6の使い方のページをご覧頂きありがとうございます🤗
こちらでは、「稼ぐ」に特化したWordPressテーマ〜AFFINGER6〜の使い方の解説をしてます。
初心者さまへもわかりやすくをモットーに書いております。
他のページでも絶賛解説中です。みなさまのブログ作成に役立てば嬉しいです。
こんなページもあります
トップページのカスタマイズ
お知らせの作成方法
タブ式カテゴリー一覧の作成方法
カテゴリー一覧(スライドショー)の作成方法
"TOPに戻るボタン"のカスタマイズ方法
ヘッダーカードの作成方法
ボックスメニューの使い方② サイドバーへの表示方法
スライドショーの下にお知らせを挿入する方法
流れる文字の表示方法
記事の書き方
ブロックエディタ基本的な使い方
ブロックエディタの装飾一覧
タグ機能の装飾一覧
光るボタンの作り方
文字にアニメーションをつける方法
フォント(Google Fonts)の設定方法
FontAwesome5のアイコンにアニメーションを付ける方法
ボックスメニューの使い方①
ブログカードの作り方&カスタマイズ方法
吹き出し・会話アイコンの使い方・設定・カスタマイズ方法