WordPressテーマ「WING(AFFINGER5)」のカスタマイズについての記事です。最近のブログ全般でお馴染みとなった「会話ふきだし」。アフィンガー5では、すごく簡単に作成できるので、よく使っています。アフィンガーの「会話ふきだし」機能、大好き!クマ使っていて心地良いよね!アニメーション機能まで付いているんです。管理画面の項目にチェックを入れるだけでOK!会話アイコン全てに、ぽよんぽよんと揺れるアニメーションが付きます。「会話風アイコンを少し動かす」にチェックを入れるクマ簡単だね!スポンサードリンク【上級編】アイコンごとに動きを変えてみよう!会話アイコン全部が動いてしまうと、うるさく感じることもあるので、自分はこの機能は使っていません。個別にアニメーション化してみたい時もあるだろうな、と思い試してみました。各アニメーションの動きと対応するタグまずは、こんなアニメーションができるってことで、見本の紹介です。(各アニメーションは、アフィンガー5の「記事作成パーツ確認用ダミーページ」にて確認しました。st-animate"></span>表情と会話がアニメーションに合っていると良い感じ。使うのは、効果的なんじゃないでしょうか。個別にアニメーション化する方法この方法で個別にアニメーション化した場合、おそらく会話アイコンの一括管理から外れてしまいます。(AFFINGER5管理画面でアイコンを変更しても、新しいものには置き換わらないです。)のままではアイコンにアニメーションを付けることができません。ショートコードで省略された部分を取り出す作業が必要です。表示したい「会話ふきだし」を設置して下書き保存、プレビューします。Tools)を開く表示された「会話ふきだし」のアイコンにポインタを当てた状態で右クリック。出てきたメニューの中の「検証」をクリックします。フォーカスされている部分(背景色が反転している部分)は、先程ポインタで指していたアイコン画像のコードです。imgタグが反転していればOK。(LazyLoadなど遅延読み込みのプラグインを入れている場合は、もっと複雑なコードになります。width="60px">このimgタグを起点に、コードを1段ずつ上にさかのぼっていきましょう。閉じるまでの内容が、一つの「会話ふきだし」を表すコードになります。参考までに、実際のコードを下記に貼っておきます。複雑な作りなんですね。この部分を全てコピーすれば、ショートコードで省略されていた部分を抜き出すことができます。(上のコードはコピーしてもダメ。内容はサイトや会話アイコンによって異なるので。ポインタをあてた状態で右クリック。element」を選択します。これでコピー完了!step5テキストエディタにペーストコピーしたコードをテキストエディタにペーストします。上のコードをプレビューすると、同じ会話ふきだしが並びます。ここまでくれば、もう少し!step6imgタグをアニメーション化させる2種類の方法を紹介します。