【WordPress】会話風の吹き出しをプラグインなしで表示する！

いろんな人のブログを読ませていただいて「これは自分も使ってみたい！」と思ったら、取り入れずにはいられない、あらくま（@sa_arakuma）です。

今回は、多くの人が取り入れている会話風の吹き出しをプラグインなしでSimplicity2に取り入れた方法をお伝えしていきます。この方法はSimplicity2に限らず、WordPressサイトなら導入できますよ！

また、吹き出しのアイコン画像の設定もとっても簡単なので、ぜひ参考になさってくださいね！

この会話風の吹き出しを表示する方法はWordPress限定の方法です！

吹き出しのスタイルシートのコード
1. PC用
2. モバイル用
アイコン画像下の空白の削除
吹き出しを表示させるコード
1. アイコン画像が左側のもの
2. アイコン画像が右側のもの
アイコン画像の表示と変更方法
1. アイコン画像を表示させる
2. アイコン画像を変更する
おわりに

吹き出しのスタイルシートのコード

先にスタイルシート用のコードを。

このブログではPC用とモバイル用で吹き出しに使う画像のサイズを変えていますが、画像のサイズを無理して変える必要はありません。

PC用

PCでの表示では画像サイズを縦横100pxにしています。

画像と吹き出し（テキスト）エリアの間隔は20pxくらいがちょうど良い間隔になりますので、画像のサイズを変更するときは「画像幅+20px」で『画像とテキストエリアの間隔を調整』に数字を書き換えてください。

/************************************
吹き出し
************************************/
/* 全体のスタイル */
.kaiwa {
  margin-bottom: 40px;
}
/* 左画像 */
.kaiwa-img-left {
  margin: 0;
  float: left;
  width: 100px;　← 画像の幅を調整
  height: 100px;　← 画像の高さを調整
}
/* 右画像 */
.kaiwa-img-right {
  margin: 0;
  float: right;
  width: 100px; ← 画像の幅を調整
  height: 100px; ← 画像の高さを調整
}
.kaiwa figure img {
  width: 100%;
  height: 100%;
  border: 1px solid #aaa;
  border-radius: 50%;
  margin: 0;
}
/* 画像の下のテキスト */
.kaiwa-img-description {
  padding: 5px 0 0;
  font-size: 10px;
  text-align: center;
  line-height: 0.5em;
}
/* 左からの吹き出しテキスト */
.kaiwa-text-right {
  position: relative;
  margin-left: 120px;　← 画像とテキストエリアの間隔を調整
  padding: 10px;
  border: 1px solid #aaa;
  border-radius: 10px;
}
/* 右からの吹き出しテキスト */
.kaiwa-text-left {
  position: relative;
  margin-right: 120px; ← 画像とテキストエリアの間隔を調整
  padding: 10px;
  border: 1px solid #aaa;
  border-radius: 10px;
}
p.kaiwa-text {
  margin: 0 0 20px;
}
p.kaiwa-text:last-child {
  margin-bottom: 0;
}
/* 左の三角形を作る */
.kaiwa-text-right:before {
  position: absolute;
  content: '';
  border: 10px solid transparent;
  border-right: 10px solid #aaa;
  top: 15px;
  left: -20px;
}
.kaiwa-text-right:after {
  position: absolute;
  content: '';
  border: 10px solid transparent;
  border-right: 10px solid #fff;
  top: 15px;
  left: -19px;
}
/* 右の三角形を作る */
.kaiwa-text-left:before {
  position: absolute;
  content: '';
  border: 10px solid transparent;
  border-left: 10px solid #aaa;
  top: 15px;
  right: -20px;
}
.kaiwa-text-left:after {
  position: absolute;
  content: '';
  border: 10px solid transparent;
  border-left: 10px solid #fff;
  top: 15px;
  right: -19px;
}
/* 回り込み解除 */
.kaiwa:after,.kaiwa:before {
  clear: both;
  content: "";
  display: block;
}

モバイル用

PC用のままでもかまわないですが、モバイル表示の場合に画像が少し大きい感じがしたのでモバイル用に画像を少し小さくしたものを表示させています。

PC用との違いは「画像の大きさ」と「画像とテキストエリアの間隔」の2か所になります。

この2か所を変更したものを、お使いのWordPressテーマが『Simplicity2』の場合は「mobile.css」に追加してください。その他のテーマの場合はちょっとわからないので、該当の場所を探して追加してくださいね。

アイコン画像下の空白の削除

アイコン画像の下にしっくりとこない空白ができることがある（当ブログにも空白ができました）ので、空白を削除する以下のコードをJSファイル（javascript.js）に追加しましょう。

Simplicity2をお使いなら子テーマのテーマの編集にjavascript.jsが用意されているので、そこへ追記してください。

$(function() {
    $('.kaiwa-img-left').find('p,br').remove();
    $('.kaiwa-img-right').find('p,br').remove();
});

吹き出しを表示させるコード

続いて実際にWordPressサイトへ吹き出しを表示させるコードを。

自分は以下の吹き出し用のコードを「AddQuicktag」に登録して簡単に使えるようにしています。

以下のコードを『投稿の編集』の「テキスト」エディターに貼り付ければ吹き出しを表示することができます。

アイコン画像が左側のもの

<div class="kaiwa">
  <figure class="kaiwa-img-left">
    <img src="dummy.jpg" alt="dummy">
    <figcaption class="kaiwa-img-description">画像下テキスト</figcaption>
  </figure>
  <div class="kaiwa-text-right">
    <p class="kaiwa-text">吹き出しテキスト</p>
  </div>
</div>

こんな感じで表示されます。（画像です）

アイコン画像が右側のもの

<div class="kaiwa">
  <figure class="kaiwa-img-right">
    <img src="dummy.jpg" alt="dummy">
    <figcaption class="kaiwa-img-description">画像下テキスト</figcaption>
  </figure>
  <div class="kaiwa-text-left">
    <p class="kaiwa-text">吹き出しテキスト</p>
  </div>
</div>

こんな感じで表示されます。（画像です）