吹き出しの会話を手軽に使えるプラグイン「Speech Bubble」

本日は面白いプラグインを見つけましたのでご紹介します。LINEやFacebookメッセージのように会話形式でブログを表示できる、プラグイン「Speech Bubble」です。このプラグインを使うとこのような表示ができるようになります。

このように、Lineのように会話風にブログ記事を書く事ができるようになります。それではインストール方法や設定方法を解説していきます。

「Speech Bubble」のインストール

管理画面から「Speech Bubble」を検索してインストールして下さい。

もしくは、下記のサイトからプラグインをダウンロードし、wp-content/pluginsディレクトリにインストールしてください。

Speech Bubble

「Speech Bubble」の使い方

プラグインを有効化するだけで細かい設定は必要ないのもこのプラグインのいいところです。どのように表示するのかというと、いつも記事を書くように、「投稿」⇒「新規投稿」へ移動してください。

そこに、下記の記入をするだけです。

[speech_bubble type=”ln” subtype=”L1″ icon=”1.jpg” name=”デザインプラス”] 今日もブログを読んでいただきありがとうございます。[/speech_bubble]

[speech_bubble type=”ln” subtype=”R1″ icon=”2.jpg” name=”ユーザー”] 今日はどんなプラグインなんだい！？[/speech_bubble]

上記のショートコードを記事に記載いただくと、最初に表示したものがでるかと思います。

※コピーした際に”●●”が大文字になることがありますので、半角に変更ください。

ショートコードの解説

それではショートコードの中身を解説していきます。

セリフ変更

セリフを変更するには、下記の●の部分を変更いただくだけで変更可能です。
[speech_bubble type=”ln” subtype=”L1″ icon=”1.jpg” name=”デザインプラス”] ●●●●[/speech_bubble]

名前の変更

名前を変更するには、下記のデザインプラスとなっている部分をを変更いただくだけで変更可能です。
[speech_bubble type=”ln” subtype=”L1″ icon=”1.jpg” name=”デザインプラス”]今日もブログを読んでいただきありがとうございます。 [/speech_bubble]
↓
[speech_bubble type=”ln” subtype=”L1″ icon=”1.jpg” name=”夏男”]もうすぐ夏休みですね。デザインプラスは8月13日（土）〜8月16日（火）が夏期休業になります。
8月16日（火）が夏期休業になります。 [/speech_bubble]

吹き出しの種類の変更方法

「Speech Bubble」には吹き出しの種類が9種類用意されています。変更にはショートコードの【type=”In”】の部分を変更すれば変更できます。現在使っているLine風ものはInですが、9種類のコードとしてはdrop・std・ fb・ fb-flat・ln・ ln-flat・ pink・ rtail・ thinkがあります。それでは紹介していきます。

drop

std

fb

fb-flat

ln

ln-flat

pink

rtail

think

と、こんな形で様々な吹き出しがありますのでお好みのものをお使いください。

人物の向きと、吹き出しの種類の変更

【type=”L1”】を変更することで向きを変更出来ます。

【type=”L2”】を変更することで考える吹き出しに変更出来ます。

アイコン画像の変更

デフォルトの設定では、こんなシンプルな感じのアイコンになっていますが、設定の変更によって好きな画像や写真に変更することができます。
変更方法ですが、FTPツールを利用して、直接画像をアップロードします。

また、おすすめのFTPソフトの紹介はこちらでしています。
初心者におすすめの無料FTPソフトベスト3

それでは変更方法について解説します。
①使用しているサーバーのWordPressのフォルダの中の「speech-bubble」の中の「img」フォルダを探します。
例：ドメイン＞public_html＞wp-content＞plugins＞speech-bubble＞img

②使用したい画像（jpg, png, gif, svg, tif）を、imgフォルダ内にアップロードします。(ファイル名は半角英数字を使ってください）

③Speech Bubbleのショートコードの【icon=” ○○.jpg“】の部分で、先ほどアップロードしたファイル名を指定します。

これでお好みのアイコンで会話風のブログを作成することができます。

まとめ

本日はちょっと面白いプラグイン「Speech Bubble」を紹介しました。ちなみにこのプラグインの優れているもうひとつの点は、会話風の内容の部分がテキスト表示ということです。テキスト表示になることで検索ワードとしてSEOに関係してきます。非常にありがたいですね。最後に、この記事を書いてみて思うのは、会話風のブログを書く場合センスが必要かもしれませんね。

会話の具体例はこちらで解説しているので参考にしてみてください↓