【吹き出しプラグイン】Speech bubble(スピーチバブル)の使い方【WordPress】

吹き出しプラグイン『speech bubble』 WordPress
がく
これこれ!吹き出しの会話やってみたかったんだよね~
ひさ
お~、いいねぇ~♪

LINEで馴染みがある方も多いであろう吹き出しの会話。これを簡単にWordPressのブログに導入できるプラグインを見つけました!

今回インストールしたのは『Speech bubble』(スピーチバブル)という吹き出しプラグインです。

インストールの方法から使い方、アレンジの方法までまとめて紹介します!

吹き出しプラグイン『Speech bubble(スピーチバブル)』をインストールする方法

まずはインストール♪

手順はほかのプラグインの場合と同じです。

 

WordPressの管理画面で「プラグイン」>新規追加>「Speech bubble」で検索>「今すぐインストール」の流れでインストール

吹き出しプラグイン『speech bubble』_01

 

インストールが済んだら「有効化」をクリック

吹き出しプラグイン『speech bubble』_02

 

これでSpeech bubbleを使う準備が整いました♪

Speech bubble(スピーチバブル)の使い方|吹き出しの会話を作ってみよう

さっそくSpeech bubbleを使って吹き出しのある会話を作ってみましょう!

 

いつも記事を書くときと同じように、「新規投稿」で記事編集画面を開きます。
ビジュアルモードとテキストモードのどちらでもOKです。

 

次のコードをコピペしてみましょう。

