本ページはWordpressのプラグイン「WP-Speech-Balloon」の使い方説明ページです。
基本的に本ページで書いている「ショートコードテンプレート」をコピペして必要な値やテキストを入力するだけでお使いになれます。
※「WP-Speech-Balloonのインストール方法」や「WP-Speech-Balloonのアップデート方法」に付いては以下をご覧下さい。
Contents
吹き出し会話に使う画像の用意
WP-Speech-Balloonでは以下のようなアバター画像が使えます。
吹き出し会話で使いたい画像の準備が出来たら、WordPressの管理画面からでも良いのでアップロードして「画像URL」を保存しておきます。
※後ほど使うのでPCのメモ帳などにコピペしておくと便利です。
画像表示の仕様
WP-Speech-Balloonで使うアバター画像は縦横70px以上の正方形をおすすめします。
これはWP-Speech-Balloon側で画像の表示を縦横70pxに指定する仕様になっているためです。
また、縦横70px以上で縦横比が異なる画像を使った場合は「画像の中央でトリミング」する仕様になっています。
わかりやすい例を挙げると、「全身が写っている縦長の画像」を使った場合はお腹の部分が表示されるイメージです。（わかりにくいかな…）
これは汎用性を考えてこういう仕様にしているので、もし縦横比率が違う画像を使われる場合は「表示したい部分を正方形で切り抜いた画像」を使うようにしてください。
※ファイルの編集はされても結構ですので、変更されたい場合はお好きなように編集してください。
WP-Speech-Balloonのショートコードテンプレート
冒頭でも書きましたが、WP-Speech-Balloonではショートコードテンプレートを使います。
以下は基本となるショートコードテンプレートになりますので、「PCのメモ帳に保存」したり、「ユーザー辞書に登録」しておくと非常に便利です。
再度後述しますが、吹き出しの種類は以下の「1」を変えるだけで簡単に使い分ける事が出来ます。
通常吹き出し（左パターン）
通常吹き出し（右パターン）
説明付きショートコードテンプレート
以下は前述したショートコードテンプレートに説明を入れたものになります。
実際にWP-Speech-Balloonをお使いになられる際は以下の赤文字部分を書き換えるだけで簡単に吹き出し会話をお使い頂けます。
通常吹き出し（左パターン）
通常吹き出し（右パターン）
WP-Speech-Balloonのサンプルイメージとコード
実際にWP-Speech-Balloonを使ったサンプルイメージとコードを記載しておきますので、以下を参考に赤文字部分を書き換えてWordpressの記事内でお使い下さい。
※画像URLは「https://tips4life.me/RAs.jpg」として書いています。
通常吹き出し（左パターン）
らす
サンプルイメージでーす♪
通常吹き出し（右パターン）
サンプルイメージでーす♪
らす
ぽわぽわ吹き出し（左パターン）
らす
サンプルイメージでーす♪
ぽわぽわ吹き出し（右パターン）
サンプルイメージでーす♪
らす
パステル＆ステッチ吹き出し（左パターン）
らす
サンプルイメージでーす♪
パステル＆ステッチ吹き出し（右パターン）
サンプルイメージでーす♪
らす
LINE風吹き出し（左パターン）
らす
サンプルイメージでーす♪
LINE風吹き出し（右パターン）
サンプルイメージでーす♪
らす
Twitter風吹き出し（左パターン）
らす
サンプルイメージでーす♪
Twitter風吹き出し（右パターン）
サンプルイメージでーす♪
らす
【追記】「グレーモード」追加
WP-Speech-Balloon のバージョン2.4 から、吹き出しの色をグレーに出来る「グレーモード」を追加致しました。
このグレーモードは「通常吹き出し」、「ぽわぽわ吹き出し」、「パステル＆ステッチ吹き出し」の左右両方に使えます。
※「LINE風吹き出し」や「Twitter風吹き出し」は元々左パターンがグレー表示である事と、LINE も Twitter も右側がグレーの吹き出しが無い事から実装しておりません。
「グレーモード」の詳細は以下をご覧ください。
まとめ
WordPressで吹き出し会話が出来るプラグイン「WP-Speech-Balloon」は「ショートコードテンプレートのコピペ1回と画像URL、名前、本文」を入れるだけで簡単に使えるプラグインです。
誰でも簡単にお使い頂けるとは思いますが、もし不明点などあれば「お問合わせ」もしくは「Twitter」までご連絡をお願い致します。
内容によっては返信出来兼ねる場合がある事と、返信に恐ろしく時間がかかる場合がありますが可能な限り対応致します。