サイトメンテナンスをしているので一時的に表示が崩れる場合があります。何卒ご理解頂けますようお願い申し上げます。

「WP-Speech-Balloon」の使い方

吹き出し会話に使う画像の用意

WP-Speech-Balloonでは以下のようなアバター画像が使えます。

RAsプロフ画像

吹き出し会話で使いたい画像の準備が出来たら、WordPressの管理画面からでも良いのでアップロードして「画像URL」を保存しておきます。

※後ほど使うのでPCのメモ帳などにコピペしておくと便利です。

画像表示の仕様

WP-Speech-Balloonで使うアバター画像は縦横70px以上の正方形をおすすめします。

これはWP-Speech-Balloon側で画像の表示を縦横70pxに指定する仕様になっているためです。

また、縦横70px以上で縦横比が異なる画像を使った場合は「画像の中央でトリミング」する仕様になっています。

わかりやすい例を挙げると、「全身が写っている縦長の画像」を使った場合はお腹の部分が表示されるイメージです。(わかりにくいかな…)

これは汎用性を考えてこういう仕様にしているので、もし縦横比率が違う画像を使われる場合は「表示したい部分を正方形で切り抜いた画像」を使うようにしてください。

※ファイルの編集はされても結構ですので、変更されたい場合はお好きなように編集してください。

WP-Speech-Balloonのショートコードテンプレート

冒頭でも書きましたが、WP-Speech-Balloonではショートコードテンプレートを使います。

以下は基本となるショートコードテンプレートになりますので、「PCのメモ帳に保存」したり、「ユーザー辞書に登録」しておくと非常に便利です。

再度後述しますが、吹き出しの種類は以下の「1」を変えるだけで簡単に使い分ける事が出来ます。


通常吹き出し(左パターン)

[L1_wsbStart][L_wsbAvatar][L_wsbName][L_wsbText][L_wsbEnd]

通常吹き出し(右パターン)

[R1_wsbStart][R_wsbText][R_wsbAvatar][R_wsbName][R_wsbEnd]

説明付きショートコードテンプレート

以下は前述したショートコードテンプレートに説明を入れたものになります。

実際にWP-Speech-Balloonをお使いになられる際は以下の赤文字部分を書き換えるだけで簡単に吹き出し会話をお使い頂けます。


通常吹き出し(左パターン)

[L1_wsbStart][L_wsbAvatar]アバター画像URL[L_wsbName]アバターの名前[L_wsbText]吹き出し会話の内容[L_wsbEnd]

通常吹き出し(右パターン)

[R1_wsbStart][R_wsbText]吹き出し会話の内容[R_wsbAvatar]アバター画像URL[R_wsbName]アバターの名前[R_wsbEnd]

WP-Speech-Balloonのサンプルイメージとコード

実際にWP-Speech-Balloonを使ったサンプルイメージとコードを記載しておきますので、以下を参考に赤文字部分を書き換えてWordpressの記事内でお使い下さい。

※画像URLは「https://tips4life.me/RAs.jpg」として書いています。


通常吹き出し(左パターン)

avatar

らす

サンプルイメージでーす♪

[L1_wsbStart][L_wsbAvatar]https://tips4life.me/RAs.jpg[L_wsbName]らす[L_wsbText]サンプルイメージでーす♪[L_wsbEnd]

通常吹き出し(右パターン)

サンプルイメージでーす♪

avatar

らす

[R1_wsbStart][R_wsbText]サンプルイメージでーす♪[R_wsbAvatar]https://tips4life.me/RAs.jpg[R_wsbName]らす[R_wsbEnd]

ぽわぽわ吹き出し(左パターン)

avatar

らす

サンプルイメージでーす♪

[L2_wsbStart][L_wsbAvatar]https://tips4life.me/RAs.jpg[L_wsbName]らす[L_wsbText]サンプルイメージでーす♪[L_wsbEnd]

ぽわぽわ吹き出し(右パターン)

サンプルイメージでーす♪

avatar

らす

[R2_wsbStart][R_wsbText]サンプルイメージでーす♪[R_wsbAvatar]https://tips4life.me/RAs.jpg[R_wsbName]らす[R_wsbEnd]

パステル&ステッチ吹き出し(左パターン)

avatar

らす

サンプルイメージでーす♪

[L3_wsbStart][L_wsbAvatar]https://tips4life.me/RAs.jpg[L_wsbName]らす[L_wsbText]サンプルイメージでーす♪[L_wsbEnd]

パステル&ステッチ吹き出し(右パターン)

サンプルイメージでーす♪

avatar

らす

[R3_wsbStart][R_wsbText]サンプルイメージでーす♪[R_wsbAvatar]https://tips4life.me/RAs.jpg[R_wsbName]らす[R_wsbEnd]

LINE風吹き出し(左パターン)

avatar

らす

サンプルイメージでーす♪

[L4_wsbStart][L_wsbAvatar]https://tips4life.me/RAs.jpg[L_wsbName]らす[L_wsbText]サンプルイメージでーす♪[L_wsbEnd]

LINE風吹き出し(右パターン)

サンプルイメージでーす♪

avatar

らす

[R4_wsbStart][R_wsbText]サンプルイメージでーす♪[R_wsbAvatar]https://tips4life.me/RAs.jpg[R_wsbName]らす[R_wsbEnd]

Twitter風吹き出し(左パターン)

avatar

らす

サンプルイメージでーす♪

[L5_wsbStart][L_wsbAvatar]https://tips4life.me/RAs.jpg[L_wsbName]らす[L_wsbText]サンプルイメージでーす♪[L_wsbEnd]

Twitter風吹き出し(右パターン)

サンプルイメージでーす♪

avatar

らす

[R5_wsbStart][R_wsbText]サンプルイメージでーす♪[R_wsbAvatar]https://tips4life.me/RAs.jpg[R_wsbName]らす[R_wsbEnd]

まとめ

WordPressで吹き出し会話が出来るプラグイン「WP-Speech-Balloon」「ショートコードテンプレートのコピペ1回と画像URL、名前、本文」を入れるだけで簡単に使えるプラグインです。

誰でも簡単にお使い頂けるとは思いますが、もし不明点などあれば「お問合わせ」もしくは「Twitter」までご連絡をお願い致します。

内容によっては返信出来兼ねる場合がある事と、返信に恐ろしく時間がかかる場合がありますが可能な限り対応致します。

シェアして頂けると喜びます☆

この記事が気に入ったら
いいね ! しよう

Top