初心者でも安心 WordPressでブログ内に吹き出しアイコンを作る方法を徹底解説！

<div class="voice">
<figure class="voice-img-left">
<img src="画像のURLを記載" alt="●●●"/>
<figcaption class="voice-img-description">画像下に出る名前</figcaption>
</figure>
<div class="voice-text-right">
<p class="voice-text">ここに吹き出しテキストを入力</p></div></div>

<div class="voice">
<figure class="voice-img-right">
<img src="画像のURLを記載" alt="●●●"/>
<figcaption class="voice-img-description">画像下に出る名前</figcaption>
</figure>
<div class="voice-text-left">
<p class="voice-text">ここに吹き出しテキストを入力</p></div></div>

/*Chat Bubbles　CSS Setting*/
/* 全体のスタイル */
.voice { margin-bottom: 40px;
}
/* 左画像 */
.voice-img-left { margin-left: 4px; margin-top: -1px; float: left; width: 60px; height: 60px;
}
/* 右画像 */
.voice-img-right { margin-right: 4px; margin-top: -1px; float: right; width: 60px; height: 60px;
}
.voice figure img { width: 100%; height: 100%; border: 2px solid #eee; border-radius: 50%; margin: 0;
}
/* 画像の下のテキスト */
.voice-img-description { padding: 5px 0 0; font-size: 10px; text-align: center;
}
/* 左からの吹き出しテキスト */
.voice-text-right { color: #444; position: relative; margin-left: 100px; padding: 1.2em; border: 3px solid #eee; background-color: #fff; border-radius: 5px;
}
/* 右からの吹き出しテキスト */
.voice-text-left { position: relative; margin-right: 100px; padding: 1.2em; border: 3px solid #eee; background-color: #fff; border-radius: 5px;
}
p.voice-text { margin: 0 0 8px;
}
p.voice-text:last-child { margin-bottom: 0px;
}
/* 左の三角形を作る */
.voice-text-right:before { position: absolute; content: ''; border: 10px solid transparent; border-right: 10px solid #eee; top: 15px; left: -20px;
}
.voice-text-right:after { position: absolute; content: ''; border: 10px solid transparent; border-right: 10px solid #fff; top: 15px; left: -16px;
}
/* 右の三角形を作る */
.voice-text-left:before { position: absolute; content: ''; border: 10px solid transparent; border-left: 10px solid #eee; top: 15px; right: -23px;
}
.voice-text-left:after { position: absolute; content: ''; border: 10px solid transparent; border-left: 10px solid #fff; top: 15px; right: -19px;
}
/* 回り込み解除 */
.voice:after,.voice:before { clear: both; content: ""; display: block;
}

<!-- speech -->
<script>	$(function() {	$('.voice-img-left').find('p,br').remove();	$('.voice-img-right').find('p,br').remove();	});
</script>
<!-- End speech -->