AFFINGER6専用機能

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クラスを追加するといってもむずかしいことはありません。

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

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

「+(ブロックを追加)」からマイボックスを追加してもOK。

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

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

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

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

ポイント

アイコンのみ「点滅」コードを入れると、このように点滅します。

これで完了です。

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

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

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

何が違うのかというと、

アイコンのみ動いている

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

上: STINGER:メモボックス

下: 段落スタイルのメモボックス

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

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

-AFFINGER6専用機能
-