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

LINEぽい吹き出し

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

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

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

負うた子に助けられたか

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

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

うーん ひどいものだ

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

注意しなくてはいけないのは、会話表示を終えたいときは、<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>

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

サンをどうする気だ?

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

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

サンは我が一族の娘だ。

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

あの子を解き放て!

あの子は人間だぞ!

黙れ小僧!

まとめ

この拡張クラスを使うことで、「会話文をわかりやすく表示」や「LINEでの会話の再現」などに利用できます。

LINEの再現の場合は、キャプチャ画像でもよいかもしれませんが、この方法だと、検索エンジンにも内容を理解してもらえるという利点があります。

詳しい実装は以下を参照してください。

WordPressにCSSをコピペし「LINEぽい吹き出し」を作って会話を入力する方法

Simplicityの拡張クラスは、その他にも以下のようなものがあります。

Simplicity20140828より、Simplicityに、Bootstrap風の案内を表示するためのCSSクラスを追加しました。...
スポンサーリンク
アドセンス(大)
アドセンス(大)

スポンサーリンク
アドセンス(大)

コメント

  1. 匿名 より:

    会話のチョイスが素晴らしいです!(笑)

  2. わいひら わいひら より:

    名シーンを台無しにしてみました。