AFFINGER6で見出しのチェックマークを動かす方法

流し読みする読者の目を止める方法として、見出しのアイコンを動かす方法があります。

たとえば、

こんな動きもAFFINGER6なら可能です。

それでは具体的な手順を解説していきます。

見出しのアイコンを動かすには？

見出しのアイコンを動かすには、アニメーションの「CSS クラス」を追加する必要があります。

たとえば、チェックマークを震わせるには「ベル揺れ」のCSSクラス［st-ring-icon］を。

チェックマークを動かす

アイコンを点滅させるには、「点滅」 のCSSクラス［st-flash-icon］。

アイコンを点滅させる

その他にも、

横揺れ［st-horizontal-icon］

アイコンを横揺れさせる

回転［st-rotation-icon］

アイコンを回転させる

なんてことも可能です。

AFFINGER6で使用できるアニメーションクラスはこちらの表を確認してください。

CSSクラス表を見る

見出しのチェックマークを動かす手順

見出しのチェックマークには2パターンあります。

1. カスタマイザーで、Hタグを「チェック（ボックスタイプ）デザイン」に変更パターン
2. 見出しのブロックスタイルを「チェック」にするパターン

ここでは、カスタマイザーでH3タグを「チェック（ボックスタイプ）デザイン」に変更したパターンで進めていきます。

こちらのデザインのほうがかっこいいからです（笑）。

１．まずは、チェックボックスの見出しブロック（H3）を挿入します。

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

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

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

ベル揺れは、チェックマークだけが動きます！

ちなみに、追加 CSS クラスに違うアニメーションクラスを追加すると、以下のようになります。

拡大（ゆれ）を使うとこんな感じで動きます！

AFFINGERのボックスのWEBアイコンを動かす方法もあります。

※詳しくはこちらの記事をチェックしてください！

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