LINE風会話を手軽に使えるプラグイン、Speech Bubble

この記事を読むのに必要な時間は約 19 分です。

最近見かけるようになったものに、ブログ記事内で人の会話をLINEやFacebookメッセンジャーのような吹き出しの会話で表現してあるものがあります。

 

ポップだし、馴染み深い分、なんだか解りやすい感じがしますね。

 

どうも、さっとです。

 

本来はCSSなどをゴニョゴニョして実現する機能ですが、そんなものは万人向けではありません。
今回はWordpressブログで気軽に吹き出しによる会話をブログに使えるプラグインの話です。

 

「Speech Bubble」とは

例えば、ブログ記事内で

「そうは言っても、吹き出し会話使いたいじゃないか!!」

と書いても、あまり目立たないし、誰から発せられた言葉なのかも微妙なところです。

 

そういった時に、Speech Bubbleを使えば、LINE風の会話などにみられる吹き出しでのやり取りが再現でき、誰がどんな風に発した言葉かが明確になります。

 

 

「Speech Bubble」のインストール

管理画面から「プラグイン→新規追加」と進んで、「Speech Bubble」を検索してインストールして下さい。

hakouma

インストールしたら、「プラグイン→インストール済みプラグイン」よりSpeech Bubbleを有効化するのを忘れずに行う必要があります。

 

WordPressのバージョンによっては、インストール後に有効化をするしないを選択できることもあります。

 

 

「Speech Bubble」の使い方

よくあるプラグインの様に、わずらわしい設定を行わないで、すぐに使えます。
普段の様に、投稿画面に進んで記事の執筆を開始するだけです。

 

そして、吹き出しを使いたい箇所で、下記の様にショートコードを記載します。

 

[speech_bubble type="ln" subtype="R1" icon="1.jpg" name="さっと"] いつもブログを読んでいただきありがとうございます。[/speech_bubble]

[speech_bubble type="ln" subtype="L1" icon="2.jpg" name="あなた"] 今日はどんな話ですか?[/speech_bubble]

※ショートコードの例を記載するために[ ]を全角文字で記載しています。

 

するとこんな感じで表示されます。

 

さっと
いつもブログを読んでいただきありがとうございます。
あなた
今日はどんな話ですか?

 

 

ショートコードの解説

メッセージを変更する

会話内容を記載するには、下記の●の部分に記載していきます。

 

[speech_bubble type=”ln” subtype=”R1″ icon=”1.jpg” name=”さっと”] ●●●●[/speech_bubble]

さっと
やっぱり讃岐人は讃州ビールやのう

 

 

名前の変更

名前はショートコード内のnameパラメータを変更すればいいです。
●●●となっている箇所ですね。

 

[speech_bubble type=”ln” subtype=”R1″ icon=”1.jpg” name=”●●●”] 香川の手袋は世界一[/speech_bubble]

さっと
香川の手袋は世界一

 

 

吹き出しの向きの変更

吹き出しを左右に振り分けると、会話って感じがより解りやすいですね。
ショートコード内のsubtypeパラメータのLRを変更します。

 

LRの後の数字にも意味があるので、後ほど説明します。

 

[speech_bubble type=”ln” subtype=”L1″ icon=”2.jpg” name=”あなた”] ビールとか手袋とか…何言ってるんだ、さっとさん[/speech_bubble]

あなた
ビールとか手袋とか…何言ってるんだ、さっとさん

 

 

吹き出しを考えている感じにする

先ほど吹き出しの向き変更で触れたショートコード内のsubtypeパラメータのL1R1の数字を「1」から「2」に変更します。

 

[speech_bubble type=”ln” subtype=”R2″ icon=”1.jpg” name=”さっと”] そろそろ真面目にやるか[/speech_bubble]

さっと
そろそろ真面目にやるか

 

 

吹き出しのデザインを変える

「Speech Bubble」には吹き出しの種類が9種類用意されています。
ショートコード内のtypeパラメータを変更するだけです。

 

drop・std・ fb・ fb-flat・ln・ ln-flat・ pink・ rtail・ thinkといったデザインが用意されています。

 

 

drop

[speech_bubble type=”drop” subtype=”R1″ icon=”1.jpg” name=”さっと”]これがデフォルトです[/speech_bubble]
[speech_bubble type=”drop” subtype=”L1″ icon=”2.jpg” name=”あなた”]見やすくて特徴的ですね[/speech_bubble]

 

さっと
これがデフォルトです

あなた
見やすくて特徴的ですね

 

 

std

[speech_bubble type=”std” subtype=”R1″ icon=”1.jpg” name=”さっと”]スタンダードな感じですね[/speech_bubble]
[speech_bubble type=”std” subtype=”L1″ icon=”2.jpg” name=”あなた”]どんなブログデザインにも合いそう[/speech_bubble]

 

さっと
スタンダードな感じですね

あなた
どんなブログデザインにも合いそう

 

 

fb

[speech_bubble type=”fb” subtype=”R1″ icon=”1.jpg” name=”さっと”]Facebookメッセンジャー風だね[/speech_bubble]
[speech_bubble type=”fb” subtype=”L1″ icon=”2.jpg” name=”あなた”]いいねしてほしくなりますね[/speech_bubble]

 

さっと
Facebookメッセンジャー風だね

