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

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

 

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

 

どうも、さっとです。

 

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

 

「Speech Bubble」とは

例えば、ブログ記事内で

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

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

 

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

 

 

「Speech Bubble」のインストール

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

インストールしたら、「プラグイン→インストール済みプラグイン」より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］

 

 

 

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］

 

 

 

ｌｎ

［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］

 

 

 

ｌｎ-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］

 

 

 

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］

 

 

 

［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］

 

 

さいごに

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

 

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