 HOME /
 ブログ /
 WordPressの吹き出しプラグイン『Speech Bubble』で会話形式のブログコンテンツが作れる！

ブログ

WordPressの吹き出しプラグイン『Speech Bubble』で会話形式のブログコンテンツが作れる！

いいね！
568
ツイート
260
このページは260回共有されました。これらのツイートを見る。
11
259

 2015.01.29

by JUNICHI
 15

やっと見つけた！

LINEやFacebookみたいな会話をブログで使う事ができる、めちゃくちゃ便利な吹き出しプラグインを見つけました。

毎年平社員の佐伯さん

こんにちは。WordPressではこんな便利なプラグインがあるんですね。

OLの長野さん

佐伯さん、"毎年平社員"っていう肩書がつけられてますよ。チョー似合う。

今回は、こんなふうに漫画風や会話風にブログを進行することができるようになるワードプレスのプラグイン『Speech Bubble』というプラグインのインストール方法＆使い方をご紹介します。

スポンサードリンク

この記事のもくじ [とじる]

Speech Bubbleのインストールの手順

「Speech Bubble」はプラグインなので、基本的にインストール方法は他のプラグインと同じです。

念のために図解します。

手順１）ダッシュボードの「プラグイン」

プラグイン１

手順２）「新規追加」から右の検索窓に「Speech Bubble」と入力してENTER プラグイン2

手順３）Speech Bubbleが出てきますので、「今すぐインストール」をクリック

プラグイン3

手順４）「プラグインを有効化」をクリックプラグイン有効

以上でプラグインのインストールと有効化が終わりました。

吹き出しプラグインSpeech Bubbleを使って投稿をする方法

いつも通りブログを書く手順で「投稿」⇒「新規投稿」を選びます。

ビジュアルモードでも、テキストモードでも両方使用可能でした。

プラグイン5

この新規投稿画面に以下のコードをコピペしてみてください。

				
				1
2

						[speech_bubble type="drop" subtype="L1" icon="1.jpg" name="A さん"] おっす！ [/speech_bubble]
[speech_bubble type="drop" subtype="R1" icon="2.jpg" name="B さん"] なんだちみは！？[/speech_bubble]

これを貼り付けてもらうと↓こんな風になる。

A さん

おっす！

B さん

なんだちみは！？

セリフの変更の仕方

				
				1
2

						[speech_bubble type="drop" subtype="L1" icon="1.jpg" name="A さん"]●●●●●[/speech_bubble]
[speech_bubble type="drop" subtype="R1" icon="2.jpg" name="B さん"]×××××[/speech_bubble]

Aさんのセリフは↑のコードの●●●●●の部分を変えればOK。同じくBさんのセリフは↑のコードの×××××の部分を変えればOK。

キャラの名前の変更方法

				
				1
2

						[speech_bubble type="drop" subtype="L1" icon="1.jpg" name="■さん"] おっす！ [/speech_bubble]
[speech_bubble type="drop" subtype="R1" icon="2.jpg" name="◎さん"] なんだちみは！？[/speech_bubble]

キャラの名前が今は「Aさん」「Bさん」になってるけど、これも↑のコードの【name="■さん"】のところ、「■さん」「◎さん」を変更すれば自由に設定できる。

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

実は吹き出しの種類も9種類用意されている。いいねいいね！！

9種類は↓のコードの【type="drop"】の部分を変更すればOK。デフォルトはdropになっている。

				
				1
2

						[speech_bubble type="drop" subtype="L1" icon="1.jpg" name="■　さん"] おっす！ [/speech_bubble]
[speech_bubble type="drop" subtype="R1" icon="2.jpg" name="◎ さん"] なんだちみは！？[/speech_bubble]

また、吹き出しのしっぽも同じく【subtype="　"】の部分で変更します。

L1⇒人物が左側に配置、吹き出しのしっぽは「話す」感じになる

毎年平社員の佐伯さん

subtype="L1″にしました。

OLの長野さん

いやだ、佐伯さんちょっと加齢臭するー。

L2⇒人物が左側に配置、吹き出しのしっぽは「考える」感じになる

毎年平社員の佐伯さん

subtype="L2″にしました。

OLの長野さん

うちのおじいちゃんもこんな臭いしてたなぁ。

R1⇒人物が右側に配置、吹き出しのしっぽは「話す」感じになる

毎年平社員の佐伯さん

subtype="R1″にしました。

OLの長野さん

やだぁ、佐伯さんちょっとこっちこないでよ。

R2⇒人物が右側に配置、吹き出しのしっぽは「考える」感じになる

毎年平社員の佐伯さん

subtype="R2″にしました。

OLの長野さん

佐伯さんって結婚してるのかな？

アイコン画像（キャラとかの画像）の変更方法

デフォルトの設定では、こんなシンプルな感じのアイコンになっています↓

A さん

おっす！

B さん

なんだちみは！？

それを、今回僕が使用した「佐伯さん」「長野さん」みたいに、あなたの好きな画像や写真に変更することができます。

アイコン画像の変更手順

手順１）あなたの使用しているサーバーのWordPressのフォルダの中の「speech-bubble」の中の「img」フォルダを探します。

例：ドメイン＞public_html＞wp-content＞plugins＞speech-bubble＞img

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

手順３）このSpeech Bubbleの【icon=" ○○.jpg"】の部分で、先ほどアップロードしたファイル名を指定してあげればOKです。

				
				1
2

						[speech_bubble type="drop" subtype="L1" icon="1.jpg" name="A さん"] おっす！ [/speech_bubble]
[speech_bubble type="drop" subtype="R1" icon="2.jpg" name="B さん"] なんだちみは！？[/speech_bubble]