あなた
いいねしてほしくなりますね

 

 

fb-flat

[speech_bubble type=”fb-flat” subtype=”R1″ icon=”1.jpg” name=”さっと”]リアルなFBメッセンジャーか[/speech_bubble]
[speech_bubble type=”fb-flat” subtype=”L1″ icon=”2.jpg” name=”あなた”]メッセージ送ったので見てください[/speech_bubble]

 

さっと
リアルなFBメッセンジャーか

あなた
メッセージ送ったので見てください

 

 

ln

[speech_bubble type=”ln” subtype=”R1″ icon=”1.jpg” name=”さっと”]LINE風ですね[/speech_bubble]
[speech_bubble type=”ln” subtype=”L1″ icon=”2.jpg” name=”あなた”]スタンプって儲かりますか?[/speech_bubble]

 

さっと
LINE風ですね

あなた
スタンプって儲かりますか?

 

 

ln-flat

[speech_bubble type=”ln-flat” subtype=”R1″ icon=”1.jpg” name=”さっと”]こっちはよりLINEっぽい[/speech_bubble]
[speech_bubble type=”ln-flat” subtype=”L1″ icon=”2.jpg” name=”あなた”]ツムツムばかりやってないで記事書いてください[/speech_bubble]

 

さっと
こっちはよりLINEっぽい

あなた
ツムツムばかりやってないで記事書いてください

 

 

pink

[speech_bubble type=”pink” subtype=”R1″ icon=”1.jpg” name=”さっと”]これまた妖艶な[/speech_bubble]
[speech_bubble type=”pink” subtype=”L1″ icon=”2.jpg” name=”あなた”]さっとさんには似合いませんね[/speech_bubble]

 

さっと
これまた妖艶な

あなた
さっとさんには似合いませんね

 

 

rtail

[speech_bubble type=”rtail” subtype=”R1″ icon=”1.jpg” name=”さっと”]クールな感じですね[/speech_bubble]
[speech_bubble type=”rtail” subtype=”L1″ icon=”2.jpg” name=”あなた”]これも使い勝手がよさそう[/speech_bubble]

 

さっと
クールな感じですね

あなた
これも使い勝手がよさそう

 

 

think

[speech_bubble type=”think” subtype=”R1″ icon=”1.jpg” name=”さっと”]考えている感じ[/speech_bubble]
[speech_bubble type=”think” subtype=”L1″ icon=”2.jpg” name=”あなた”]subtypeの数字を変えたらどうなるんだろう…[/speech_bubble]

 

さっと
考えている感じ

あなた
subtypeの数字を変えたらどうなるんだろう…

 

 

[speech_bubble type=”think” subtype=”R2” icon=”1.jpg” name=”さっと”]考え込むより手を動かそう[/speech_bubble]
[speech_bubble type=”think” subtype=”L2” icon=”2.jpg” name=”あなた”]こうなるんですね![/speech_bubble]

 

さっと
考え込むより手を動かそう

あなた
こうなるんですね!

 

 

アイコン画像の変更

もちろん、アイコン画像に好きな画像を使用する事が出来ます。
変更方法は、FTPソフトを利用して直接画像をアップロードします。

 

この辺りが少し初心者向きではありませんが、頑張って設定してください。

 

  1. 使用しているサーバーのWordPressのフォルダの中の「speech-bubble」の中の「img」フォルダを探します。
    例:ドメイン>www>wp>wp-content>plugins>speech-bubble>img
  2. 使用したい画像(jpg, png, gif, svg, tif)を、imgフォルダ内にアップロードします。
    ファイル名は半角英数字を使ってください。
    また、画像は正方形にしておいた方が、良いようです。
  3. Speech Bubbleのショートコード内のiconパラメータに先ほど設定したファイル名を記載。

 

 

[speech_bubble type=”ln” subtype=”R1″ icon=”sat.jpg” name=”さっと”]さっと塾長です[/speech_bubble]

さっと
さっと塾長です

 

 

さいごに

このプラグインの注意点を一つ。
ここ最近更新がありませんが、プラグインを更新した際にアップロードした画像が消える可能性があるらしく、更新の際は画像をアップロードし直す必要があるかもしれません。

 

アイデア次第で色々使い勝手の良さそうなプラグインなので、ぜひとも使ってみてください。

 

 

0 Comments

  1. よくわからないのですが、なんかすごいですね。
    もっと理解できるように頑張ります。
    本当に皆さん、すごいと思います。
    これからのよろしくお願いいたします。

    1. まちあさんこんにちは。

      あらら、難しいですか?
      これはショートコードと呼ばれるWordpressに備わっている機能を利用して、
      本来であれば「アイコン画像を貼る」「名前を書く」「吹き出しの形を作る」「セリフを書く」といった様な、
      一連の作業をひとまとめにして簡略化する機能の話ですね。

      他にも沢山こういったショートコードを追加するプラグインは沢山あるので、
      「Wordpressでこういった作業を簡略化したい」と思った時は探してみるのもいいかもしれません。

      また、解らない事があるという事は、それだけ伸びしろがあるという事ですので、可能性は無限大ですね。

    1. 福山さん、LINE風メッセージ吹き出しなんかは、
      結構なじみ深い人が多いので、何気に解りやすいものだったりするんですよ。
      ぜひとも試してみてください。

コメントを残す