Peggy_Marco / Pixabay

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

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

プラグインインストール

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

プラグイン使用方法

A さん
おこんばんわ
B さん
おばんです

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

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

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

drop

A さん
dropです

std

B さん
stdです

fb

A さん
fbです

fb-flat

B さん
fb-flatです

ln(LINE風)

Aさん
lnです

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

ln-flat

B さん
ln-flatです

pink

Aさん
pinkです

rtail

B さん
rtailです

think

Aさん
thinkです

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

L1

L1さん
L1です

R1

R1さん
R1です

L2

L2さん
L2です

R2

R2さん
R2です

プラグイン使用方法: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/