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

LINEのインターフェースは、会話がとても分りやすいです。

シンプルでありながら、どちらが発言しているかすぐにわかるし、インターフェース自体も、もうかなり浸透しています。

でふと、「WordpressでもLINEのように会話文を表示できないかな?」と思い立ち、作成してみました。

今回は、その作成したLINE風吹き出しの設定方法と、使用方法紹介したいと思います。

こんな感じのものができます。

LINE風吹き出し

スポンサーリンク
レクタングル(大)広告

主な手順

主な作成手順は、こんな感じです。

  1. CSSをstyle.cssなどに貼り付ける
  2. CSSのclassを用いて文章を書く

CSSさえ貼り付けてしまえば、あとは「吹き出しクラスを適用したpタグ」などで、書き込むだけです。それほど手間もかからないと思います。

作成方法

作成方法は以下です。

style.cssに貼り付ける

以下のCSSをstyle.cssにコピペします。

/*******************************
* 左からの吹き出し
********************************/
.left_balloon {
    position: relative;
    background: #fff;
    border: 1px solid #777;
    margin: 10px;
    padding: 10px;
    border-radius: 15px;
    margin-right: 20%;
    clear: both;
    max-width: 500px;
    float: left;
}
.left_balloon:after,
.left_balloon:before {
    right: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.left_balloon:after {
    border-color: rgba(255, 255, 255, 0);
    border-right-color: #fff;
    border-width: 7px;
    margin-top: -7px;
}
.left_balloon:before {
    border-color: rgba(0, 0, 0, 0);
    border-right-color: #000;
    border-width: 8px;
    margin-top: -8px;
}

/*******************************
* 右からの吹き出し
********************************/
.right_balloon {
    position: relative;
    background: #85e249;
    border: 1px solid #777;
    margin: 10px;
    padding: 10px;
    border-radius: 15px;
    margin-left: 20%;
    clear: both;
    max-width: 500px;
    float: right;
}
.right_balloon:after,
.right_balloon:before {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.right_balloon:after {
    border-color: rgba(133, 226, 73, 0);
    border-left-color: #85e249;
    border-width: 7px;
    margin-top: -7px;
}
.right_balloon:before {
    border-color: rgba(119, 119, 119, 0);
    border-left-color: #777;
    border-width: 8px;
    margin-top: -8px;
}

/*******************************
* 割り込みを解除
********************************/
.clear_balloon{
  clear: both;
}

以下のCSSが書かれています。

  • 左側からの吹き出しクラス
  • 右側からの吹き出しクラス
  • 回り込み解除用のクラス

共通スタイルを、統合して書いてもよいのですが、説明が面倒になるので別々にしました。

WordPressエディターで書き込む

あとは、Wordpressのテキストエディターなどで以下のように書いていくだけです。

Wordpressのテキストエディターで入力

<p class="left_balloon">今、時間ある?</p>

<p class="left_balloon">ちょっと手伝って欲しいんだけど、いいかな?</p>

<p class="right_balloon">なに?</p>

<p class="left_balloon">近くのコンビニでiTuneカードを何枚か買ってきて欲しいんだけどいいかな?</p>

<p class="right_balloon">そんなことより、CSSの話をしようぜ。</p>

<br class="clear_balloon"/>

最初は、ビジュアルエディターで文章を通常通り打って後からclass属性を付けてもいいかもしれません。

気をつけなくてはいけないのは、会話文章の最後に<br class="clear_balloon"/>を付けていることです。(<div class="clear_balloon"></div>とかでも可)

これは、回り込み回避タグです。これを付けないと、そのあとに書き込まれる文章が回り込んでしまって、おかしな表示になるかもしれません。

動作確認

今、時間ある?

ちょっと手伝って欲しいんだけど、いいかな?

なに?

近くのコンビニでiTuneカードを何枚か買ってきて欲しいんだけどいいかな?

そんなことより、CSSの話しようぜ。

 

 

※うまく表示されない場合は、ブラウザのリロードを押してください。

divでラップして背景色を青っぽい色にすれば、よりそれっぽく見えるかもしれません。

<div style="background-color: #7897C5;">
    <!-- ここに会話を記入する -->
</div>

今、時間ある?

ちょっと手伝って欲しいんだけど、いいかな?

なに?

近くのコンビニでiTuneカードを何枚か買ってきて欲しいんだけどいいかな?

そんなことより、CSSの話しようぜ。

スマホ表示

一応、レスポンシブでも大丈夫なように書いてあるつもりです。

スマホでの表示は以下のようになります。

スマホでの表示

AddQuicktagなどでの設定

タグを利用するには、AddQuicktagのようなプラグインや、ブログエディターの機能などに以下のように登録しておくと手軽に使用できます。

左側からの吹き出し

左側からの吹き出し

タグ
開始タグ<p class="left_balloon">
終了タグ</p>

右側からの吹き出し

右側からの吹き出し

タグ
開始タグ<p class="right_balloon">
終了タグ</p>

回り込みリセットタグ

タグ
開始タグ<br class="clear_balloon"/>
終了タグ

WordPressで使うならこっちの方がおすすめ↓

タグ
開始タグ<div class="clear_balloon"></div>
終了タグ

まとめ

今回の方法を利用すると、LINEっぽい会話文章を結構手軽に作れるのではないかと思います。

あくまで、「ぽい」だけなので、見た目などが全く同じになるわけではありません。

けれど、「会話文章を分りやすく表現するとき」などに使ってもよいですし、当然「LINEでのやりとりを再現するとき」などに利用すると、雰囲気ぐらいは伝わるかもしれません。

LINEなどは、キャプチャーをとればよいかもしれませんが、こちらの方法だと検索エンジンにも内容が伝わるという利点があります。

『WordPressにCSSをコピペし「LINEぽい吹き出し」を作って会話を入力する方法』へのコメント

  1. 名前:遠藤 聡 投稿日:2015/03/28(土) 13:56:24 ID:13583a7b1

    面白いですね!会話形式にする時に良さそう。
    使わさせていただきます!

  2. アバター画像 名前:わいひら 投稿日:2015/03/28(土) 18:28:48 ID:28357bcbf

    名前リンクのサイトがSimplicityのようなので。
    Simplicityで利用するには、こちらの方が簡単かもしれません。
    SimplicityでLINE風の会話文を表示する方法

  3. 名前:遠藤 聡 投稿日:2015/03/29(日) 20:57:48 ID:70a5c104a

    ありがとうございます!
    Simplicityも愛用させていただいております!

  4. 名前:シゲ 投稿日:2015/07/16(木) 10:33:26 ID:7de9eb194

    こんにちは。いつもお世話になっております。
    このCSSで、画像や名前を表示させるようにするのは可能でしょうか?
    プラグインを使わずにこういうやり取りを表現したいのですが、可能なようでしたらご教授いただきたいと思いご連絡しました。
    宜しくお願いします。

  5. アバター画像 名前:わいひら 投稿日:2015/07/16(木) 14:30:34 ID:0639f2a06

    画像だけなら、このような使い方をされている方はおられるようです。
    ブログ カスタマイズ CSS 会話形式 LINEぽい
    名前と画像をHTMLとCSSで含めることも可能ではあると思いますが、ちょっと複雑になるので、名前を含めた画像を作成してしまった方が手っ取り早いと思います。