WordPress で簡単に吹き出し会話が出来るプラグイン、「WP-Speech-Balloon」のバージョン2.4をリリース致しました。
今回はパターン1、パターン2、パターン3の吹き出しを左右それぞれ「グレー」で表示出来る「グレーモード」を追加しました。
AMP の CSS 容量制限があるので元々はこれ以上吹き出しを追加する予定は無かったのですが、有り難い事にご利用頂いている方からご要望を頂きましたので、前回のアップデートで「記事内で使用している吹き出しの CSS だけ出力」するように修正したものを「さらに細かく出し分け」を行い、今回グレーモードを追加実装する事にしました。
他にも一部 WordPress の自動整形による「本来意図しない出力」への対策なども行いましたので、その点も含めアップデートの内容を書いていきます。
「WP-Speech-Balloon」関連の記事は以下をご覧ください。

Contents
「グレーモード」追加
今回のアップデートのメインがこの「グレーモード」です。
実際の所、モードと言えるほどの内容ではありませんが、これは「パターン1」、「パターン2」、「パターン3」の左右両方それぞれ吹き出しの色をグレーにする事が出来るという内容です。
対談形式での吹き出し会話の時など、3人以上での会話の時などに使われると便利かと思います。
「グレーモード」の使い方
グレーモードの使い方はとても簡単で、WP-Speech-Balloon のショートコードテンプレートの最初のショートコードに「_gray」を追加するだけです☆
例えば「通常吹き出しの左パターン」でグレーモードを使う場合は以下のようにします。
[L1_gray_wsbStart][L_wsbAvatar]画像URL[L_wsbName]アバター名[L_wsbText]会話の内容[L_wsbEnd]
上記を元に、残りの必要部分(赤文字部分)を入力したものが以下です。
らす
T4L管理人
グレーモードだよ~☆
「グレーモード」のサンプル
今回グレーモードを実装したのは、冒頭にも書いた通り「パターン1」「パターン2」「パターン3」の3種類になります。
※「LINE風吹き出し」や「Twitter風吹き出し」は元々左パターンがグレー表示である事と、LINE も Twitter も右側がグレーの吹き出しがない事から実装しておりません。
通常吹き出し(左)
らす
T4L管理人
グレーモードだよ~☆
通常吹き出しの
左パターンだよ~♪
【サンプルコード】
[L1_gray_wsbStart][L_wsbAvatar]画像URL[L_wsbName]アバター名[L_wsbText]会話の内容[L_wsbEnd]
通常吹き出し(右)
グレーモードだよ~☆
通常吹き出しの
右パターンだよ~♪
らす
T4L管理人
【サンプルコード】
[R1_gray_wsbStart][R_wsbText]会話の内容[R_wsbAvatar]画像URL[R_wsbName]アバター名[R_wsbEnd]
ぽわぽわ吹き出し(左)
らす
T4L管理人
グレーモードだよ~☆
ぽわぽわ吹き出しの
左パターンだよ~♪
【サンプルコード】
[L2_gray_wsbStart][L_wsbAvatar]画像URL[L_wsbName]アバター名[L_wsbText]会話の内容[L_wsbEnd]
ぽわぽわ吹き出し(右)
グレーモードだよ~☆
ぽわぽわ吹き出しの
右パターンだよ~♪
らす
T4L管理人
【サンプルコード】
[R2_gray_wsbStart][R_wsbText]会話の内容[R_wsbAvatar]画像URL[R_wsbName]アバター名[R_wsbEnd]
パステル&ステッチ吹き出し(左)
らす
T4L管理人
グレーモードだよ~☆
パステル&ステッチ吹き出しの
左パターンだよ~♪
【サンプルコード】
[L3_gray_wsbStart][L_wsbAvatar]画像URL[L_wsbName]アバター名[L_wsbText]会話の内容[L_wsbEnd]
パステル&ステッチ吹き出し(右)
グレーモードだよ~☆
パステル&ステッチ吹き出しの
右パターンだよ~♪
らす
T4L管理人
【サンプルコード】
[R3_gray_wsbStart][R_wsbText]会話の内容[R_wsbAvatar]画像URL[R_wsbName]アバター名[R_wsbEnd]
さらに細かく CSS を出し分け
バージョン2.3 で「AMPページ内で WP-Speech-Balloon が使われていない場合 WP-Speech-Balloon の CSS を出力しない」ようにしてありましたが、今回の バージョン2.4 ではさらに細かく CSS を出し分けるよう修正致しました。
AMP ページの記事内で WP-Speech-Balloon が使われていない場合 WP-Speech-Balloon 用の CSS を出力しないという点は バージョン2.3 と同じですが、本バージョンから「記事内で使用している吹き出しの CSS だけ出力」するようにしました。
例えば、もし記事内で「LINE風吹き出し」の「左パターン」だけ使っている場合、LINE風吹き出しの右パターンも含め「その他の吹き出し用 CSS は出力しない」という事で、これにより、バージョン2.3 までと比べて AMP CSS の容量を大幅に節約出来るようになりました。
WP-Speech-Balloon を使われている方で AMPエラー(CSS容量)が出ている方は、今回のアップデートでかなり削減出来ると思います。
WordPress の自動整形を回避
WordPress の「自動整形機能」そのものについては過去何度も書いているので割愛させて頂きますが、この自動整形によって生成される「ショートコードを囲う Pタグ」や「意図しない改行タグ」、記述のしかたによりますが「吹き出し内に生成される空の Pタグ」を回避するよう修正致しました。
また、一般的に「wpautop」などで制御する事が多いのですが、今回は適用範囲を「WP-Speech-Balloon の部分だけ」となるようにしているので、基本的に他の部分に影響を与える事はないと思います。
これにより、意図しない上下のスペースやデザイン崩れなどを回避出来るようになりました。
※連続改行(<br><br>など)が「</p><p>」に自動整形される件については、そもそも連続改行自体が非推奨なので対応させていません。
プラグインのアップデート方法
WP-Speech-Balloon のアップデート方法に付きましては以下をご覧下さい。

WP-Speech-Balloon の最新版ファイルは以下からダウンロード出来ます。
※初めてお使いになる方も以下をご覧ください。
※「WP-Speech-Balloon1.x」からお使いの方は、最新版の「WP-Speech-Balloon_bundle」をお使い下さい。

まとめ
2月に記事を投稿して以来、実に2ヶ月近く記事すら書けていませんでしたが、今回 WP-Speech-Balloon をアップデート出来て良かったです。
グレーモード自体は、使う場面や好みなどが別れたりするかもしれませんが、AMP CSS の出し分け自体は WP-Speech-Balloon を使われている方全て対象ですので、是非アップデートしてお使い下さい☆
バグのご報告やご要望、ご質問などありましたら「お問合わせ」もしくは「Twitter」までご連絡をお願い致します。
この記事が気に入ったら
いいね ! しよう
ディスカッションコーナー コメントやご質問、その他この記事に関する事はこちらからどうぞ☆