WordPress（ワードプレス）プラグイン「Speech bubble」で漫画のような吹き出し設定手順

町中華に行くと瓶ビールの在庫がなくなるまで飲んでしまう

お酒には飲まれる派

管理人クー（@SurvivorCherry）です。

現テーマ「cocoon」には常備されている為、使わなくなりましたが
どんなテーマにも対応する吹き出しプラグイン「Speech bubble」には
大変お世話になりましたのでリライト後もこの記事では当時の吹き出しをそのまま使用しています。

現在ではこうなっています↓。

キングクー

呼んだかい⁇

それでは「Speech bubble」のご紹介です。

[speech_bubble type=”ln” subtype=”L1″ icon=”nigaoemaker.png” name=”クー”] 吹き出しが簡単に作れるSpeech bubble[/speech_bubble]

ブログをスタートして2週間ほど経ちました。
勉強することが沢山あり
出来なかった事が出来るようになってくるとブログ運営も楽しくなってきます。
やればやるほど
「他の人がやってるあの作りはどうやるんだ??」
なんて疑問が沢山湧いてくるんです。

その中でも僕が一番実装したかった機能。

[speech_bubble type=”ln” subtype=”L1″ icon=”nigaoemaker.png” name=”クー”] これです[/speech_bubble]

今日初めて実装できたので
嬉しくて二日酔いも吹っ飛びました。

やれば出来る。

せっかくなので僕が用いたやり方をどうぞ！

Speech bubble　導入

まずはプラグインである
Speech bubbleをインストールするために

WordPress管理画面>プラグイン>新規追加

と進んでください。

検索窓で「Speech bubble」と入力して、検索すると出てきます。

インストールが完了したら、そのまま「有効化」のボタンを押しましょう。

これでSpeech bubbleは有効化され、下準備が整いました。
ここからが本番。
キャラクター設定などはここからやっていきますよ！

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

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

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

クーのセリフは上記コードの
］調子どうだーい！［

の部分を変えればOK。
同じくキーコのセリフは

］うぇーい！［
の部分を変えればOK。

キャラの名前も「クー」「キーコ」になってるけど、これも↑のコードの【name=”クー”】のところ、「クー」「キーコ」を変更すれば自由に設定できますよ。

吹き出しの種類

吹き出し用の9種類のコードがあります。

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

これのどれかを選び変えていきます。

[speech_bubble type=”drop” subtype=”L1″ icon=”nigaoemaker.png” name=”クー”] 僕はdrop [/speech_bubble]

[speech_bubble type=”std” subtype=”R1″ icon=”kiko.png” name=”キーコ”] アタイはstd！[/speech_bubble]

このように中の文字を変えるだけで変化します。

人物の向きと、吹き出しのしっぽの種類の変更方法

キャラを左に置くか、右に置くかは【subtype=”　”】の部分で変更します。

また、吹き出しのしっぽも同じく【subtype=”　”】の部分で変更します。
L1⇒人物が左側に配置、吹き出しのしっぽは「話す」感じになる
[speech_bubble type=”std” subtype=”L1″ icon=”nigaoemaker.png” name=”クー”] 最近L1にしたんだー[/speech_bubble]

[speech_bubble type=”std” subtype=”L1″ icon=”kiko.png” name=”キーコ”] 店長とてもお似合いですよ！[/speech_bubble]
L2⇒人物が左側に配置、吹き出しのしっぽは「考える」感じになる
[speech_bubble type=”std” subtype=”L2″ icon=”nigaoemaker.png” name=”クー”] L2にしたの気付いてくれたかな [/speech_bubble]

[speech_bubble type=”std” subtype=”L2″ icon=”kiko.png” name=”キーコ”] 察しろオーラ半端ねーな[/speech_bubble]

R1⇒人物が右側に配置、吹き出しのしっぽは「話す」感じになる
[speech_bubble type=”std” subtype=”R1″ icon=”nigaoemaker.png” name=”クー”] R1って乳酸菌みたいだよね〜 [/speech_bubble]

[speech_bubble type=”std” subtype=”R1″ icon=”kiko.png” name=”キーコ”] なんだか健康に良さそうですね〜[/speech_bubble]
R2⇒人物が右側に配置、吹き出しのしっぽは「考える」感じになる
[speech_bubble type=”std” subtype=”R2″ icon=”nigaoemaker.png” name=”クー”] 早く家帰ってゼルダやりたいな〜[/speech_bubble]

[speech_bubble type=”std” subtype=”R2″ icon=”kiko.png” name=”キーコ”] 彼氏と待ち合わせなのに今日も残業かよ[/speech_bubble]

アイコン画像の変更方法

最後に画像を変更していきます。

まずは使用しているサーバーのWordPressのフォルダの中の「speech-bubble」の中の「img」フォルダを探します。

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

使用したいアイコン画像（jpg, png, gif, svg, tif）を、そのimgフォルダ内にアップロードします。

(ファイル名は半角英数字を使ってください）

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

これで全て完了です！

最初はチンプンカンプンでしたが慣れれば簡単ですよ！

僕も今書きながらなれました！

ちなみに僕が使用しているサーバーはエックスサーバー！！

本日も最後まで読んでくださり、ありがとうございました。