LINEみたいな吹き出し会話形式にできるWordPressプラグイン「Speech Bubble（スピーチバブル）」を紹介したくて仕方ない！

こんばんは、藤田です。

2016年の新年早々、芸能関係を中心に、大きな話題を呼んだLINEですが

なんとWordPressの記事をLINE風の

吹き出し会話形式にできるプラグインを見つけました。

ちょっと前から、吹き出し会話風の記事を書きたいけど、

外注に依頼しないと無理だよな～

と思っていたところ、たまたま発見した感動もあり

何でもいいので使いたくて、

そして誰かに紹介したくて仕方ないので、お付き合いください。

吹き出しプラグイン「Speech Bubble（スピーチバブル）」

LINEみたいな会話形式を実現してくれるプラグインの名前は

通称、吹き出しプラグイン「Speech Bubble（スピーチバブル）」です。

なんとこのプラグインの作者は日本人の Made in Japan なんです。

「ありそうでなかったものを」をコンセプトに開発しているようです。（…多分）

吹き出しプラグインをインストールしよう！

それではプラグインの導入方法です。

まず、プラグインで「Speech Bubble」と検索します。

出てきた「Speech Bubble」の「今すぐインストール」をクリックします。

プラグインを有効にしよう！

WordPressのダッシュボードのメニューにある「プラグイン」を開いて

インストールした「Speech bubble（ふきだしプラグイン）」の

「有効化」リンクをクリックします。

インストール完了画面に表示される「プラグインを有効化」をクリックしてもOKです。

これで準備完了です。

吹き出しプラグインを使ってみよう！

さっそく吹き出しプラグインを使ってみます。

WordPressの記事投稿画面の右上にあるテキストモードを選択します。

テキストモードにしたら

試しに下記サンプルソースコードをコピペしてみましょう。

サンプルソースコード

表示される内容

太郎さん

結婚してください！

花子さん

年収は？

太郎さん

・・・。

吹き出しのデザインを変更する！

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

ソースのtypeで変更することができます。

drop
std
fb
fb-flat
ln
ln-flat
pink
rtail
think

他のデザインを試してみましょう。

“drop”と”think”を使用してみたバージョンがコチラ

表示される内容

教授

何か質問ありますか？

生徒

芳香族はなぜ安定なんですか？

教授

ついさっき説明しましたけど（怒

生徒

なんか怒ってる（汗

サンプルソースコード

アイコンを変更する！

アイコンを変更するのは少々面倒です。

FTPでサーバーに接続し、下記ディレクトリに画像をアップします。

/wp-content/plugins\speech-bubble/img/

アップした画像のファイル名をソースのiconで指定してあげれば

アイコンが変わります。

※この部分はおいおい試して情報を追加していきます。

まとめ

いかがでしたでしょうか。

この吹き出しプラグイン「Speech Bubble（スピーチバブル）」は

例えば、教授と生徒のような設定を作って

会話形式にしてあげることで、

IT系でよくある難しい単語ばかりで読みにくくなりがちなFAQなどの内容を

読みやすく、わかりやすくしてくれる可能性があります。

個人的には、ネタが弱いときでも

会話部分を面白くすることで

1個の記事として投稿できるかも

などと期待しています。