【AFFINGER】Webアイコン・文字・画像をアニメーションタグを使って動かす方法

僕は暇な時間を見つけてはネットサーフィンをよくします。

あまり興味の無い記事はパパっと読み流すのですが、たまに文字や画像が点滅していたりする場合があります。

何てことない記事でもそんな細工がしてあるとちょっと目が留まりますよね。

自分でみていても画面越しに読んでくれている方へアピールするのには丁度いい表現だと思いました。

例えば「ここは一番のアピールポイント！絶対に読んで欲しい」なんて時に重宝しそうです。

ちなみに上は「シェイク（強）」のアニメーションをかけています。

僕の使用しているテーマAFFINGE5EXでもそんな機能ないかな？と調べたらこれまた標準で実装されていたんですね。

さすがって感じです。

そこで今回はタイトルにもある通り「アニメーションタグ」について解説していきたいと思います。

アスグッド

ただしあまり多用すると不快感の方が勝ってしまうので使い方には注意が必要ですね

文字だけのアニメーション

全文アニメーションの場合

今回はデモとして「点滅」させていきます。

入力後、点滅させたい文章全体をマウスで反転させてから、スタイル→アニメーション→点滅の順にクリックします。

点滅させたい文章の前に「動」が入力されます。

これで文章全体にアニメーションが導入されました。

一部アニメーションの場合

今回はデモとして「拡大（ゆれ）」させていきます。

入力後、アニメーションをかけたい文章の一部ををマウスで反転させてから、スタイル→アニメーション→拡大（ゆれ）の順にクリックします。

拡大（ゆれ）させたい文章の前に「動」が入力されます。

これで希望の部分にアニメーションが導入されました。

Webアイコンのアニメーション

まずはWebアイコンを使用するためショートコードを挿入します。

タグ→テキストパーツ→クリップメモ→ポイントの順でクリックします。

上記が無事に挿入された状態になります。今回は確認しやすいようにアイコンサイズを拡大しています。

この状態を基本として、下記のアニメーション用コードを挿入してきます。

webアイコン常時点滅

ショートコードの中にwebアイコンを常時点滅させるためのアニメーション用コードを挿入します。

「fontawesome="fa-lightbulb-o"」に点滅用のコード「faa-flash animated」を挿入します。

これで挿入できました。

webアイコンへマウスオーバー時のみ点滅

ショートコードの中にマウスオーバー時に点滅させるためのアニメーション用コードを挿入します。

「fontawesome="fa-lightbulb-o"」に点滅用のコード「faa-flash animated-hover」を挿入します。

これで挿入できました。

点滅以外のアニメーションを使用したい場合、対応したコードを使用してください。

画像のアニメーション

文字のアニメーションの時と同様に、用意した画像を選択した状態でスタイル→アニメーション→点滅の順にクリックします。

すると画像の上に「動」マークが挿入されます。これで画像にアニメーションが施されました。

おまけ

アニメーションは重ね掛けができるようです。

「回転」「大小」の重ね掛け

「回転」「大小」

「点滅」「拡大（ゆれ）」の重ね掛け

「点滅」「拡大（ゆれ）」

ただし種類によっては重ね掛け出来ないものもあるようなので注意して下さい。

まとめ

いかがでしたか？

今回の導入はスタイル→アニメーションと選択するだけだったのでボタン一つで簡単にできましたよね。

注意を促したい場合や強調したい時などはうってつけの機能ではないでしょうか。

今後同じような機能をお探しの方はぜひお使いください。