WordPressにCSSをコピペし「LINEぽい吹き出し」を作って会話を入力する方法
LINEのインターフェースは、会話がとても分りやすいです。
シンプルでありながら、どちらが発言しているかすぐにわかるし、インターフェース自体も、もうかなり浸透しています。
でふと、「WordpressでもLINEのように会話文を表示できないかな？」と思い立ち、作成してみました。
今回は、その作成したLINE風吹き出しの設定方法と、使用方法紹介したいと思います。
こんな感じのものができます。
スポンサーリンク
主な手順
主な作成手順は、こんな感じです。
- CSSをstyle.cssなどに貼り付ける
- CSSのclassを用いて文章を書く
CSSさえ貼り付けてしまえば、あとは「吹き出しクラスを適用したpタグ」などで、書き込むだけです。それほど手間もかからないと思います。
作成方法
作成方法は以下です。
style.cssに貼り付ける
以下のCSSをstyle.cssにコピペします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 |
/******************************* * 左からの吹き出し ********************************/ .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のテキストエディターなどで以下のように書いていくだけです。
|
1 2 3 4 5 6 7 8 9 10 11 |
<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でラップして背景色を青っぽい色にすれば、よりそれっぽく見えるかもしれません。
|
1 2 3 |
<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などは、キャプチャーをとればよいかもしれませんが、こちらの方法だと検索エンジンにも内容が伝わるという利点があります。
スポンサーリンク