Speech bubble (ふきだしプラグイン)が、めっちゃ面白い

Peggy_Marco / Pixabay

ワードプレスで会話調の表示ができるプラグイン、Speech bubble (ふきだしプラグイン)が、使ってみると結構面白いので、ちょっとはまっている。

普通に2名とかの会話が、吹き出しで表示されるので、説明書きなどで使うと視覚的な効果もあってとてもよいと思います。

プラグインインストール

インストールと有効化は、普通の通りです。
Speech bubble でプラグイン検索かけて、インストールと有効化をします。

プラグイン使用方法

[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]
[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]

こんな感じである。
typeで形等を指定,subtypeで方向を指定,iconでアイコン指定,nameで表示する名前を指定します。

プラグイン使用方法:typeの違い

drop, std, fb(FaceBook風), fb-flat, ln(LINE風), ln-flat, pink, rtail, think と各タイプがあります。

drop

[speech_bubble type=”drop” subtype=”L1″ icon=”2.jpg” name=”A さん”] dropです [/speech_bubble]

std

[speech_bubble type=”std” subtype=”R1″ icon=”2.jpg” name=”B さん”] stdです [/speech_bubble]

fb

[speech_bubble type=”fb” subtype=”L1″ icon=”2.jpg” name=”A さん”] fbです [/speech_bubble]

fb-flat

[speech_bubble type=”fb-flat” subtype=”R1″ icon=”2.jpg” name=”B さん”] fb-flatです [/speech_bubble]

ln(LINE風)

[speech_bubble type=”ln” subtype=”L1″ icon=”2.jpg” name=”Aさん”] lnです [/speech_bubble]

バグ修正:speech-bubble/css/sb-type-ln.css 216行目あたり、speech-bubble/css/sb-type-ln.css
background-color: #FCFCFC; => #bbff77 にします。

ln-flat

[speech_bubble type=”ln-flat” subtype=”R1″ icon=”2.jpg” name=”B さん”] ln-flatです [/speech_bubble]

pink

[speech_bubble type=”pink” subtype=”L1″ icon=”2.jpg” name=”Aさん”] pinkです [/speech_bubble]

rtail

[speech_bubble type=”rtail” subtype=”R1″ icon=”2.jpg” name=”B さん”] rtailです [/speech_bubble]

think

[speech_bubble type=”think” subtype=”L1″ icon=”2.jpg” name=”Aさん”] thinkです [/speech_bubble]

プラグイン使用方法:subtypeの違い

L1

[speech_bubble type=”drop” subtype=”L1″ icon=”1.jpg” name=”L1さん”] L1です [/speech_bubble]

R1

[speech_bubble type=”drop” subtype=”R1″ icon=”1.jpg” name=”R1さん”] R1です [/speech_bubble]

L2

[speech_bubble type=”drop” subtype=”L2″ icon=”1.jpg” name=”L2さん”] L2です [/speech_bubble]

R2

[speech_bubble type=”drop” subtype=”R2″ icon=”1.jpg” name=”R2さん”] R2です [/speech_bubble]

プラグイン使用方法:subtypeの違いアイコンの変更方法

正式な方法

\wp-content\plugins\speech-bubble\img\ の中に、アイコンをFTPでアップロードして、画像を使用

その他の方法

通常にアップロードした、画像のURL指定をする場合
プラグイン編集で、speech-bubble/classes/SnbSpeechBubble.php を編集します。

115行目 $sb_icon_path = plugins_url( self::PLUGIN_FOLDER_PATH_IMG . $user_icon );
これを、下記のような、ダイレクトURL指定に変更します。
$sb_icon_path = $user_icon ;

以上お愉しみください。

作者さんのページはこちら
http://www.arisoude-nakatta.com/