会話のような吹き出しを定型文作成！コピペで簡単に！プラグインなし

記事の中でキャラクターなどが会話しているように記述する「吹き出し」を、プラグインなしで実装する方法についてです。

「吹き出し」とは、当サイトはルクセリタスに標準搭載の機能ですが、以下のような感じのものです。

テーマに吹き出し機能がない場合、プラグインを使えば可能ですが、プラグインなしでも定型文登録などを行えば簡単に記事に挿入する事が出来ます。

その他の方法で実現する場合

プラグインで

「Word Balloon」、「WP-Speech-Balloon」、「Guten-bubble」などが有名です。

吹き出し機能のあるテーマ

ルクセリタス、Cocoon、SANGO、JIN、賢威、THE THORなどがあります。

プラグインなしで実現する方法

必要な対応

吹き出し用の画像を用意する
吹き出し用のCSSを用意しスタイルシートに追記
吹き出し用HTMLコードを定型文などに登録

定型文などに登録する方法については、テーマの機能に「定型文登録」があればそこに登録、類似機能がなければ「AddQuicktag」などの、独自の装飾コードなどを登録し、エディタから簡単に挿入可能な便利なプラグインでもOK。

「AddQuicktag」の使い方については以下をご覧ください。

簡単に記事の装飾をするコード登録可能なプラグイン-AddQuicktag

記事内でボタンを使ったり、文字の独自装飾をしたい場合に、CSSでデザインを記述しますが、そのままではコードを手書きしてCSSクラスを指定してやらなければなりません。今回は、そういった煩わしさを無くし、エディタでワンクリックで装飾可能にする...

画像を用意する

吹き出しに使う画像を用意します。

サイズは大きすぎないもの（縦横70～150px程度）で正方形や丸いものが良いです。

↓　こんな感じの画像。

ちなみにうちで使っているパンダとアザラシは以下のサイトより頂きました。

FLAT ICON DESIGN

基本サンプル

HTMLを登録する

テーマの「定型文登録」機能や、タグ追加できるようなプラグインでHTMLコードを登録します。

それぞれ　画像URL、キャラ名　の部分を変更してご利用下さい。

ノーマル左画像

<div class="balloon">
<figure class="balloon-image-left">
<img src="画像URL" alt="吹き出し">
<figcaption class="balloon-image-description">キャラ名</figcaption>
</figure>
<div class="balloon-text-right">
<p>吹き出し内容</p>
</div>
</div>

ノーマル右画像

<div class="balloon">
<figure class="balloon-image-right">
<img src="画像URL" alt="吹き出し">
<figcaption class="balloon-image-description">キャラ名</figcaption>
</figure>
<div class="balloon-text-left">
<p>吹き出し内容</p>
</div>
</div>

考えごと左画像

<div class="balloon thought">
<figure class="balloon-image-left">
<img src="画像URL" alt="吹き出し">
<figcaption class="balloon-image-description">キャラ名</figcaption>
</figure>
<div class="balloon-right-left">
<p>吹き出し内容</p>
</div>
</div>

考えごと右画像

<div class="balloon thought">
<figure class="balloon-image-right">
<img src="画像URL" alt="吹き出し">
<figcaption class="balloon-image-description">キャラ名</figcaption>
</figure>
<div class="balloon-text-left">
<p>吹き出し内容</p>
</div>
</div>

簡単解説

ノーマル、考えごと風ともに「balloon」というCSSクラスで定義していますが、考えごと風の場合は、更に「thought」クラスを追記しています。

ノーマル、考えごとともに、画像を左側にする場合は

balloon-image-left
balloon-text-right

画像を右側にする場合

balloon-image-right
balloon-text-left

CSSを追記する

少し長いですが、ノーマルと考えごと風の２パターン×左右で４パターン分のCSSになります。

コードを表示

