吹き出し（1/1）
ブロックの設定を比較するサンプルです。各例の直前に変更設定と値を記載しています。
画像等は同梱素材を使用します。コピー用コードと書かれた例は、説明に従って必要なデータ・編集場所を用意してください。
sample-00115 / cocoon-blocks/balloon-box 基本形【コピー用コード】
最初期の吹き出しはサイトの吹き出し設定を保存時に参照します。実サイトの設定を選択して確認してください。
<!-- wp:cocoon-blocks/balloon-box {"content":"サンプルの文章"} -->
<div class="wp-block-cocoon-blocks-balloon-box speech-wrap sb-id-1 sbs-stn sbp-l sbis-undefined cf block-box"><div class="speech-person"><figure class="speech-icon"><img src="https://balthasar.xsrv.jp/wp-content/themes/cocoon-master/images/man.png" alt="" class="speech-icon-image"/></figure><div class="speech-name">サンプルの文章</div></div><div class="speech-balloon"><!-- wp:paragraph -->
<p>春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cocoon-blocks/balloon-box -->sample-00116 / cocoon-blocks/balloon-box content：content="短いサンプル"【コピー用コード】
最初期の吹き出しはサイトの吹き出し設定を保存時に参照します。実サイトの設定を選択して確認してください。
<!-- wp:cocoon-blocks/balloon-box {"content":"短いサンプル"} -->
<div class="wp-block-cocoon-blocks-balloon-box speech-wrap sb-id-1 sbs-stn sbp-l sbis-undefined cf block-box"><div class="speech-person"><figure class="speech-icon"><img src="https://balthasar.xsrv.jp/wp-content/themes/cocoon-master/images/man.png" alt="" class="speech-icon-image"/></figure><div class="speech-name">短いサンプル</div></div><div class="speech-balloon"><!-- wp:paragraph -->
<p>春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cocoon-blocks/balloon-box -->sample-00117 / cocoon-blocks/balloon-box content：content="春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。"【コピー用コード】
最初期の吹き出しはサイトの吹き出し設定を保存時に参照します。実サイトの設定を選択して確認してください。
<!-- wp:cocoon-blocks/balloon-box {"content":"春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。"} -->
<div class="wp-block-cocoon-blocks-balloon-box speech-wrap sb-id-1 sbs-stn sbp-l sbis-undefined cf block-box"><div class="speech-person"><figure class="speech-icon"><img src="https://balthasar.xsrv.jp/wp-content/themes/cocoon-master/images/man.png" alt="" class="speech-icon-image"/></figure><div class="speech-name">春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。</div></div><div class="speech-balloon"><!-- wp:paragraph -->
<p>春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cocoon-blocks/balloon-box -->sample-00118 / cocoon-blocks/balloon-box lock：lock={"move":false,"remove":false}【コピー用コード】
最初期の吹き出しはサイトの吹き出し設定を保存時に参照します。実サイトの設定を選択して確認してください。
<!-- wp:cocoon-blocks/balloon-box {"content":"サンプルの文章","lock":{"move":false,"remove":false}} -->
<div class="wp-block-cocoon-blocks-balloon-box speech-wrap sb-id-1 sbs-stn sbp-l sbis-undefined cf block-box"><div class="speech-person"><figure class="speech-icon"><img src="https://balthasar.xsrv.jp/wp-content/themes/cocoon-master/images/man.png" alt="" class="speech-icon-image"/></figure><div class="speech-name">サンプルの文章</div></div><div class="speech-balloon"><!-- wp:paragraph -->
<p>春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cocoon-blocks/balloon-box -->sample-00119 / cocoon-blocks/balloon-box lock：lock={"move":true,"remove":false}【コピー用コード】
最初期の吹き出しはサイトの吹き出し設定を保存時に参照します。実サイトの設定を選択して確認してください。
<!-- wp:cocoon-blocks/balloon-box {"content":"サンプルの文章","lock":{"move":true,"remove":false}} -->
<div class="wp-block-cocoon-blocks-balloon-box speech-wrap sb-id-1 sbs-stn sbp-l sbis-undefined cf block-box"><div class="speech-person"><figure class="speech-icon"><img src="https://balthasar.xsrv.jp/wp-content/themes/cocoon-master/images/man.png" alt="" class="speech-icon-image"/></figure><div class="speech-name">サンプルの文章</div></div><div class="speech-balloon"><!-- wp:paragraph -->
<p>春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cocoon-blocks/balloon-box -->sample-00120 / cocoon-blocks/balloon-box lock：lock={"move":false,"remove":true}【コピー用コード】
最初期の吹き出しはサイトの吹き出し設定を保存時に参照します。実サイトの設定を選択して確認してください。
<!-- wp:cocoon-blocks/balloon-box {"content":"サンプルの文章","lock":{"move":false,"remove":true}} -->
<div class="wp-block-cocoon-blocks-balloon-box speech-wrap sb-id-1 sbs-stn sbp-l sbis-undefined cf block-box"><div class="speech-person"><figure class="speech-icon"><img src="https://balthasar.xsrv.jp/wp-content/themes/cocoon-master/images/man.png" alt="" class="speech-icon-image"/></figure><div class="speech-name">サンプルの文章</div></div><div class="speech-balloon"><!-- wp:paragraph -->
<p>春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cocoon-blocks/balloon-box -->sample-00121 / cocoon-blocks/balloon-box lock：lock={"move":true,"remove":true}【コピー用コード】
最初期の吹き出しはサイトの吹き出し設定を保存時に参照します。実サイトの設定を選択して確認してください。
<!-- wp:cocoon-blocks/balloon-box {"content":"サンプルの文章","lock":{"move":true,"remove":true}} -->
<div class="wp-block-cocoon-blocks-balloon-box speech-wrap sb-id-1 sbs-stn sbp-l sbis-undefined cf block-box"><div class="speech-person"><figure class="speech-icon"><img src="https://balthasar.xsrv.jp/wp-content/themes/cocoon-master/images/man.png" alt="" class="speech-icon-image"/></figure><div class="speech-name">サンプルの文章</div></div><div class="speech-balloon"><!-- wp:paragraph -->
<p>春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cocoon-blocks/balloon-box -->sample-00122 / cocoon-blocks/balloon-box className：className="block-gallery-example"【コピー用コード】
最初期の吹き出しはサイトの吹き出し設定を保存時に参照します。実サイトの設定を選択して確認してください。
<!-- wp:cocoon-blocks/balloon-box {"content":"サンプルの文章","className":"block-gallery-example"} -->
<div class="wp-block-cocoon-blocks-balloon-box speech-wrap sb-id-1 sbs-stn sbp-l sbis-undefined cf block-box block-gallery-example"><div class="speech-person"><figure class="speech-icon"><img src="https://balthasar.xsrv.jp/wp-content/themes/cocoon-master/images/man.png" alt="" class="speech-icon-image"/></figure><div class="speech-name">サンプルの文章</div></div><div class="speech-balloon"><!-- wp:paragraph -->
<p>春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cocoon-blocks/balloon-box -->sample-00123 / cocoon-blocks/balloon-box extraBottomMargin：extraBottomMargin=""【コピー用コード】
最初期の吹き出しはサイトの吹き出し設定を保存時に参照します。実サイトの設定を選択して確認してください。
<!-- wp:cocoon-blocks/balloon-box {"content":"サンプルの文章"} -->
<div class="wp-block-cocoon-blocks-balloon-box speech-wrap sb-id-1 sbs-stn sbp-l sbis-undefined cf block-box"><div class="speech-person"><figure class="speech-icon"><img src="https://balthasar.xsrv.jp/wp-content/themes/cocoon-master/images/man.png" alt="" class="speech-icon-image"/></figure><div class="speech-name">サンプルの文章</div></div><div class="speech-balloon"><!-- wp:paragraph -->
<p>春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cocoon-blocks/balloon-box -->sample-00124 / cocoon-blocks/balloon-box extraBottomMargin：extraBottomMargin="0"【コピー用コード】
最初期の吹き出しはサイトの吹き出し設定を保存時に参照します。実サイトの設定を選択して確認してください。
<!-- wp:cocoon-blocks/balloon-box {"content":"サンプルの文章","extraBottomMargin":"0"} -->
<div class="wp-block-cocoon-blocks-balloon-box speech-wrap sb-id-1 sbs-stn sbp-l sbis-undefined cf block-box is-style-bottom-margin-0em has-bottom-margin"><div class="speech-person"><figure class="speech-icon"><img src="https://balthasar.xsrv.jp/wp-content/themes/cocoon-master/images/man.png" alt="" class="speech-icon-image"/></figure><div class="speech-name">サンプルの文章</div></div><div class="speech-balloon"><!-- wp:paragraph -->
<p>春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cocoon-blocks/balloon-box -->sample-00125 / cocoon-blocks/balloon-box extraBottomMargin：extraBottomMargin="2"【コピー用コード】
最初期の吹き出しはサイトの吹き出し設定を保存時に参照します。実サイトの設定を選択して確認してください。
<!-- wp:cocoon-blocks/balloon-box {"content":"サンプルの文章","extraBottomMargin":"2"} -->
<div class="wp-block-cocoon-blocks-balloon-box speech-wrap sb-id-1 sbs-stn sbp-l sbis-undefined cf block-box is-style-bottom-margin-2em has-bottom-margin"><div class="speech-person"><figure class="speech-icon"><img src="https://balthasar.xsrv.jp/wp-content/themes/cocoon-master/images/man.png" alt="" class="speech-icon-image"/></figure><div class="speech-name">サンプルの文章</div></div><div class="speech-balloon"><!-- wp:paragraph -->
<p>春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cocoon-blocks/balloon-box -->sample-00126 / cocoon-blocks/balloon-box extraBottomMargin：extraBottomMargin="10"【コピー用コード】
最初期の吹き出しはサイトの吹き出し設定を保存時に参照します。実サイトの設定を選択して確認してください。
<!-- wp:cocoon-blocks/balloon-box {"content":"サンプルの文章","extraBottomMargin":"10"} -->
<div class="wp-block-cocoon-blocks-balloon-box speech-wrap sb-id-1 sbs-stn sbp-l sbis-undefined cf block-box is-style-bottom-margin-10em has-bottom-margin"><div class="speech-person"><figure class="speech-icon"><img src="https://balthasar.xsrv.jp/wp-content/themes/cocoon-master/images/man.png" alt="" class="speech-icon-image"/></figure><div class="speech-name">サンプルの文章</div></div><div class="speech-balloon"><!-- wp:paragraph -->
<p>春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cocoon-blocks/balloon-box -->sample-00127 / cocoon-blocks/balloon-box extraBottomMargin：extraBottomMargin="20"【コピー用コード】
最初期の吹き出しはサイトの吹き出し設定を保存時に参照します。実サイトの設定を選択して確認してください。
<!-- wp:cocoon-blocks/balloon-box {"content":"サンプルの文章","extraBottomMargin":"20"} -->
<div class="wp-block-cocoon-blocks-balloon-box speech-wrap sb-id-1 sbs-stn sbp-l sbis-undefined cf block-box is-style-bottom-margin-20em has-bottom-margin"><div class="speech-person"><figure class="speech-icon"><img src="https://balthasar.xsrv.jp/wp-content/themes/cocoon-master/images/man.png" alt="" class="speech-icon-image"/></figure><div class="speech-name">サンプルの文章</div></div><div class="speech-balloon"><!-- wp:paragraph -->
<p>春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cocoon-blocks/balloon-box -->sample-00128 / cocoon-blocks/balloon-box 長文と装飾の組み合わせ【コピー用コード】
最初期の吹き出しはサイトの吹き出し設定を保存時に参照します。実サイトの設定を選択して確認してください。
<!-- wp:cocoon-blocks/balloon-box {"content":"\u003cstrong\u003e大切なお知らせ\u003c/strong\u003e\u003cbr\u003e春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。"} -->
<div class="wp-block-cocoon-blocks-balloon-box speech-wrap sb-id-1 sbs-stn sbp-l sbis-undefined cf block-box"><div class="speech-person"><figure class="speech-icon"><img src="https://balthasar.xsrv.jp/wp-content/themes/cocoon-master/images/man.png" alt="" class="speech-icon-image"/></figure><div class="speech-name"><strong>大切なお知らせ</strong><br>春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。</div></div><div class="speech-balloon"><!-- wp:paragraph -->
<p>春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cocoon-blocks/balloon-box -->