SimplicityでLINE風の会話文を表示する方法

PR 2014/12/29 2016/10/8 拡張クラス

Simplicityの拡張クラスを使って、本文記事にLINEぽい会話文を表示する方法を紹介します。

尚、この機能はSimplicity1.3.8からの実装ですので、これよりもバージョンが低い場合は、アップデートする必要があります。

LINE風会話文の書式

Simplicityでは、本文を彩るために、いくつか拡張クラスを用意しています。

吹き出しのみ

例えば、Wordpressエディターなどで、以下のように入力すると

<p class="left_balloon">負うた子に助けられたか</p>

<p class="right_balloon">この谷はいい、いつ来ても心が和む</p>

<p class="left_balloon">今度の旅はどうじゃった？</p>

<p class="right_balloon">うーん ひどいものだ</p>

<p class="right_balloon">南でまた２つの国が腐海にのまれてしまった<img alt="" src="https://wp-simplicity.com/wp-content/uploads/2014/12/1724.png" /></p>

<div class="clear_balloon"></div>

以下のように表示されます。

負うた子に助けられたか

この谷はいい、いつ来ても心が和む

今度の旅はどうじゃった？

うーんひどいものだ

南でまた２つの国が腐海にのまれてしまった

注意しなくてはいけないのは、会話表示を終えたいときは、<div class=”clear_balloon”></div>のような、clear_balloonクラスを利用して、回り込みのリセットを行う必要があります。

これを行わないと、その後の文章表示が崩れます。

背景＆吹き出し

<div class=”line_back”></div>タグでラップしてやることで、背景も設定できます。

以下のように記述すると、

<div class="line_back">
  <p class="left_balloon">サンをどうする気だ？</p>
  <p class="left_balloon">あの子も道連れにするつもりか？</p>

  <p class="right_balloon">いかにも人間らしい手前勝手な考えだな。</p>
  <p class="right_balloon">サンは我が一族の娘だ。</p>
  <p class="right_balloon">森と生き、森が死ぬ時は共に滅びる。</p>

  <p class="left_balloon">あの子を解き放て！</p>
  <p class="left_balloon">あの子は人間だぞ！</p>
  
  
  <p class="right_balloon">黙れ小僧！</p>

  <div class="clear_balloon"></div>
</div>

以下のように表示されます。

サンをどうする気だ？

あの子も道連れにするつもりか？

いかにも人間らしい手前勝手な考えだな。

サンは我が一族の娘だ。

森と生き、森が死ぬ時は共に滅びる。

あの子を解き放て！

あの子は人間だぞ！

黙れ小僧！