「ボックスのアイコンを動かせたら目立つのにな～」
「どうしても読者に気づかせたい場所がある！」
という場合、AFFINGER6なら簡単にできます。
「追加CSSクラス」アニメーションコードを追加するだけOKです。
今回紹介する方法で、
- メモボックス
- マイボックス
- 見出し付きボックス
- バナー風ボックス
この4つのアイコンにアニメーションをかけることができます。
どのような手順を踏めばいいのか、詳しく解説していきます。
アイコンを動かすための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］を追加しました。
これで完了です。
アニメーションがうまくいかないパターン
アニメーションがうまくいかないボックスもあります。
それは、段落スタイルのメモボックスです。
何が違うのかというと、
上： STINGER：メモボックス
下： 段落スタイルのメモボックス
対策はというと、今のところありません。
今後のアップデートに期待しましょう。
