プラグイン無しで画像付き吹き出し風の記事を作成してみる

先生と生徒等複数の人の画像と共に吹き出しで記事を構成しているサイトをよく見かけます。ほとんどが同じ表示で、どの様にして作成しているのか気になっていました。
といくことで、グーグル先生に聞いてみたら、WordPressだと、「Speech Bubble」プラグインが利用されているようである。
 
しかし、「Speech Bubble」プラグインは長期間更新されていいません。また、利用するプラグインが多くなるのも気になるので、プラグイン無しで吹き出し風の記事を作成してみた。
作成に関して、下記サイトを参考にさせていただきました。
➡ 画像と吹き出しテキストで会話風にするHTMLとCSS

画像付き吹き出し風の記事の表示例

下記は、作成した「画像付き吹き出し風のテキスト」で表示させています。
 

吹き出し風のテキスト、HTMLとCSSで簡単に出来ちゃいました！

本当に簡単に出来るの？

利用するには、style.cssに吹き出し風のテキストの表示スタイルのためのＣＳＳを追加して…
投稿（記事作成）のときに、表示用のＨＴＭＬを書かないといけないかな！
一から記述すると面倒だけど、記事入力を簡単にするプラグインなどを利用すると楽に入力できると思うよ。

色や形を変えられたら良いのに、そんなこと出来るのかなあ・・・・・・・

ここのサンプルでも色をつけてるけど、CSSの色指定を変更で可能だよ。
形を変えるのは、CSSについての知識が少々必要かもね？

ＨＴＭＬの作成例

「左からの吹き出し」と「右からの吹き出し」とそれぞれに考える吹き出しがあります。
 

左からの吹き出し

<div class="balloon">
  <figure class="balloon-img-left">
    <img src="画像URL" alt="">
    <figcaption class="balloon-img-description">名前</figcaption>
  </figure>
  <div class="balloon-txt-left">
    <p>吹き出しの中の文章！</p>
  </div>
</div>

右からの吹き出し

<div class="balloon">
  <figure class="balloon-img-right">
    <img src="画像URL" alt="">
    <figcaption class="balloon-img-description">名前</figcaption>
  </figure>
  <div class="balloon-txt-right">
    <p>吹き出しの中の文章！</p>
  </div>
</div>

右からの考えている吹き出し

<div class="balloon think">
  <figure class="balloon-img-right">
    <img src="画像URL" alt="">
    <figcaption class="balloon-img-description">名前</figcaption>
  </figure>
  <div class="balloon-txt-right">
    <p>吹き出しの中の文章！</p>
  </div>
</div>

※左からの「考えているの吹き出し」も同様に、「think」のクラスを指定すると表示します。

CSSの作成例

下記のCSSを、style.CSSに追加します。

.balloon {
	margin-bottom: 1.5em;
	padding: 0;}
.balloon figure {margin: 0}
.balloon:before,.balloon:after {
	clear: both;
	content: "";
	display: block;}
.balloon .balloon-img-left {
	float: left;
	width: 60px;
	margin-right: 20px;}
.balloon-img-left img {
	width: 60px;
	height: 60px;
	border: 1px solid #CCC;
	border-radius: 50%;}
.balloon-img-description{
	font-size: .85em;
	line-height: 1.5em;
	text-align: center;}
.balloon-txt-left {
	position: relative;
	float: left;
	padding: 1em;
	line-height: 1.5em;
	border: 1px solid #CCC;
	background-color: #D1FFF1;
	border-radius: 8px;
	max-width: calc( 100% - 120px ) ;}
.balloon-txt-left:before {
	position: absolute;
	content: '';
	border: 10px solid transparent;
	border-right: 10px solid #CCC;
	top: 15px;left: -20px;}
.balloon-txt-left:after {
	position: absolute;
	content: '';
	border: 10px solid transparent;
	border-right: 10px solid #D1FFF1;
	top: 15px; left: -19px;}

.balloon .balloon-img-right {
	float: right;
	width: 60px;
	margin-left: 20px;}
.balloon-img-right img {
	width: 60px;
	height: 60px;
	border: 1px solid #CCC;
	border-radius: 50%;}
.balloon-txt-right {
	position: relative;
	float: right;
	padding: 1em;
	line-height: 1.5em;
	border: 1px solid #CCC;
	background-color: #FFE5F4;
	border-radius: 8px;
	max-width: calc( 100% - 120px ) ;}
.balloon-txt-right:before {
	position: absolute;
	content: '';
	border: 10px solid transparent;
	border-left: 10px solid #CCC ;
	top: 15px; right: -20px;}
.balloon-txt-right:after {
	position: absolute;
	content: '';
	border: 10px solid transparent;
	border-left: 10px solid #FFE5F4;
	top: 15px; right: -19px;}

.think .balloon-txt-right,.think .balloon-txt-left {
	border-radius: 20px;}
.think  .balloon-txt-left, .think .balloon-txt-right {
	background-color: #FFF;}
.think .balloon-txt-left:before {
	border: 1px solid #CCC;
	border-radius: 50%;
	width: 8px; height: 8px;
	top: 15px; left: -12px;
	background-color: #FFF;}
.think .balloon-txt-left:after {
	border: 1px solid #CCC;
	border-radius: 50%;
	width: 4px; height: 4px;
	top: 20px; left: -19px;
	background-color: #FFF;}
.think .balloon-txt-right:before {
	border: 1px solid #CCC;
	border-radius: 50%;
	width: 8px; height: 8px;
	top: 15px; right: -12px;
	background-color: #FFF;}
.think .balloon-txt-right:after {
	border: 1px solid #CCC;
	border-radius: 50%;
	width: 4px; height: 4px;
	top: 20px; right: -19px;
	background-color: #FFF;}

吹き出しの色については、上記のCSSの色指定の部分を変更してください。
複数の色の吹き出しが必要な場合は、クラス分けをして色を指定するといいですね。