【WordPress】LINEの会話風に吹き出しを出せるプラグイン「speech bubble」を導入してみた

“会話っぽく表現してみたいなあ”

スクリーンショット 2015-12-09 11.25.35

 

文章だけで表現するのに少し物足りなさを感じていた時に、ふと「LINEみたいな会話調で表現できるプラグインないかな」と考えて探してみたところ、《speech bubble》というとても素晴らしいプラグインを発見した。

製作者様のサイトに導入方法〜使用方法まで詳しく書かれているので、このエントリをご覧いただいて、導入を検討している方はぜひ参考にしてほしい。

【ありそうでなかったものを】

「WordPress・吹き出しプラグイン(Speech Bubble) ver.1.0公開」

スクリーンショット 2015-12-05 21.43.25

 

「そらすけ」と「りくまる」による会話例

 

そらすけ
こんばんわ、りくまる

りくまる
こんばんわです!そらすけ兄ちゃん

そらすけ
とうとう僕らの出番がやってきたみたいだね。

りくまる
ずっとお話ししたかったんだけど、このプラグインを見つけるまでできなかったですね!

そらすけ
そうだね。でも、これからは《speech bubble》のお陰で会話しながら説明することもできるようになるね

りくまる
楽しみです!

そらすけ
それでは、会話はここまでにして、この後は導入方法から使用方法までをまとめてもらおうね

りくまる
はあい!!

 

導入方法

プラグインのインストールと有効化

スクリーンショット 2015-12-05 21.53.07

WordPressを開いたら、【プラグイン>新規追加>speech bubbleを検索>インストール】の順でプラグインの導入を行う。最終更新が1年前ではあるが、今回僕はSTINGER5で問題なく使用できていることを確認している。

上の手順でspeech bubbleインストールしたら、忘れずに《有効化》しておこう。

 

会話用のアイコンを準備

アイコンはデフォルトだと人物のシルエットしか用意されていない。

そのため、自分でアイコン画像を用意したら、FFFTPソフトなどで以下のフォルダにアイコン画像を保存しておこう。

《wp-contents》→《plugins》→《speech-bubbles》→《img》

スクリーンショット_2015-12-05_11_31_28

僕の場合は、お馴染みのCyberduckを使用。

スクリーンショット 2015-12-09 11.30.42 スクリーンショット 2015-12-09 11.30.31

これでアイコンの準備は完了。

 

使用方法

ショートコードを貼り付ける

プラグインの導入が問題なくできていれば、Wordpressの投稿画面に以下のショートコードを入れるだけで吹き出しが表示されるはずだ。

 

【基本の会話用】

A さん
おこんばんわ
B さん
おばんです

正しく記述ができたら、以下のような表示になる。

A さん
おこんばんわ

B さん
おばんです

 

用途に合わせてカスタマイズ

吹き出しの種類は全9種類で、左右選択、アイコン変更、名前・セリフは全て1つの行で変更することが可能。

 

《吹き出しの種類》

speech_bubble type=”drop“を以下のコードに置き換えると、自動的に吹き出しの種類が変更になる。

 

drop

そらすけ
これは一般的な吹き出しタイプの表示だね

りくまる
違和感なく自然に見えます!

 

std

そらすけ
こっちはかなりシンプルなタイプみたい

りくまる
飾りっ気のないのが好きな人にはたまりませんね!

 

fb(FaceBook風)

そらすけ
これはフェイスブックで見たことある形だね

りくまる
僕、フェイスブック滅多に見ないのでわかりません!

 

fb-flat

そらすけ
さっきのフェイスブックタイプをフラットにしたタイプになったね

りくまる
なんだかちょっと寂しい気もします!

 

ln(LINE風)

そらすけ
LINEタイプだね。かなり親しみある吹き出しじゃないかな

りくまる
あ、思い出した!新しいクリエイターずスタンプ買わなくちゃ!

 

ln-flat

そらすけ
LINEのフラットタイプだってさ、りくまるどう見える?

りくまる
なんだかちょっと寂しい気もします!

 

pink

そらすけ
ちょっと可愛らしい感じになったね

りくまる
恋心が芽生えそうです!

 

rtail

そらすけ
今度はすごく単色風な感じになったね

りくまる
メリハリがない気がします!

 

think

そらすけ
りくまる、りくまる、僕の声が聞こえますか…?

りくまる
ひぃぃぃ!テレパシー怖いです!!

 

 

左右への配置変更と吹き出しの引き出し部分変更

【会話している風(左右)】

subtype=”L1″ または subtype=”left1″

subtype=”R1″ または subtype=”right1″

 

【考えごとをしている風(左右配置)】

subtype=”L2″ または subtype=”left2″

subtype=”R2″ または subtype=”right2″

 

上の通り、subtypeの記述を変えれば会話の位置を左又は右に変更することもできる。

そらすけ
吹き出し位置を両方とも左に表示されるように変えてみたよ

りくまる
そらすけ兄ちゃんの顔が見えません!

 

まとめ

会話調で話を進行させると読み手も理解しやすいだけでなく、書き手も使う言葉や表現方法に工夫をしなければいけなくなるため、とても便利なプラグインだと思う。話し手と聞き手に分けて、会話を進行させようとすると、必然的に『どこの部分が、どのようにわからないのか』ということを意識して書くことになるからだ。

今回はそらすけとりくまるに登場してもらったが、今後は動物キャラクターも含めて登場してもらいたいと考えている。