AFFINGER メイン

2022/1/14

【AFFINGER6(アフィンガー6)使い方】〜トップページのカスタマイズ〜 流れる文字の表示方法

【AFFINGER6(アフィンガー6)使い方】〜トップページのカスタマイズ〜 流れる文字の表示方法 みなさん、おはこんばんは😊今回は、トップページに流れる文字を表示する方法について解説します☺️動くものにはついつい目がいってしまいます✨ぜひ、素敵なブログのコンセプトやお知らせの一つに活用して、お好みのトップページを作ってみてくださいね🤗 こんな感じに流れる文字を加えることが簡単にできます😊ついつい見ちゃいませんか?? ...

続きを読む

メイン 副業

2022/5/6

話題の副業〜スポットワーク(SpotWORK)〜をやってみた!

話題の副業〜スポットワーク(SpotWORK)〜をやってみた! 話題の副業〜スポットワーク(SpotWORK)〜をやってみた! スポットワーク(SpotWork)って?  スポットワーク(SpotWORK)とは、SpotWORK株式会社さんが行っている、スキマ時間を使って簡単にできるモバイルバッテリーを移動させるお仕事です。 モバイルバッテリーが十分足りている場所で回収作業をし、そのモバイルバッテリーを不足している場所へ補充をする作業。また、機械が汚れていれば、簡単に掃除をすることもあります。  まずは、 ...

続きを読む

でVlog メイン

2021/12/28

【糖質制限ダイエットのやり方】#1 44日間で10.1kg減量達成

【糖質制限ダイエットのやり方】#1 44日間で10.1kg減量達成 【糖質制限ダイエットのやり方】#1 44日間で10.1kg減量達成 身長・体重 身長:180cm 体重:100.5kg(ダイエット開始時) これまでの最高体重は103kgくらいだった気がします。 糖質制限ダイエットの成果 44日間で10.1kg減の記録 ※ダイエット開始の11月13日の100.5kg時の写真は撮ってません。 お腹周りは減ってくるのは最後なので、10kg減っていてもあまり違いが分かりませんね。 実際の数値とグラフはこちら 食 ...

続きを読む

でVlog メイン

2021/12/27

[24時間365日、自分の好きな時に好きな場所で働ける!BIZcomfortが汐留にOPEN] BIZcomfort ザ ロイヤルパークホテル アイコニック 東京汐留

24時間365日、自分の好きな時に好きな場所で働ける!BIZcomfortが汐留にOPEN BIZcomfort ザ ロイヤルパークホテル アイコニック 東京汐留 みなさん、おはこんばんは😊今回は、ただのでぶもちょー愛用しておりますBIZcomfortの記事です✨ BIZcomfortさん、やってくれましたね😭めちゃくちゃ最高な拠点じゃないですか!!!!!!!!2021年12月22日に「BIZcomfort ザ ロイヤルパークホテル アイコニック 東京汐留」が ...

続きを読む

AFFINGER メイン

2021/12/27

【AFFINGER6(アフィンガー6)使い方】〜トップページのカスタマイズ〜スライドショーの下にお知らせを挿入する方法

【AFFINGER6(アフィンガー6)使い方】〜トップページのカスタマイズ〜スライドショーの下にお知らせを挿入する方法 みなさん、おはこんばんは😊今回は、なんと初めてコメントを頂けましたので、そちらの質問について解説していきます☺️ 質問:「スライドショーの下にお知らせを入れることは可能でしょうか」 可能です😊ウィジェットの機能を使うことで、実現ができます✨ぜひ、参考にしてお好みのトップページを作ってみてくださいね🤗 ...

続きを読む

AFFINGER メイン

【AFFINGER6(アフィンガー6)使い方】FontAwesome5のアイコンにアニメーションを付ける方法

【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のアイコンにアニメーションを付ける方法①

step
2
ブロックのテキストから"クラシック"を選択

【AFFINGER6(アフィンガー6)使い方】FontAwesome5のアイコンにアニメーションを付ける方法②

step
3
書く場所に出てきた"クラシック"をクリックする

【AFFINGER6(アフィンガー6)使い方】FontAwesome5のアイコンにアニメーションを付ける方法③

step
4
"スタイル"から"アニメーション"を選択すると多数のアニメーションが出るので、好みのものを選択

【AFFINGER6(アフィンガー6)使い方】FontAwesome5のアイコンにアニメーションを付ける方法④

step
5
この青い"動"のアイコンのとなりにコードを入れる

【AFFINGER6(アフィンガー6)使い方】FontAwesome5のアイコンにアニメーションを付ける方法⑤
"動"アイコンの右(入れたい文言を入力)のところにコードを入れます。


[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のアイコンにアニメーションを付ける方法⑥

step
B
ブロックのSTINGERから"STINGER:見出し付きフリーボックス"を選択

【AFFINGER6(アフィンガー6)使い方】FontAwesome5のアイコンにアニメーションを付ける方法⑦

step
C
見出しテキスト部分を選択し、右上の""のボタンをクリック

【AFFINGER6(アフィンガー6)使い方】FontAwesome5のアイコンにアニメーションを付ける方法⑧

step
D
"アイコンクラス"のボックス内に2つのコードを入力する

【AFFINGER6(アフィンガー6)使い方】FontAwesome5のアイコンにアニメーションを付ける方法⑨

この"アイコンクラス"のボックス内に、

①"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)使い方】文字にアニメーションを付ける方法 みなさん、おはこんばんは☺️今回は、文字にアニメーションを付ける方法を解説していきます&#x ...

続きを見る

このブログでは、WordPressテーマは"AFFINGER6"を利用しております。おすすめですよ。

AFFINGER6の使い方

AFFINGER6の使い方のページをご覧頂きありがとうございます🤗
こちらでは、「稼ぐ」に特化したWordPressテーマ〜AFFINGER6〜の使い方の解説をしてます。
初心者さまへもわかりやすくをモットーに書いております。
他のページでも絶賛解説中です。みなさまのブログ作成に役立てば嬉しいです。

 こんなページもあります 

トップページのカスタマイズ
  お知らせの作成方法
  タブ式カテゴリー一覧の作成方法
  カテゴリー一覧(スライドショー)の作成方法
  "TOPに戻るボタン"のカスタマイズ方法
  ヘッダーカードの作成方法
  ボックスメニューの使い方② サイドバーへの表示方法
  スライドショーの下にお知らせを挿入する方法
  流れる文字の表示方法

記事の書き方
  ブロックエディタ基本的な使い方
  ブロックエディタの装飾一覧
  タグ機能の装飾一覧
  光るボタンの作り方
  文字にアニメーションをつける方法
  フォント(Google Fonts)の設定方法
  FontAwesome5のアイコンにアニメーションを付ける方法
  ボックスメニューの使い方①
  ブログカードの作り方&カスタマイズ方法
  吹き出し・会話アイコンの使い方・設定・カスタマイズ方法

その他
  FontAwesome5の設定方法・使い方
  「今日の運勢」の作り方

  • この記事を書いた人

ただのでぶ

ただのでブロガーのただのでぶです(*^^*) 数多あるサイトの中から、訪れてくれてありがとうございます☆ 「稼ぐ」に特化したWordPressテーマ〜AFFINGER6〜を使ってブログを書いています。早くたくさん稼ぎたいです(*´∇`*) 今はAFFINGER6の使い方をメインに更新しています。 雑記ブログになると思いますが、ぜひ色々覗いてみてくださいね♪ ただのでブロガーのただのでぶをよろしくお願いします(*゚▽゚)ノ

-AFFINGER, メイン