「WP-Speech-Balloon」の使い方

「WP-Speech-Balloon」の使い方

本ページはWordpressのプラグイン「WP-Speech-Balloon」の使い方説明ページです。

基本的に本ページで書いている「ショートコードテンプレート」をコピペして必要な値やテキストを入力するだけでお使いになれます。

「WP-Speech-Balloonのインストール方法」「WP-Speech-Balloonのアップデート方法」に付いては以下をご覧下さい。

「WP-Speech-Balloon」のインストール方法
本ページはWordpressのプラグイン「WP-Speech-Balloon」のインストール方法の説明ページです。 本ページに書いてある通りに進めるだけで簡単にインストール出来ると思います。 ※「WP-Speech-Ba...
「WP-Speech-Balloon」のアップデート方法
本ページはWordpressのプラグイン「WP-Speech-Balloon」のアップデート方法の説明ページです。 Wordpressの管理画面からプラグインをアップデートする方法と、FTPソフト(Filezillaなど)を...

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

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]

【追記】「グレーモード」追加

WP-Speech-Balloon のバージョン2.4 から、吹き出しの色をグレーに出来る「グレーモード」を追加致しました。

このグレーモードは「通常吹き出し」、「ぽわぽわ吹き出し」、「パステル&ステッチ吹き出し」の左右両方に使えます。

※「LINE風吹き出し」や「Twitter風吹き出し」は元々左パターンがグレー表示である事と、LINE も Twitter も右側がグレーの吹き出しが無い事から実装しておりません。

「グレーモード」の詳細は以下をご覧ください。

【WP-Speech-Balloon_2.4】リリース!グレーモード追加☆
Wordpress で簡単に吹き出し会話が出来るプラグイン、「WP-Speech-Balloon」のバージョン2.4をリリース致しました。 今回はパターン1、パターン2、パターン3の吹き出しを左右それぞれ「グレー」で表示出来...

まとめ

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

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

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

Top