登場人物紹介と吹き出し会話 | さあ賢威を購入しよう

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

登場人物Ａ: ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。

登場人物Ｂ: ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。

登場人物Ｃ: ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。

1<div class="cast-box">
2<dl class="cast">
3<dt class="cast-name">登場人物Ａ</dt><dd class="cast-headshot"><img src="/wp-content/uploads/2018/04/jin-1.png" width="80" alt="登場人物Ａ"></dd>
4<dd class="cast-profile">ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。</dd>
5</dl>
6<dl class="cast">
7<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>
8</dl>
9<dl class="cast">
10<dt class="cast-name">登場人物Ｃ</dt><dd class="cast-headshot"><img src="/wp-content/uploads/2018/04/jin-3.png" width="80" alt="登場人物Ｃ"></dd>
11<dd class="cast-profile">ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。</dd>
12</dl>
13</div>

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

登場人物A

ここにセリフが入ります。ここにセリフが入ります。ここにセリフが入ります。ここにセリフが入ります。

登場人物B

ここにセリフが入ります。ここにセリフが入ります。ここにセリフが入ります。ここにセリフが入ります。

1<div class="chat-l">
2<div class="talker"><img alt="登場人物A" src="/wp-content/uploads/2018/04/jin-1.png">登場人物A</div>
3<div class="bubble-wrap">
4<div class="bubble rc8">
5<div class="bubble-in">
6<p>ここにセリフが入ります。ここにセリフが入ります。ここにセリフが入ります。ここにセリフが入ります。</p>
7</div></div></div></div>
8 
9<div class="chat-r">
10<div class="talker"><img alt="登場人物B" src="/wp-content/uploads/2018/04/jin-2.png">登場人物B</div>
11<div class="bubble-wrap">
12<div class="bubble rc8">
13<div class="bubble-in">
14<p>ここにセリフが入ります。ここにセリフが入ります。ここにセリフが入ります。ここにセリフが入ります。</p>
15</div></div></div></div>

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

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

登場人物A

ここにセリフが入ります。ここにセリフが入ります。ここにセリフが入ります。ここにセリフが入ります。

登場人物B

ここにセリフが入ります。ここにセリフが入ります。ここにセリフが入ります。ここにセリフが入ります。

1<div class="chat-l">
2<div class="talker"><img class="circle" alt="登場人物A" src="/wp-content/uploads/2018/04/jin-1.png">登場人物A</div>
3<div class="bubble-wrap">
4<div class="bubble bubble-black rc8">
5<div class="bubble-in">
6<p>ここにセリフが入ります。ここにセリフが入ります。ここにセリフが入ります。ここにセリフが入ります。</p>
7</div></div></div></div>
8  
9<div class="chat-r">
10<div class="talker"><img class="circle" alt="登場人物B" src="/wp-content/uploads/2018/04/jin-2.png">登場人物B</div>
11<div class="bubble-wrap">
12<div class="bubble bubble-black rc8">
13<div class="bubble-in">
14<p>ここにセリフが入ります。ここにセリフが入ります。ここにセリフが入ります。ここにセリフが入ります。</p>
15</div></div></div></div>

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

TOPページもご覧ください

賢威購入TOP 最強SEOテンプレート／無料バージョンUP／サポートフォーラムとは／テンプレートデザイン／レスポンシブルWEBデザイン／多彩なスタイルタグ　など