Ryouji Mineya

Hinagata Speech Balloon is a WordPress plugin that adds a flexible speech balloon block to the Gutenberg editor. 
It is designed to let you manage “Presets” for your balloons, so you can easily reuse the same character or style across your site.
Features 
* Preset Management: create up to 20 balloon presets. 
* Highly Customizable: Set avatar images, names, colors, shapes (circle/square/rounded), border styles, and more. 
* Block Editor Integration: Select a preset from the block settings dropdown. 
* Dynamic Template: Advanced users can edit the HTML output structure in the settings. 
* Import/Export: Easy JSON export for backup or migration.
<h3>Development</h3>
This plugin uses npm and webpack to bundle JavaScript and CSS files. 
The source code is located in the <code>src</code> directory.
To install dependencies: 
 npm install
To build the project: 
 npm run build
To start development mode (watch): 
 npm start
To create a release zip: 
 npm run plugin-zip

Hinagata Speech Balloon

Adds a highly customizable "Speech Balloon" block to the WordPress editor. Allows creating presets with avatars and inserting them as blocks.

RA's_Tips4Life

吹き出し会話を使いたい場所に「テンプレートコード」を貼り付けて、必要箇所に「画像URL」「アバターの名前」「文章」を書くだけで吹き出し会話が表示されます。 
吹き出しの種類は現在「左右各5種類ずつ」あります。 
吹き出しの種類を変更する方法もとても簡単で、「テンプレートコードの数字」を変えるだけで簡単に変更する事ができます。
First, paste 「Template Code」 where you want to use a speech balloon. And just write 「Image URL」「Name of Avatar」「Text」 in the required place, speech balloon will be displayed. 
Currently, there are 5 types of “pattern of speech balloon” left and right. 
The way to change the “pattern of speech balloon” is also very easy, just change the number of the 「Template Code」.
<h3>Notice</h3>
<ul>
<li>このプラグインは “ob_start()” や “ob_end_flush()” を使用しているため、このプラグインを使用するとサーバーベースのキャッシュサービスと競合する可能性があり、それらのサーバーでの使用をサポートすることはできません。。</li>
<li>This plugin uses “ob_start()” and “ob_end_flush()”. So use of this plugin may conflict with server based cache services, and cannot support it’s use on those servers.</li>
</ul>
<h3>WP-Speech-Balloon 2.4 の使い方</h3>
【テンプレート】 
——————————▽ 
・通常吹き出し(左パターン) 
[L1_wsbStart][L_wsbAvatar][L_wsbName][L_wsbText][L_wsbEnd]
・通常吹き出し(左パターン グレー) 
[L1_gray_wsbStart][L_wsbAvatar][L_wsbName][L_wsbText][L_wsbEnd]
・通常吹き出し(右パターン) 
[R1_wsbStart][R_wsbText][R_wsbAvatar][R_wsbName][R_wsbEnd]
・通常吹き出し(右パターン グレー) 
[R1_gray_wsbStart][R_wsbText][R_wsbAvatar][R_wsbName][R_wsbEnd]
・ぽわぽわ吹き出し(左パターン) 
[L2_wsbStart][L_wsbAvatar][L_wsbName][L_wsbText][L_wsbEnd]
・ぽわぽわ吹き出し(左パターン グレー) 
[L2_gray_wsbStart][L_wsbAvatar][L_wsbName][L_wsbText][L_wsbEnd]
・ぽわぽわ吹き出し(右パターン) 
[R2_wsbStart][R_wsbText][R_wsbAvatar][R_wsbName][R_wsbEnd]
・ぽわぽわ吹き出し(右パターン グレー) 
[R2_gray_wsbStart][R_wsbText][R_wsbAvatar][R_wsbName][R_wsbEnd]
・パステル&ステッチ吹き出し(左パターン) 
[L3_wsbStart][L_wsbAvatar][L_wsbName][L_wsbText][L_wsbEnd]
・パステル&ステッチ吹き出し(左パターン グレー) 
[L3_gray_wsbStart][L_wsbAvatar][L_wsbName][L_wsbText][L_wsbEnd]
・パステル&ステッチ吹き出し(右パターン) 
[R3_wsbStart][R_wsbText][R_wsbAvatar][R_wsbName][R_wsbEnd]
・パステル&ステッチ吹き出し(右パターン グレー) 
[R3_gray_wsbStart][R_wsbText][R_wsbAvatar][R_wsbName][R_wsbEnd]
・LINE風吹き出し(左パターン) 
[L4_wsbStart][L_wsbAvatar][L_wsbName][L_wsbText][L_wsbEnd]
・LINE風吹き出し(右パターン) 
[R4_wsbStart][R_wsbText][R_wsbAvatar][R_wsbName][R_wsbEnd]
・Twitter風吹き出し(左パターン) 
[L5_wsbStart][L_wsbAvatar][L_wsbName][L_wsbText][L_wsbEnd]
・Twitter風吹き出し(右パターン) 
[R5_wsbStart][R_wsbText][R_wsbAvatar][R_wsbName][R_wsbEnd] 
——————————▲
【使い方】※「画像URL」、「アバターの名前」、「会話の内容」を書き換えて使います。 
——————————▽ 
・通常吹き出し(左パターン) 
[L1_wsbStart][L_wsbAvatar]画像URL[L_wsbName]表示する名前[L_wsbText]会話の内容[L_wsbEnd]
・通常吹き出し(右パターン) 
[R1_wsbStart][R_wsbText]会話の内容[R_wsbAvatar]画像URL[R_wsbName]表示する名前[R_wsbEnd]
・ぽわぽわ吹き出し(左パターン) 
[L2_wsbStart][L_wsbAvatar]画像URL[L_wsbName]表示する名前[L_wsbText]会話の内容[L_wsbEnd]
・ぽわぽわ吹き出し(右パターン) 
[R2_wsbStart][R_wsbText]会話の内容[R_wsbAvatar]画像URL[R_wsbName]表示する名前[R_wsbEnd]
・パステル&ステッチ吹き出し(左パターン) 
[L3_wsbStart][L_wsbAvatar]画像URL[L_wsbName]表示する名前[L_wsbText]会話の内容[L_wsbEnd]
・パステル&ステッチ吹き出し(右パターン) 
[R3_wsbStart][R_wsbText]会話の内容[R_wsbAvatar]画像URL[R_wsbName]表示する名前[R_wsbEnd]
・LINE風吹き出し(左パターン) 
[L4_wsbStart][L_wsbAvatar]画像URL[L_wsbName]表示する名前[L_wsbText]会話の内容[L_wsbEnd]
・LINE風吹き出し(右パターン) 
[R4_wsbStart][R_wsbText]会話の内容[R_wsbAvatar]画像URL[R_wsbName]表示する名前[R_wsbEnd]
・Twitter風吹き出し(左パターン) 
[L5_wsbStart][L_wsbAvatar]画像URL[L_wsbName]表示する名前[L_wsbText]会話の内容[L_wsbEnd]
・Twitter風吹き出し(右パターン) 
[R5_wsbStart][R_wsbText]会話の内容[R_wsbAvatar]画像URL[R_wsbName]表示する名前[R_wsbEnd]
※グレーモードは[○○_wsbStart]の部分を[○○_gray_wsbStart]に変えるとグレーモードをお使い頂けます。 
※「LINE風吹き出し」や「Twitter風吹き出し」にグレーモードはありません。 
——————————▲
使い方などの詳細は以下のページをご覧ください。
「WP-Speech-Balloon」の使い方 
https://tips4life.me/wp-speech-balloon-how-to-use
「WP-Speech-Balloon」のインストール方法 
https://tips4life.me/wp-speech-balloon-install
「WP-Speech-Balloon」のアップデート方法 
https://tips4life.me/wp-speech-balloon-update
▽ 更新履歴はこちら ▽
https://tips4life.me/tag/wp-speech-balloon

WP-Speech-Balloon

WordPress の記事内で簡単に吹き出し会話を使えるプラグインです。AMPページでも通常ページと同じように吹き出し会話を使えます。 This is a plugin that makes it easy to use balloon conversation with WordPress.

Hinagata Speech Balloon vs WP-Speech-Balloon