/*--------------------
 吹き出し
--------------------*/
.balloon {
margin-bottom: 2em;
position: relative;
}
.balloon:before,.balloon:after {
clear: both;
content: "";
display: block;
}
.balloon figure {/*画像のサイズ*/
width: 100px;
height:100px;
}
.balloon figure img {/*画像枠のサイズ*/
width: 100%;
height: 100%;
border: 1px solid #343434;/*画像枠の色*/
border-radius: 50%;/*画像枠の丸め*/
margin: 0;
}
.balloon-image-description {/*画像（キャラクター）名称*/
padding: 5px 0 0;
font-size: 11px;
text-align: center;
}
/*画像・吹き出しの設定（左右）*/
.balloon-text-right,.balloon-text-left {
position: relative;
padding: 10px;
border: 1px solid;
border-radius: 10px;
max-width: -webkit-calc(100% - 120px);
max-width: calc(100% - 120px);
display: inline-block;
}
.balloon-image-left,.balloon-image-right {
margin-right: 20px;
}
.balloon-text-right,.balloon-text-left {
border-color: #343434;
}
.balloon-image-left, .balloon-text-right {
float: left;
}
.balloon-image-right, .balloon-text-left {
float: right;
}
.balloon p {/*吹き出しの中の文字*/
margin: 0 0 20px;
}
.balloon p:last-child {
margin-bottom: 0;
}
/* ノーマル：共通 */
.balloon-text-right:before,
.balloon-text-left:before,
.balloon-text-right:after,
.balloon-text-left:after {
position: absolute;
content: '';
}
/* ノーマル：右 */
.balloon-text-right:before {
border: 10px solid transparent;
border-right: 10px solid #343434;
top: 15px;
left: -20px;
}
.balloon-text-right:after {
border: 10px solid transparent;
border-right: 10px solid #fff;
top: 15px;
left: -19px;
}
/* ノーマル：左 */
.balloon-text-left:before {
border: 10px solid transparent;
border-left: 10px solid #343434;
top: 15px;
right: -20px;
}
.balloon-text-left:after {
border: 10px solid transparent;
border-left: 10px solid #fff;
top: 15px;
right: -19px;
}
/* 考え中の枠 */
.thought .balloon-text-right,.thought .balloon-text-left {
border-radius: 30px;
}
/*考え中：共通*/
.thought .balloon-text-right:before,
.thought .balloon-text-right:after,
.thought .balloon-text-left:before,
.thought .balloon-text-left:after {
border: 1px solid #343434;
border-radius: 50%;
}
/*考え中：右*/
.thought .balloon-text-right:before{
width: 10px;
height: 10px;
top: 15px;
left: -12px;
}
.thought .balloon-text-right:after {
width: 6px;
height: 6px;
top: 20px;
left: -19px;
}
/*考え中：左*/
.thought .balloon-text-left:before {
width: 10px;
height: 10px;
top: 15px;
right: -12px;
}
.thought .balloon-text-left:after {
width: 6px;
height: 6px;
top: 20px;
right: -19px;
}

カスタマイズサンプル

画像サイズを変える・画像枠を外す

サイズを120pxにし、枠を外した例

画像サイズを変える

以下の部分でサイズを変更して下さい。

（注意）あまり大きくすると全体デザインが崩れるので、他も修正が必要になります。

.balloon figure {/*画像のサイズ*/
width: 100px;
height:100px;
}

画像枠を外す

画像枠の設定をしている以下の部分から

.balloon figure img {/*画像枠のサイズ*/
width: 100%;
height: 100%;
border: 1px solid #9CC5E6;/*画像枠の色*/
border-radius: 50%;/*画像枠の丸め*/
margin: 0;
}

以下の画像枠と色を設定している行を削除するかコメントアウトして下さい。

border: 1px solid #343434;/*画像枠の色*/

枠の色を変える場合も、上記の部分のカラーコード変更で可能です。

枠の色・角の丸みを変更した例

border-radius: 20%;/*画像枠の丸め*/

吹き出し枠の色を変える

CSS内に指定しているカラーコード部分を好きな色のコードに変更して下さい。

サンプルの基本CSSで「#343434」となっている部分すべてです。

色変更は以下もご利用下さい。

　色別カラーコード

マカロンビビッドパステル伝統色和色セーフ色名赤桃青紫黄橙緑茶黒配色パターンサンプル

吹き出し枠に背景色をつける・文字色を変える

サンプル

全体の部分

以下の部分に背景色と文字色の指定を追記します。

/*画像・吹き出しの設定（左右）*/
.balloon-text-right,.balloon-text-left {
position: relative;
padding: 10px;
border: 1px solid;
border-radius: 10px;
max-width: -webkit-calc(100% - 120px);
max-width: calc(100% - 120px);
display: inline-block;
background-color: #267CA7;
color:#fff;
}

追記したのは下の２行です。

background-color: #267CA7;
color:#fff;

ノーマル部分

左右それぞれの「after」指定の白色設定を削除します。

削除する部分

.balloon-text-right:after {
border: 10px solid transparent;
border-right: 10px solid #fff;
top: 15px;
left: -19px;
}

.balloon-text-left:after {
border: 10px solid transparent;
border-left: 10px solid #fff;
top: 15px;
right: -19px;
}

考えごと部分

以下のように枠の色を変更し、背景色を追記します。

/*考え中：共通*/
.thought .balloon-text-right:before,
.thought .balloon-text-right:after,
.thought .balloon-text-left:before,
.thought .balloon-text-left:after {
border: 1px solid #267CA7;
border-radius: 50%;
background-color: #267CA7;
}

枠線の色変更と、以下の１行を追記しています。