WordPressでLINEみたいな吹き出しを簡単に作れるプラグイン【Speech Bubble】

ブログの中にLINEやFacebookのメッセージみたいに会話風でやり取りしている文章があると変化があることから離脱率やページ滞在時間が伸びる傾向があります。

今回はそんな吹き出しを使った会話が簡単に作ることができるWordPressのプラグイン『Speech Bubble』を紹介したいと思います。

5分もあれば使えるようになる簡単なプラグインなのでぜひお試しあれ！

今回のブログの見出しはコチラです！

1 この投稿を読むとできるようになること
2 まずはプラグイン【Speech Bubble】をインストール
3 吹き出しを出したい時はショートコードを貼り付けるだけ
4 名前を変えてみよう！
5 メッセージを変更してみよう！
6 左右を入れ替える方法は？
7 画像を変更してみよう！
8 吹き出しのデザインは全部で9種類
9 Speech Bubbleを使って楽しいブログを作ろう！

この投稿を読むとできるようになること

こんな風に吹き出しで会話しているような表現を作れるようになります。
※サンプルは「ポップコーンダイエットブログ」より

まずはプラグイン【Speech Bubble】をインストール

WordPressのダッシュボードにログインして「プラグイン」→「新規追加」を選択します。

プラグインの検索に Speech Bubble と入力します。

以下の画像のようにプラグインが見つかりますので、「今すぐインストール」をクリックします。

インストール中・・・。ぐるぐる・・・。

「有効化」を押せばインストール完了です。

特に設定はありませんので、インストールはこれにて完了です。

次は使い方を説明していきます。

吹き出しを出したい時はショートコードを貼り付けるだけ

コピペしてWordPressの投稿画面に貼り付けてみてください。

[speech_bubble type="drop" subtype="L1" icon="1.jpg" name="テスト1号さん"] こうやってショートコードを貼り付ければいいんだね [/speech_bubble]
[speech_bubble type="drop" subtype="R1" icon="2.jpg" name="テスト2号さん"] そうそう。簡単だよね！ [/speech_bubble]

1 2	[speech_bubble type="drop" subtype="L1" icon="1.jpg" name="テスト1号さん"] こうやってショートコードを貼り付ければいいんだね [/speech_bubble] [speech_bubble type="drop" subtype="R1" icon="2.jpg" name="テスト2号さん"] そうそう。簡単だよね！ [/speech_bubble]

貼り付けるとこんな画面で表示されます。

名前を変えてみよう！

以下のショートコードのnameのXXXXの部分を変更すると、吹き出しの名前の部分が変更できます。

[speech_bubble type=”drop” subtype=”L1″ icon=”1.jpg” name=”XXXX“] こうやってショートコードを貼り付ければいいんだね [/speech_bubble]

メッセージを変更してみよう！

メッセージを変更する時は以下のXXXXの部分を変更するとメッセージの内容が変わります。

[speech_bubble type=”drop” subtype=”L1″ icon=”1.jpg” name=”テスト1号さん”] XXXX [/speech_bubble]

メッセージを変更してみますね。

[speech_bubble type="drop" subtype="L1" icon="1.jpg" name="テスト1号さん"] 何かしゃべってよ！ [/speech_bubble]
[speech_bubble type="drop" subtype="R1" icon="2.jpg" name="テスト2号さん"] あ、はい。[/speech_bubble]

1 2	[speech_bubble type="drop" subtype="L1" icon="1.jpg" name="テスト1号さん"] 何かしゃべってよ！ [/speech_bubble] [speech_bubble type="drop" subtype="R1" icon="2.jpg" name="テスト2号さん"] あ、はい。[/speech_bubble]

こうなります。

左右を入れ替える方法は？

吹き出しの位置が左からと、右からのものに設定するのはsubtypeのXX部分を L1 にすると左から、 R1 にすると右から吹き出しが出てきます。

