吹き出し（1/1）
ブロックの設定を比較するサンプルです。各例の直前に変更設定と値を記載しています。
画像等は同梱素材を使用します。コピー用コードと書かれた例は、説明に従って必要なデータ・編集場所を用意してください。
sample-00129 / cocoon-blocks/balloon-box-1 基本形【コピー用コード】
旧吹き出しは保存時にサイトの吹き出し設定を参照します。実サイトで吹き出しを選び直してから確認してください。
<!-- wp:cocoon-blocks/balloon-box-1 {"name":"案内役"} -->
<div class="wp-block-cocoon-blocks-balloon-box-1 speech-wrap sb-id-1 sbs-stn sbp-l sbis-cb 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-1 -->sample-00130 / cocoon-blocks/balloon-box-1 name：name="短いサンプル"【コピー用コード】
旧吹き出しは保存時にサイトの吹き出し設定を参照します。実サイトで吹き出しを選び直してから確認してください。
<!-- wp:cocoon-blocks/balloon-box-1 {"name":"短いサンプル"} -->
<div class="wp-block-cocoon-blocks-balloon-box-1 speech-wrap sb-id-1 sbs-stn sbp-l sbis-cb 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-1 -->sample-00131 / cocoon-blocks/balloon-box-1 name：name="長いサンプルの文章で折り返し方と余白の見え方を確認します。"【コピー用コード】
旧吹き出しは保存時にサイトの吹き出し設定を参照します。実サイトで吹き出しを選び直してから確認してください。
<!-- wp:cocoon-blocks/balloon-box-1 {"name":"長いサンプルの文章で折り返し方と余白の見え方を確認します。"} -->
<div class="wp-block-cocoon-blocks-balloon-box-1 speech-wrap sb-id-1 sbs-stn sbp-l sbis-cb 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-1 -->sample-00132 / cocoon-blocks/balloon-box-1 lock：lock={"move":false,"remove":false}【コピー用コード】
旧吹き出しは保存時にサイトの吹き出し設定を参照します。実サイトで吹き出しを選び直してから確認してください。
<!-- wp:cocoon-blocks/balloon-box-1 {"name":"案内役","lock":{"move":false,"remove":false}} -->
<div class="wp-block-cocoon-blocks-balloon-box-1 speech-wrap sb-id-1 sbs-stn sbp-l sbis-cb 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-1 -->sample-00133 / cocoon-blocks/balloon-box-1 lock：lock={"move":true,"remove":false}【コピー用コード】
旧吹き出しは保存時にサイトの吹き出し設定を参照します。実サイトで吹き出しを選び直してから確認してください。
<!-- wp:cocoon-blocks/balloon-box-1 {"name":"案内役","lock":{"move":true,"remove":false}} -->
<div class="wp-block-cocoon-blocks-balloon-box-1 speech-wrap sb-id-1 sbs-stn sbp-l sbis-cb 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-1 -->sample-00134 / cocoon-blocks/balloon-box-1 lock：lock={"move":false,"remove":true}【コピー用コード】
旧吹き出しは保存時にサイトの吹き出し設定を参照します。実サイトで吹き出しを選び直してから確認してください。
<!-- wp:cocoon-blocks/balloon-box-1 {"name":"案内役","lock":{"move":false,"remove":true}} -->
<div class="wp-block-cocoon-blocks-balloon-box-1 speech-wrap sb-id-1 sbs-stn sbp-l sbis-cb 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-1 -->sample-00135 / cocoon-blocks/balloon-box-1 lock：lock={"move":true,"remove":true}【コピー用コード】
旧吹き出しは保存時にサイトの吹き出し設定を参照します。実サイトで吹き出しを選び直してから確認してください。
<!-- wp:cocoon-blocks/balloon-box-1 {"name":"案内役","lock":{"move":true,"remove":true}} -->
<div class="wp-block-cocoon-blocks-balloon-box-1 speech-wrap sb-id-1 sbs-stn sbp-l sbis-cb 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-1 -->sample-00136 / cocoon-blocks/balloon-box-1 className：className="block-gallery-example"【コピー用コード】
旧吹き出しは保存時にサイトの吹き出し設定を参照します。実サイトで吹き出しを選び直してから確認してください。
<!-- wp:cocoon-blocks/balloon-box-1 {"name":"案内役","className":"block-gallery-example"} -->
<div class="wp-block-cocoon-blocks-balloon-box-1 speech-wrap sb-id-1 sbs-stn sbp-l sbis-cb 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-1 -->sample-00137 / cocoon-blocks/balloon-box-1 extraBottomMargin：extraBottomMargin=""【コピー用コード】
旧吹き出しは保存時にサイトの吹き出し設定を参照します。実サイトで吹き出しを選び直してから確認してください。
<!-- wp:cocoon-blocks/balloon-box-1 {"name":"案内役"} -->
<div class="wp-block-cocoon-blocks-balloon-box-1 speech-wrap sb-id-1 sbs-stn sbp-l sbis-cb 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-1 -->sample-00138 / cocoon-blocks/balloon-box-1 extraBottomMargin：extraBottomMargin="0"【コピー用コード】
旧吹き出しは保存時にサイトの吹き出し設定を参照します。実サイトで吹き出しを選び直してから確認してください。
<!-- wp:cocoon-blocks/balloon-box-1 {"name":"案内役","extraBottomMargin":"0"} -->
<div class="wp-block-cocoon-blocks-balloon-box-1 speech-wrap sb-id-1 sbs-stn sbp-l sbis-cb 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-1 -->sample-00139 / cocoon-blocks/balloon-box-1 extraBottomMargin：extraBottomMargin="2"【コピー用コード】
旧吹き出しは保存時にサイトの吹き出し設定を参照します。実サイトで吹き出しを選び直してから確認してください。
<!-- wp:cocoon-blocks/balloon-box-1 {"name":"案内役","extraBottomMargin":"2"} -->
<div class="wp-block-cocoon-blocks-balloon-box-1 speech-wrap sb-id-1 sbs-stn sbp-l sbis-cb 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-1 -->sample-00140 / cocoon-blocks/balloon-box-1 extraBottomMargin：extraBottomMargin="10"【コピー用コード】
旧吹き出しは保存時にサイトの吹き出し設定を参照します。実サイトで吹き出しを選び直してから確認してください。
<!-- wp:cocoon-blocks/balloon-box-1 {"name":"案内役","extraBottomMargin":"10"} -->
<div class="wp-block-cocoon-blocks-balloon-box-1 speech-wrap sb-id-1 sbs-stn sbp-l sbis-cb 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-1 -->sample-00141 / cocoon-blocks/balloon-box-1 extraBottomMargin：extraBottomMargin="20"【コピー用コード】
旧吹き出しは保存時にサイトの吹き出し設定を参照します。実サイトで吹き出しを選び直してから確認してください。
<!-- wp:cocoon-blocks/balloon-box-1 {"name":"案内役","extraBottomMargin":"20"} -->
<div class="wp-block-cocoon-blocks-balloon-box-1 speech-wrap sb-id-1 sbs-stn sbp-l sbis-cb 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-1 -->