会話風の吹き出しで楽しい記事を書こう!

author photo

Byinfobloger

会話風の吹き出し

毎日記事を書いていると、どうしても単調になりがちです。

そんな時は遊び心を忘れずに、ちょっとしたアクセントをつけてみることも大事ですよね。

今回は吹き出しで会話風の記事を書く時に利用できる見本を紹介します。

スポンサーリンク

男女左右別口コミ吹き出しの見本例

よく口コミなどで見かける左右に吹き出しと画像がセットになったレイアウトです。

レスポンシブに対応していて、スマホでは画像が上に、吹き出しは下になります。

女性画像と男性画像が3種類。
左右どちらにでも画像を配置できます。

サンプルコードは最後にまとめて紹介します。

女性画像で左右吹き出し見本

女性1

左側に吹き出しがでます。女性1は笑顔です。

女性2

今度は右側に画像を配置しました。女性2は受付嬢の雰囲気ですね!

女性3

またまた左側に吹き出しが。女性3はちょっとお悩み中のようですね・・・

男性画像で左右吹き出し見本

男性1

男性1は、どこから見ても好青年!新入社員のイメージですかね?

男性2

男性2は少し神経質な印象を受けます。話しかけても無視されそうですね。

男性3

男性3は老紳士の雰囲気で作ってみました。ちょっと無理がありますかね・・・

このようにして会話形式で記事を書くことも出来ます。

背景を交互に変えるサンプル

男性1

先ほどと同じ背景ですね。

男性2

女性の背景だけ変えてみました。クラス指定「balloon1-right2」となります。

男性3

クラス指定「balloon1-right1」の場合は現在の背景色になります。

男性2

もちろん男性の背景も変更できます。クラス指定「balloon1-left2」となります。

会話式吹き出しソースコード

ここまで紹介してきた会話風の吹き出しのソースコードをまとめて紹介します。

吹き出しの向き
  • 吹き出しの向きもクラス指定で自由に変えることができます
  • 左向き=「balloon-box-left」
  • 右向き=balloon-box-right
画像は男女それぞれ3枚
  • 画像は「item1」のファイル名と連番を変えるだけで変更できます
  • 女性1=woman01.jpg
  • 女性2=woman02.jpg
  • 女性3=woman03.jpg
  • 男性1=man01.jpg
  • 男性2=man02.jpg
  • 男性3=man03.jpg
画像の背景を変える

画像の背景は2種類あります。

クラス指定で左右どちらでも変更することができます。

そのままコードをコピペして使用してください。

吹き出しの向きは左で画像は女性2とか、背景をかえたり自由に組み合わせて使用してください。

青系背景左側吹き出し男女

女性1

女性画像1、左方向の吹き出しサンプルです。

HTML
<div class="balloon-box-left">
<div class="item1">
<img src="https://●●●/woman01.jpg" alt="女性1" />
</div>
<div class="item2">
<div class="balloon1-left1">
<p><!-- ここに本文をいれてください --></p>
</div>
</div>
</div>
男性1

男性画像画像1、左方向の吹き出しサンプルです。

HTML
<div class="balloon-box-left">
<div class="item1">
<img src="https://●●●/man01.jpg" alt="男性1" />
</div>
<div class="item2">
<div class="balloon1-left1">
<p><!-- ここに本文をいれてください --></p>
</div>
</div>
</div>

青系背景右側吹き出し男女

女性2

女性画像2、右方向の吹き出しサンプルです。

HTML
<div class="balloon-box-right">
<div class="item1">
<img src="https://●●●/woman01.jpg" alt="女性1" />
</div>
<div class="item2">
<div class="balloon1-right1">
<p><!-- ここに本文をいれてください --></p>
</div>
</div>
</div>
男性2

男性画像2、右方向の吹き出しサンプルです。

HTML
<div class="balloon-box-right">
<div class="item1">
<img src="https://●●●/man01.jpg" alt="男性1" />
</div>
<div class="item2">
<div class="balloon1-right1">
<p><!-- ここに本文をいれてください --></p>
</div>
</div>
</div>

黄色系背景左側吹き出し男女

女性3

こちらが背景色2、吹き出し方向左の女性画像3になります。

HTML
<div class="balloon-box-left">
<div class="item1">
<img src="https://●●●/woman03.jpg" alt="女性3" /></div>
<div class="item2">
<div class="balloon1-left2">
<p><!-- ここに本文をいれてください --></p>
</div>
</div>
</div>
男性3

こちらが背景色2、吹き出し方向左の男性画像3になります。

HTML
<div class="balloon-box-left">
<div class="item1">
<img src="https://●●●/man03.jpg" alt="男性3" /></div>
<div class="item2">
<div class="balloon1-left2">
<p><!-- ここに本文をいれてください --></p>
</div>
</div>
</div>

黄色系背景右側吹き出し男女

女性1

こちらが背景色2、吹き出し方向右の女性画像1になります

HTML
<div class="balloon-box-right">
<div class="item1">
<img src="https://●●●/woman01.jpg" alt="女性1" />
</div>
<div class="item2">
<div class="balloon1-right2">
<p><!-- ここに本文をいれてください --></p>
</div>
</div>
</div>
男性1

こちらが背景色2、吹き出し方向右の男性画像1になります

HTML
<div class="balloon-box-right">
<div class="item1">
<img src="https://●●●/man01.jpg" alt="男性1" />
</div>
<div class="item2">
<div class="balloon1-right2">
<p><!-- ここに本文をいれてください --></p>
</div>
</div>
</div>

会話式吹き出しまとめ

紹介したように会話風の吹き出しを使用することで、難しい説明なども読者に簡単に伝えることができます。

最初から最後まで吹き出しを使って記事を書くのは論外ですが、ワンポイントで使用するちょ効果的なのではないでしょうか。

左右、画像の種類、背景などを上手く組み合わせて、楽しい記事を書いてみてください。

関連記事
Share

Comments 0

Leave a reply