[speech_bubble type=”drop” subtype=”XX” icon=”1.jpg” name=”テスト1号さん”] こうやってショートコードを貼り付ければいいんだね [/speech_bubble]

L1ばっかりにしても大丈夫です。

[speech_bubble type="drop" subtype="L1" icon="1.jpg" name="テスト1号さん"] 連続左でもいいんだね [/speech_bubble]
[speech_bubble type="drop" subtype="L1" icon="2.jpg" name="テスト2号さん"] そうだよ～ [/speech_bubble]

1 2	[speech_bubble type="drop" subtype="L1" icon="1.jpg" name="テスト1号さん"] 連続左でもいいんだね [/speech_bubble] [speech_bubble type="drop" subtype="L1" icon="2.jpg" name="テスト2号さん"] そうだよ～ [/speech_bubble]

このショートコードだと、こうなります。

画像を変更してみよう！

ちょっと難しくなりますが、吹き出しの画像をデフォルトのものから変更してみましょう。

FTPでサーバに接続して、プラグインがインストールされているディレクトリのimgの中に画像をアップロードします。

こんな感じで2つの画像をアップロードしてみました。

アップロードした画像を設定する方法は以下のiconのXXXXの部分にアップロードした画像のファイル名を書くだけです。ファイルの種類はjpg、png、gif、svg、tifが対応しているそうです。

[speech_bubble type=”drop” subtype=”L1″ icon=”XXXX” name=”名前”] メッセージ [/speech_bubble]

このようにショートコードを書くと・・・

[speech_bubble type="drop" subtype="L1" icon="popco_icon.png" name="ポプコ"] ポップコーンの妖精ポプコです♪ [/speech_bubble]

1	[speech_bubble type="drop" subtype="L1" icon="popco_icon.png" name="ポプコ"] ポップコーンの妖精ポプコです♪ [/speech_bubble]

こうなります。

ポプコかわいいですね！

吹き出しのデザインは全部で9種類

吹き出しの種類も実は変更ができまして、drop、std、fb、fb-flat、ln、ln-flat、pink、rtail、thinkの全部で9種類のコードがあります。

typeのXXXXの部分にコード名を書きます。

[speech_bubble type=”XXXX” subtype=”L1″ icon=”1.jpg” name=”名前”] メッセージ [/speech_bubble]

drop：デフォルト

[speech_bubble type="drop" subtype="L1" icon="konta_icon.png" name="こんた"] デフォ [/speech_bubble]
[speech_bubble type="drop" subtype="R1" icon="popco_icon.png" name="ポプコ"] シンプルでいいね [/speech_bubble]

1 2	[speech_bubble type="drop" subtype="L1" icon="konta_icon.png" name="こんた"] デフォ [/speech_bubble] [speech_bubble type="drop" subtype="R1" icon="popco_icon.png" name="ポプコ"] シンプルでいいね [/speech_bubble]

std：スタンダード

[speech_bubble type="std" subtype="L1" icon="konta_icon.png" name="こんた"] スタンダード[/speech_bubble]
[speech_bubble type="std" subtype="R1" icon="popco_icon.png" name="ポプコ"] ミニマルな生活してみたい [/speech_bubble]

1 2	[speech_bubble type="std" subtype="L1" icon="konta_icon.png" name="こんた"] スタンダード[/speech_bubble] [speech_bubble type="std" subtype="R1" icon="popco_icon.png" name="ポプコ"] ミニマルな生活してみたい [/speech_bubble]

fb：フェイスブック風

[speech_bubble type="fb" subtype="L1" icon="konta_icon.png" name="こんた"] フェイスブック[/speech_bubble]
[speech_bubble type="fb" subtype="R1" icon="popco_icon.png" name="ポプコ"] いいね！ [/speech_bubble]

1 2	[speech_bubble type="fb" subtype="L1" icon="konta_icon.png" name="こんた"] フェイスブック[/speech_bubble] [speech_bubble type="fb" subtype="R1" icon="popco_icon.png" name="ポプコ"] いいね！ [/speech_bubble]

