【WP-Speech-Balloon_2.4】リリース！グレーモード追加☆

「WP-Speech-Balloon」関連の記事は以下をご覧ください。

WP-Speech-Balloon

「WP-Speech-Balloon」の記事一覧です。

tips4life.me

「グレーモード」追加

今回のアップデートのメインがこの「グレーモード」です。

実際の所、モードと言えるほどの内容ではありませんが、これは「パターン1」、「パターン2」、「パターン3」の左右両方それぞれ吹き出しの色をグレーにする事が出来るという内容です。

対談形式での吹き出し会話の時など、3人以上での会話の時などに使われると便利かと思います。

「グレーモード」の使い方

グレーモードの使い方はとても簡単で、WP-Speech-Balloon のショートコードテンプレートの最初のショートコードに「_gray」を追加するだけです☆

例えば「通常吹き出しの左パターン」でグレーモードを使う場合は以下のようにします。

[L1_gray_wsbStart][L_wsbAvatar]画像URL[L_wsbName]アバター名[L_wsbText]会話の内容[L_wsbEnd]

上記を元に、残りの必要部分（赤文字部分）を入力したものが以下です。

「グレーモード」のサンプル

今回グレーモードを実装したのは、冒頭にも書いた通り「パターン1」「パターン2」「パターン3」の3種類になります。

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

通常吹き出し（左）

【サンプルコード】

[L1_gray_wsbStart][L_wsbAvatar]画像URL[L_wsbName]アバター名[L_wsbText]会話の内容[L_wsbEnd]

通常吹き出し（右）

【サンプルコード】

[R1_gray_wsbStart][R_wsbText]会話の内容[R_wsbAvatar]画像URL[R_wsbName]アバター名[R_wsbEnd]

ぽわぽわ吹き出し（左）

【サンプルコード】

[L2_gray_wsbStart][L_wsbAvatar]画像URL[L_wsbName]アバター名[L_wsbText]会話の内容[L_wsbEnd]

ぽわぽわ吹き出し（右）

【サンプルコード】

[R2_gray_wsbStart][R_wsbText]会話の内容[R_wsbAvatar]画像URL[R_wsbName]アバター名[R_wsbEnd]

パステル&ステッチ吹き出し（左）

【サンプルコード】

[L3_gray_wsbStart][L_wsbAvatar]画像URL[L_wsbName]アバター名[L_wsbText]会話の内容[L_wsbEnd]

パステル&ステッチ吹き出し（右）

【サンプルコード】

[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」のアップデート方法

本ページはWordpressのプラグイン「WP-Speech-Balloon」のアップデート方法の説明ページです。 Wordpressの管理画面からプラグインをアップデートする方法と、FTPソフト（Filezillaなど）を...

tips4life.me

2018.03.26

WP-Speech-Balloon の最新版ファイルは以下からダウンロード出来ます。

※初めてお使いになる方も以下をご覧ください。

※「WP-Speech-Balloon1.x」からお使いの方は、最新版の「WP-Speech-Balloon_bundle」をお使い下さい。

「WP-Speech-Balloon」のインストール方法

本ページはWordpressのプラグイン「WP-Speech-Balloon」のインストール方法の説明ページです。 本ページに書いてある通りに進めるだけで簡単にインストール出来ると思います。 ※「WP-Speech-Ba...

tips4life.me

2018.03.08

まとめ

2月に記事を投稿して以来、実に2ヶ月近く記事すら書けていませんでしたが、今回 WP-Speech-Balloon をアップデート出来て良かったです。

グレーモード自体は、使う場面や好みなどが別れたりするかもしれませんが、AMP CSS の出し分け自体は WP-Speech-Balloon を使われている方全て対象ですので、是非アップデートしてお使い下さい☆

バグのご報告やご要望、ご質問などありましたら「お問合わせ」もしくは「Twitter」までご連絡をお願い致します。