[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 さん
わっ!吹き出しちゃった!

 

簡単ですよね♪

吹き出しの名前や会話を変更する方法

[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]
  • 名前の変更:「name=” ”」の部分を書き換える
  • セリフの変更:コードの「○○○」の部分を書き換える

 

たとえば次のように書き換えると・・・

[speech_bubble type="drop" subtype="L1" icon="1.jpg" name="がく"]名前やセリフも自由に変更できるよ![/speech_bubble]
[speech_bubble type="drop" subtype="R1" icon="2.jpg" name="ひさ"]そりゃそうだ![/speech_bubble]

 

こうなります。

がく
名前やセリフも自由に変更できるよ!

ひさ
そりゃそうだ!

吹き出しの種類を変更する方法

吹き出しの種類はなんと9種類もあります!

[speech_bubble type="drop" subtype="L1" icon="1.jpg" name="がく"]吹き出しの種類は9種類![/speech_bubble]
[speech_bubble type="drop" subtype="R1" icon="2.jpg" name="ひさ"]なんと![/speech_bubble]
  •  吹き出しの変更:「type=” ”」の部分を書き換える

 

初期状態では「drop」となっていますが、これを書き換えることで吹き出しの種類を変更することができます。

 

9種類のコードは次のとおりです。

drop初期設定のシンプルな吹き出し
std超シンプルな吹き出し
fbPCのFacebookのメッセージ風の吹き出し
fb-flatスマホのFacebookのメッセージ風の吹き出し
lnLINEのメッセージ風の吹き出し
ln-flatLINEのメッセージ風の吹き出し
pinkピンクの吹き出し
rtail形が特徴的な吹き出し
think考えてる風の吹き出し

 

実際に使ってみるとそれぞれ次のようになります。

 

drop

がく
これまで使っていた吹き出しだね

ひさ
シンプルでいいんじゃないかな

 

std

がく
さらにシンプル!

ひさ
使いやすそうだね

 

fb

がく
Facebookっぽい吹き出しだって!

ひさ
よく知らないけど!

 

fb-flat

がく
こっちもFacebookっぽい吹き出しだって!

ひさ
よく知らないけど!!!

 

ln

がく
LINEだねLINE!

ひさ
これは馴染み深いね~

 

ln-flat

がく
もいっちょLINE!

ひさ
こっちの方がよりLINEっぽい感じ?

 

pink

がく
目がチカチカするほどピンク!

ひさ
おじさん2人の会話の色じゃないねw

 

rtail

がく
シンプルだけど何かが違う?

ひさ
吹き出しの先っぽがクルンッてなってるね

 

think

がく
心の声、聞こえますかー

ひさ
そろそろ帰りたい・・・

 

状況によって使い分けると良さそうですね!

キャラクターの位置と吹き出しの先っぽの種類を変更する方法

[speech_bubble type="drop" subtype="L1" icon="1.jpg" name="がく"]吹き出しの種類は9種類![/speech_bubble]
[speech_bubble type="drop" subtype="R1" icon="2.jpg" name="ひさ"]なんと![/speech_bubble]

キャラクターの位置と吹き出しの先っぽの種類は、「subtype=” ”」の部分を書き換えることで変更できます。

 

次の4パターンです。

L1キャラクターの位置:左
吹き出しの先っぽ:通常
L2キャラクターの位置:左
吹き出しの先っぽ:考える風
R1キャラクターの位置:右
吹き出しの先っぽ:通常
R2キャラクターの位置:右
吹き出しの先っぽ:考える風

 

実際に使ってみるとそれぞれ次のようになります。

 

L1

がく
ちこう寄れ

ひさ
ちこう寄った

 

L2

がく
さてどうしたものか

ひさ
まだ帰っちゃダメなのかな・・・

 

R1

がく
ついて参れ

ひさ
ついて参った

 

R2

がく
zzz・・・

ひさ
寝たし・・・

吹き出しのアイコン画像を変更する方法

吹き出しの会話を使えるようになりましたが、キャラクターのアイコンがこのままだと寂しいですよね・・・。

がく
カエルになりたい・・・

ひさ
ネコになりたい・・・

ってことなので、アイコン画像を好きな画像に変更しましょう!

吹き出し用の画像を用意しよう

アイコンに使いたい画像を用意しましょう。

自分で書いた絵でもいいし、自撮り写真でもOKです!

わたしはブログのロゴを作ったときに利用した「Squarespace Logo」でキャラクターを作ってみました♪

 

Squarespace Logo」の利用方法については次の記事をご覧ください。

ブログタイトルをロゴに変更する方法~「Squarespace Logo」で簡単にロゴ作成♪~
これまで当ブログのヘッダーは「背景画像+文字タイトル」でしたが、ちょっと物足りなくなったのでロゴを作って個性(?)を出してみました! 今回作ったロゴがこれです↓ カエルかわいい! やはりブログタイトルはブログの顔だけあって...

サーバーに吹き出し用の画像をアップロードしよう

利用しているサーバーに画像をアップロードします。

わたしはロリポップを使っているので、ロリポップの場合を例にしてアップロード方法を解説しますが、エックスサーバー 等ほかのサーバーでもやることは同じです。

 

まずロリポップにログインして、メニューの「WEBツール」>「ロリポップ!FTP」をクリック

吹き出しプラグイン『speech bubble』_03

 

すると別窓でFTPの画面が開きますので、次の順でフォルダをもぐっていき、「img」フォルダを探しましょう。

「wp-content」>「plugins」>「speech-bubble」>「img」

 

「img」フォルダに辿り着いたら、「アップロード」のボタンをクリック

吹き出しプラグイン『speech bubble』_04

※最初から2つ画像が入っています。

 

※「アップロード」のボタンを押した際に次の表示が出た場合は、
 クリックをして最新のAdobe Flash Playerをインストールしましょう。

吹き出しプラグイン『speech bubble』_05

 

「ファイルを選択する」をクリックしてアップロードする画像を選択
※アップロードする画像のファイル名は半角英数字であることに注意

吹き出しプラグイン『speech bubble』_06

 

選択した画像がアップロード待機状態になるので、「アップロードする」をクリック

吹き出しプラグイン『speech bubble』_07

 

アップロード完了♪

吹き出しプラグイン『speech bubble』_08

アップロードしたアイコン画像を会話で使ってみよう

わたしはカエルの画像とネコの画像をアップロードしました。

さっそくアイコンとして使ってみます。

 

[speech_bubble type="drop" subtype="L1" icon="1.jpg" name="がく"]カエルになりたい・・・[/speech_bubble]
[speech_bubble type="drop" subtype="R1" icon="2.jpg" name="ひさ"]ネコになりたい・・・[/speech_bubble]

 アイコンの画像は、「icon=” ”」の部分をアップロードした画像のファイル名に書き換えることで変更できます。

わたしがアップロードした画像のファイル名は「icon_kero.jpg」(カエルの画像)と「icon_mii.jpg」(ネコの画像)なので、「icon=”○○”」の「○○」の部分にファイル名を入力します。

 

すると次のようにアイコンの画像をカエルとネコに変更することができました♪

がく
カエルになった!

ひさ
ネコかわいいよネコ

 

さらに吹き出しの種類とセリフを変更すると・・・

がく
これこれ!吹き出しの会話やってみたかったんだよね~
ひさ
お~、いいねぇ~♪

このように、冒頭の会話ができあがります♪

さいごに|Speech bubbleの吹き出し会話は楽しい!

今回は、WordPressの吹き出しプラグイン『Speech bubble』をインストールして、ずっとやりたかった吹き出し会話ができるようになりました!

キャラクターを使った会話を取り入れることで、記事が読みやすくなり、ユーザーの離脱率を下げる効果が期待できます。

 

さらに嬉しいことに、吹き出しの中のセリフは画像ではなくテキストなので、その点でもSEOの効果ありなのです。

がく
何より記事を書くのが楽しくなるよね!
ひさ
んじゃ毎日更新よろしく~♪
がく
う・・・うん?
ひさ
やっと帰れる~

 

 

今回インストールしたSpeechbubbleと一緒に利用すると良いプラグイン『AddQuicktag』のインストール方法や使い方についてはこちらをご覧ください。

作業効率がアップしますよ♪

【使い方を解説】プラグイン『AddQuicktag』でブログ作業効率アップ♪【WordPress】
記事を書く作業効率をアップしてくれるWordPressプラグイン『AddQuicktag』について、インストールの方法から使い方まで解説しています。

コメント