登場人物紹介と吹き出し会話

登場人物の紹介やお客様の声（アンケート）などに使えます。

<div class="cast-box">
<dl class="cast">
<dt class="cast-name">登場人物Ａ</dt><dd class="cast-headshot"><img src="/wp-content/uploads/2018/04/jin-1.png" width="80" alt="登場人物Ａ"></dd>
<dd class="cast-profile">ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。</dd>
</dl>
<dl class="cast">
<dt class="cast-name">登場人物Ｂ</dt><dd class="cast-headshot"><img src="/wp-content/uploads/2018/04/jin-2.png" width="80" alt="登場人物Ｂ"></dd><dd class="cast-profile">ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。</dd>
</dl>
<dl class="cast">
<dt class="cast-name">登場人物Ｃ</dt><dd class="cast-headshot"><img src="/wp-content/uploads/2018/04/jin-3.png" width="80" alt="登場人物Ｃ"></dd>
<dd class="cast-profile">ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。</dd>
</dl>
</div>

LINE風の吹き出し会話が作れます。

<div class="chat-l">
<div class="talker"><img alt="登場人物A" src="/wp-content/uploads/2018/04/jin-1.png">登場人物A</div>
<div class="bubble-wrap">
<div class="bubble rc8">
<div class="bubble-in">
<p>ここにセリフが入ります。ここにセリフが入ります。ここにセリフが入ります。ここにセリフが入ります。</p>
</div></div></div></div>

<div class="chat-r">
<div class="talker"><img alt="登場人物B" src="/wp-content/uploads/2018/04/jin-2.png">登場人物B</div>
<div class="bubble-wrap">
<div class="bubble rc8">
<div class="bubble-in">
<p>ここにセリフが入ります。ここにセリフが入ります。ここにセリフが入ります。ここにセリフが入ります。</p>
</div></div></div></div>

＊人物画像を丸くするにはimgタグ内にclass=”circle”を追加。
＊吹き出しを角ありにするにはrc8を外す。

吹き出しをカラーに出来ます。
吹き出しの色は全部で7色（黒、赤、青、ピンク、緑、オレンジ、黄色）に変更可能です。

<div class="chat-l">
<div class="talker"><img class="circle" alt="登場人物A" src="/wp-content/uploads/2018/04/jin-1.png">登場人物A</div>
<div class="bubble-wrap">
<div class="bubble bubble-black rc8">
<div class="bubble-in">
<p>ここにセリフが入ります。ここにセリフが入ります。ここにセリフが入ります。ここにセリフが入ります。</p>
</div></div></div></div>
 
<div class="chat-r">
<div class="talker"><img class="circle" alt="登場人物B" src="/wp-content/uploads/2018/04/jin-2.png">登場人物B</div>
<div class="bubble-wrap">
<div class="bubble bubble-black rc8">
<div class="bubble-in">
<p>ここにセリフが入ります。ここにセリフが入ります。ここにセリフが入ります。ここにセリフが入ります。</p>
</div></div></div></div>

＊吹き出しの色変更：
bubble-black、bubble-blue、bubble-red、bubble-yellow、bubble-orange、bubble-pink、bubble-green