AFFINGER6でボックスの「アイコン」を動かす方法

という場合、AFFINGER6なら簡単にできます。

「追加CSSクラス」アニメーションコードを追加するだけOKです。

今回紹介する方法で、

• メモボックス
• マイボックス
• 見出し付きボックス
• バナー風ボックス

この4つのアイコンにアニメーションをかけることができます。

どのような手順を踏めばいいのか、詳しく解説していきます。

アイコンを動かすためのCSSクラス

ボックスのアイコンを動かすためには、アニメーションのCSSクラスを追加する必要があります。

追加するCSSクラスは以下の一覧を確認してください。

CSSクラス一覧

アニメーション	CSSクラス
45°揺れ	st-wrench-icon
ベル揺れ	st-ring-icon
横揺れ	st-horizontal-icon
縦揺れ	st-vertical-icon
点滅	st-flash-icon
バウンド	st-bounce-icon
回転	st-rotation-icon
ふわふわ	st-float-icon
大小	st-pulse-icon
シェイク	st-shake-s-icon
シェイク（強）	st-shake-icon
拡大（ゆれ）	st-tada-icon
過ぎる	st-passing-icon
戻る	st-passing-reverse-icon
バースト	st-burst-icon
落ちる	st-falling-icon

アイコンのみ動かすCSSクラスと、ブロック全体を動かすCSSクラスは異なります。

ボックスのアイコンを動かす！アニメーションCSSクラスを追加する手順

CSSクラスを追加するといってもむずかしいことはありません。

例として、マイボックスのアイコンを動かす手順を解説します。

１．まずは段落に「/マイボックス」と入力し、「STINGER：マイボックス」のブロックを挿入します。

「＋（ブロックを追加）」からマイボックスを追加してもOK。

２．ボックスを選択した状態のまま、ブロックメニューを一番下までスクロールします。

「高度な設定」という項目があるのでクリックして開きます。

３．「追加 CSS クラス」の欄に、追加したいアニメーションのコードを入力します。

ここでは「点滅」のコード［st-flash-icon］を追加しました。

これで完了です。

アニメーションがうまくいかないパターン

アニメーションがうまくいかないボックスもあります。

それは、段落スタイルのメモボックスです。

何が違うのかというと、

アイコンとテキストの間にある縦線「｜」も一緒に動いている

対策はというと、今のところありません。

今後のアップデートに期待しましょう。