会話ふきだしアイコンのアニメーションを個別に設定する方法／無駄に細かいアフィンガー5 のカスタマイズ

「会話ふきだし」アイコンをアニメーション化してみよう！

今回は、 WordPressテーマ「WING（AFFINGER5）」のカスタマイズについての記事です。

【初級編】アフィンガー5 標準機能でアニメーション化

最近のブログ全般でお馴染みとなった「会話ふきだし」。アフィンガー5では、すごく簡単に作成できるので、よく使っています。

ぽん

アフィンガーの「会話ふきだし」機能、大好き！

クマ

使っていて心地良いよね！

アニメーション機能まで付いているんです。AFFINGERの管理画面でチェックを入れるだけで、アニメーション付きにできちゃいますよ！

アニメーション機能をオンにする方法

管理画面の項目にチェックを入れるだけでOK！会話アイコン全てに、ぽよんぽよんと揺れるアニメーションが付きます。

ぽん

ぽよんぽよん！と動くよ！

アニメーション化の手順

AFFINGER5 管理＞会話・ファビコン等＞会話風アイコン＞「会話風アイコンを少し動かす」にチェックを入れる

クマ

簡単だね！

スポンサードリンク

【上級編】アイコンごとに動きを変えてみよう！

会話アイコン全部が動いてしまうと、うるさく感じることもあるので、自分はこの機能は使っていません。が、個別にアニメーション化してみたい時もあるだろうな、と思い試してみました。

各アニメーションの動きと対応するタグ

まずは、こんなアニメーションができるってことで、見本の紹介です。（各アニメーションは、アフィンガー５の「記事作成パーツ確認用ダミーページ」にて確認しました。）

動き	会話ふきだしアイコン	アニメーション化したい部分を囲むタグ
45°揺れ	クマわーいわーい！	`<span class="fa faa-wrench animated st-animate"></span>`
ベル揺れ	クマ寒っ…！！	`<span class="fa faa-ring animated st-animate"></span>`
横揺れ	ぽんイヤだイヤだ！	`<span class="fa faa-horizontal animated st-animate"></span>`
縦揺れ	ぽん聞いて聞いて！	`<span class="fa faa-vertical animated st-animate"></span>`
点滅	クマ影が薄い…	`<span class="fa faa-flash animated st-animate"></span>`
バウンド	ぽんがんばるぞ！	`<span class="fa faa-bounce animated st-animate"></span>`
回転	クマ目が回る～！	`<span class="fa faa-spin animated st-animate"></span>`
ふわふわ	クマおやすみなさーい	`<span class="fa faa-float animated st-animate"></span>`
大小	クマやってもうた…	`<span class="fa faa-pulse animated st-animate"></span>`
シェイク	ぽんこれ買って～！！	`<span class="fa faa-shake animated st-animate"></span>`
シェイク（大）	ぽんえええ…っ	`<span class="st-shake st-animate"></span>`
拡大（ゆれ）	クマ何じゃこりゃー！！	`<span class="fa faa-tada animated st-animate"></span>`
過ぎる	ぽん行ってきまーす	`<span class="fa faa-passing animated st-animate"></span>`
戻る	クマそれじゃまた！	`<span class="fa faa-passing-reverse animated st-animate"></span>`
バースト	ぽんうわーー	`<span class="fa faa-burst animated st-animate"></span>`
落ちる	クマどよーん	`<span class="fa faa-falling animated st-animate"></span>`