fb-flat：フェイスブックのフラットデザイン版

[speech_bubble type="fb-flat" subtype="L1" icon="konta_icon.png" name="こんた"] フェイスブックフラット[/speech_bubble]
[speech_bubble type="fb-flat" subtype="R1" icon="popco_icon.png" name="ポプコ"] フラットデザインって最近の流行りだよね。[/speech_bubble]

1 2	[speech_bubble type="fb-flat" subtype="L1" icon="konta_icon.png" name="こんた"] フェイスブックフラット[/speech_bubble] [speech_bubble type="fb-flat" subtype="R1" icon="popco_icon.png" name="ポプコ"] フラットデザインって最近の流行りだよね。[/speech_bubble]

ln：LINE風

[speech_bubble type="ln" subtype="L1" icon="konta_icon.png" name="こんた"] LINE[/speech_bubble]
[speech_bubble type="ln" subtype="R1" icon="popco_icon.png" name="ポプコ"] こんたってLINE友達いるの？[/speech_bubble]

1 2	[speech_bubble type="ln" subtype="L1" icon="konta_icon.png" name="こんた"] LINE[/speech_bubble] [speech_bubble type="ln" subtype="R1" icon="popco_icon.png" name="ポプコ"] こんたってLINE友達いるの？[/speech_bubble]

ln-flat：LINEのフラットデザイン版

[speech_bubble type="ln-flat" subtype="L1" icon="konta_icon.png" name="こんた"] LINEフラット[/speech_bubble]
[speech_bubble type="ln-flat" subtype="R1" icon="popco_icon.png" name="ポプコ"] LINE友達いるんだｗ[/speech_bubble]

1 2	[speech_bubble type="ln-flat" subtype="L1" icon="konta_icon.png" name="こんた"] LINEフラット[/speech_bubble] [speech_bubble type="ln-flat" subtype="R1" icon="popco_icon.png" name="ポプコ"] LINE友達いるんだｗ[/speech_bubble]

pink：ピンクの吹き出し

[speech_bubble type="pink" subtype="L1" icon="konta_icon.png" name="こんた"] ピンク[/speech_bubble]
[speech_bubble type="pink" subtype="R1" icon="popco_icon.png" name="ポプコ"]かわいい～[/speech_bubble]

1 2	[speech_bubble type="pink" subtype="L1" icon="konta_icon.png" name="こんた"] ピンク[/speech_bubble] [speech_bubble type="pink" subtype="R1" icon="popco_icon.png" name="ポプコ"]かわいい～[/speech_bubble]

rtail：水色の吹き出し（rtailってなんだろう？）

[speech_bubble type="rtail" subtype="L1" icon="konta_icon.png" name="こんた"] 水色[/speech_bubble]
[speech_bubble type="rtail" subtype="R1" icon="popco_icon.png" name="ポプコ"]さわやか～[/speech_bubble]

1 2	[speech_bubble type="rtail" subtype="L1" icon="konta_icon.png" name="こんた"] 水色[/speech_bubble] [speech_bubble type="rtail" subtype="R1" icon="popco_icon.png" name="ポプコ"]さわやか～[/speech_bubble]

think：心の声の吹き出し

[speech_bubble type="think" subtype="L1" icon="konta_icon.png" name="こんた"] ポプコかわいいなぁ・・[/speech_bubble]
[speech_bubble type="think" subtype="R1" icon="popco_icon.png" name="ポプコ"]いつも悪く言ってゴメンね。ホントは・・・[/speech_bubble]

1 2	[speech_bubble type="think" subtype="L1" icon="konta_icon.png" name="こんた"] ポプコかわいいなぁ・・[/speech_bubble] [speech_bubble type="think" subtype="R1" icon="popco_icon.png" name="ポプコ"]いつも悪く言ってゴメンね。ホントは・・・[/speech_bubble]