CSSで動く！吹き出しアイコン

こんな感じで

コピペで簡単に

CSSで

アイコンが

動くよ♪

すごーいっ♪

ぷんぷん

がーん

しょぼーん(´･ω･`)

↓の記事を参考にしました！

こいつ…動くぞ！会話方式(吹き出し)アイコンがCSSでアニメーションするサンプル

ブログをみていると度々登場する会話形式の吹き出しデザイン。ライターの気持ちを代弁している事が多いのこのアイコンさんに喜怒哀楽を表すアニメーションを追加したらもっと気持ちが伝わりやすい！！！なるべく手間をかけたくないので、普段使っているアイコン画像で使えるようアニメーションをつくってみました。表情も変えたい方の為にアイコ...

基本上記のままやればできますが
どこにアニメーション用のSVGを入れていいのかわからなかったのですが、画像の順にやったらできました。

FTPの『wp-content/themes/cocoon-child-master』の階層に
『icon』フォルダを新規作成して

そこにアニメーション用のSVGを入れました。(アイコン画像は入れてません。)

HTMLを使用するなら下記修正します
AddQuicktagプラグインで簡単コード入力するのならズレはそのままにして

AddQuicktagプラグインで簡単コード入力

Wordpressプラグイン『AddQuickTag』ダウンロードします ■AddQuickTagの設定画面の開き方 Wordpressプラグイン『AddQuickTag』の設定画面は次のように開けばOKです。 ...

を終えてから調整してみてください。

修正前
.balloon__contener figure {
width: 60px;
position: absolute;
padding: 0;
margin: 0;
top: 0;
/* 正方形を用意 */
}

修正後
.balloon__contener figure {
width: 60px;
position: absolute;
padding: 0;
top: -30px;
}

修正前
.balloon__contener figure figcaption {
color: #000000;
width: 60px;
position: absolute;
top: 60px;
text-align: center;
font-size: 70%;
line-height: 100%;
}

修正後
.balloon__contener figure figcaption {
color: #000000;
width: 60px;
position: absolute;
top: 100px;
text-align: center;
font-size: 70%;
line-height: 100%;
}

修正前
.balloon__contener .icon_emotion {
width: 30px;
height: 30px;
position: absolute;
top: 0px;
left: 40px;
background-size: auto 100%;
padding: 0;
z-index: 1;
}

修正後
.balloon__contener .icon_emotion {
width: 30px;
height: 30px;
position: absolute;
top: 20px;
left: 40px;
background-size: auto 100%;
padding: 0;
z-index: 1;
}

修正前
.balloon__contener .balloon__right .icon_emotion {
left: 0px;
}

修正後
.balloon__contener .balloon__right .icon_emotion {
/* left: 0px;*/
}
右のアイコンのアニメーションSVGがずれるので修正しました。
原因はわからないけど↑に変更するとズレ等なく使えます。