Webサイトをで最近よく見かけるのが、コミュニケーション、対話を行っている感じのコンテンツを見ます。
画像とCSSで作成することは可能ですが、レスポンシブルにするとなるとこれまた一気にやることが多くなります。そんな時に役に立つのが「Speech Bubble」です。
今回は、LINEやFacebook風の吹き出し会話が作れるプラグイン「Speech Bubble」をご紹介いたします。

WordPressプラグイン Speech Bubbleの使い方

ショートコードを張り付けるのですが、そこにすべてそろっている感じです。

基本的なショートコード

[speech_bubble type="ln-flat" subtype="L1" icon="1.jpg" name="A さん"] こんにちわわわわ [/speech_bubble]
[speech_bubble type="think" subtype="R1" icon="2.jpg" name="B さん"] あちゃー!おちゃー!げんまいちゃー!!![/speech_bubble]

表示結果

A さん
こんにちわわわわ

B さん
あちゃー!おちゃー!げんまいちゃー!!!

9つの吹き出しの種類がある

type="drop"type=を変更することで、吹き出しのデザインを変更することが可能です。用途により使い分けることで、より面白さや伝わりやすさが違ってくると思いますよ。

  • std シンプルな吹き出し

A さん
こんにちわわわわ

B さん
あちゃー!おちゃー!げんまいちゃー!!!

  • ln-flat Line風フラット

A さん
こんにちわわわわ

B さん
あちゃー!おちゃー!げんまいちゃー!!!

  • ln Line風

A さん
こんにちわわわわ

B さん
あちゃー!おちゃー!げんまいちゃー!!!

  • drop 影付き

A さん
こんにちわわわわ

B さん
あちゃー!おちゃー!げんまいちゃー!!!

  • fb facebook風

A さん
こんにちわわわわ

B さん
あちゃー!おちゃー!げんまいちゃー!!!

  • ln Line風

A さん
こんにちわわわわ

B さん
あちゃー!おちゃー!げんまいちゃー!!!

  • pink

A さん
こんにちわわわわ

B さん
あちゃー!おちゃー!げんまいちゃー!!!

  • rtail

A さん
こんにちわわわわ

B さん
あちゃー!おちゃー!げんまいちゃー!!!

  • think

A さん
考えている感じです。の色合いです

B さん
あちゃー!おちゃー!げんまいちゃー!!!

人物の画像を変更する

icon="1.jpg"の1.jpgを変更することで画像が変わります。
設定したい画像を/wp-content/plugins/speech-bubble/imgに格納し、ファイルを指定すればOK!

ねーさん
sample1.jpgとしてみました

ワイフ
sample2.jpgとしてみました

吹き出しと考えている風の設定

「Speech Bubble」には吹き出し(会話ver)と考えている風(思い付き)を表癌する設定もあるのです。

ねーさん
subtypeを1と設定

ワイフ
subtypeを2と設定

吹き出し尻尾の向きはsubtypeで設定します。Lであれば左向き、Rであれば右向きです。
そこに、R1、L2といった数字がついていることに気が付いたかと思います。この1or2により吹き出し(会話ver)と考えている風(思い付き)を設定可能なのです。

その他・まとめ

ありがたいことにテキストで表現できるって素晴らしいと思います。SEO対策としても評価が高いですし、何より修正するときの手間が違います。画像で会話的なコンテンツを作成すると修正大変ですもんね…

インタビューページページまで行くと文字量の関係で大変かもしれませんけど、アイデア次第でいろいろをと活用できるプラグインだと思いますよ♪

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です