WordPressプラグイン を使わずに吹き出し会話

公開日:

WordPressには吹き出しを使った会話形式のページが作れるプラグインがいくつかあります。2つほど使ってみたのですが，どちらもしっくりこなかったので，プラグイン を使わずに吹き出し会話のページが作れるようショートコード を自作してみたと言うお話です。

特にこだわりがなければプラグイン がおすすめ

私が試したプラグイン は，「LIQUID SPEECH BALLOON」と「Word Ballon」。どちらも有名なプラグイン のようで，検索すればすぐにヒットするので，詳しくはそちらをみてください。

どちらも，高機能なのですが，高機能な分，色々と選択しなければならないことが多いのと，HTMLコードがかなり複雑になってしまう（台詞の部分が多くのdivで囲まれてしまう）のが難点。もっとシンプルにやりたかったので，自作することにしました。

「シンプル」にこだわったので自作

まず，吹き出しの仕組みです。HTMLは次のような感じ。divは2重に抑えました。

<div class="yuka">
<div>
<p>うーん，だめか…。</p>
</div>
</div>
<div class="teacher">
<div>
<p>違う方法を試してみよう！</p>
</div>
</div>

CSSは次のように作ります。

.yuka,
.takashi,
.teacher {
  display: flex;
  align-items: flex-start;
}
.teacher {
  flex-direction: row-reverse;
}
.yuka::before,
.takashi::before,
.teacher::before {
  display: block;
  margin-top: 1em;
  padding: 64px 0 0 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top center;
  flex-basis: 64px;
  flex-shrink: 0;
  height: 2em;
  font-size: 1.4rem;
  font-weight: bold;
  text-align: center;
}
.yuka::before {
  background-image: url(images/yuka.png);
  content: "結花";
}
.takashi::before {
  background-image: url(images/takashi.png);
  content: "隆史";
}
.teacher::before {
  background-image: url(images/teacher.png);
  content: "先生";
}
.yuka > div,
.takashi > div,
.teacher > div {
  position: relative;
  margin-top: 1em;
  border: 1px solid lightgray;
  border-radius: 5px;
  background-color: white;
  padding: 5px 2vh;
}
.yuka > div::before,
.takashi > div::before {
  content: "";
  position: absolute;
  top: 20px;
  left: -15px;
  border: solid 5px transparent;
  border-right: solid 10px lightgray;
}
.yuka > div:after,
.takashi > div:after {
  content: "";
  position: absolute;
  top: 20px;
  left: -13px;
  border: solid 5px transparent;
  border-right: solid 10px white;
}
.teacher > div::before {
  content: "";
  position: absolute;
  top: 20px;
  right: -15px;
  border: solid 5px transparent;
  border-left: solid 10px lightgray;
}
.teacher > div::after {
  content: "";
  position: absolute;
  top: 20px;
  right: -13px;
  border: solid 5px transparent;
  border-left: solid 10px white;
}
.yuka p,
.takashi p,
.teacher p {
  margin: 0;
  padding: 0;
  width: auto;
}

外側のdiv要素は「display: flex;」にして，「::before」擬似要素の「content」に人物名，「background-image」にアバターの画像を指定します。

内側のdiv要素は吹き出しの枠です。「::before」と「::after」に大きさ0のボックスを用意し，その片側だけに太めのborderを設定することで吹き出しの尖った部分を作るという方法です。::beforeで灰色の三角を作り，::afterで白の三角を重ねることで灰色の枠を作っています。

本サイトでは，結花と隆史は左側，先生は右側と，人物ごとに配置を固定しているので，このやり方で十分です。なお，右側から話す先生の部分は，flex-directionをrow-reverseにすることで実現しています。後々，人物の顔を省略して台本のような形式で印刷することも想定しています。

そして，function.phpに以下の記述を追加して，ショートコード が使えるようにします。

// --- [bubble]
function bubble_func($atts, $content = nul) {
  return '<div class="'.$atts[0].'"><div><p>'.$content.'</p></div></div>';
}
add_shortcode('bubble', 'bubble_func');

これで，エディタで

[bubble yuka]うーん，だめか…。[/bubble]
[bubble teacher]違う方法を試してみよう！[/bubble]

のように記述すれば，最初に挙げたHTMLが生成され，吹き出しで次のように表示されます。Gutenbergのブロックエディタでは，一つのセリフを一つの段落ブロックに記述する方法でも大丈夫です。

うーん，だめか…。

違う方法を試してみよう！