レンタルサーバー Staff Blog

レンタルサーバー(共用サーバー・仮想専用サーバー)と独自ドメイン、ホームページ制作、Office365とWEB会議システムなどのサービスを運営する中で得た知識やサービス比較を中心に、WordPressやPlesk、マーケティングに関する情報を発信しています。

*

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

  最終更新日:2016/03/03

こんばんは、藤田です。

 

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

なんとWordPressの記事をLINE風の

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

 

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

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

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

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

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

 

 

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

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

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

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

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

 

 

 

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

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

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

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

 

speech_bubble01

 

 

 

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

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

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

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

speech_bubble02

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

speech_bubble03

これで準備完了です。

 

 

 

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

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

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

speech_bubble04

テキストモードにしたら

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

 

サンプルソースコード

 

表示される内容

太郎さん
結婚してください!

花子さん
年収は?

太郎さん
・・・。

 

 

 

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

吹き出しのデザインは全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個の記事として投稿できるかも

などと期待しています。

 

 - WordPress

  関連記事