ブロックサンプル：吹き出し（1/2）

吹き出し（1/2）

ブロックの設定を比較するサンプルです。各例の直前に変更設定と値を記載しています。

画像等は同梱素材を使用します。コピー用コードと書かれた例は、説明に従って必要なデータ・編集場所を用意してください。

sample-00680 / cocoon-blocks/balloon-ex-box-1　基本形

案内役

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-00681 / cocoon-blocks/balloon-ex-box-1　name：name="短いサンプル"

短いサンプル

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-00682 / cocoon-blocks/balloon-ex-box-1　name：name="長いサンプルの文章で折り返し方と余白の見え方を確認します。"

長いサンプルの文章で折り返し方と余白の見え方を確認します。

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-00683 / cocoon-blocks/balloon-ex-box-1　icon：icon="https://balthasar.xsrv.jp/wp-content/themes/cocoon-master/images/man.png"

案内役

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-00684 / cocoon-blocks/balloon-ex-box-1　icon：icon="https://balthasar.xsrv.jp/wp-content/themes/cocoon-master/images/woman.png"

案内役

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-00685 / cocoon-blocks/balloon-ex-box-1　吹き出しスタイル：balloonStyle="stn"

案内役

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-00686 / cocoon-blocks/balloon-ex-box-1　吹き出しスタイル：balloonStyle="flat"

案内役

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-00687 / cocoon-blocks/balloon-ex-box-1　吹き出しスタイル：balloonStyle="line"

案内役

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-00688 / cocoon-blocks/balloon-ex-box-1　吹き出しスタイル：balloonStyle="think"

案内役

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-00689 / cocoon-blocks/balloon-ex-box-1　文字色の自由指定：style.color.text="#19448e"

案内役

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-00690 / cocoon-blocks/balloon-ex-box-1　文字色の自由指定：style.color.text="#fff3ce"

案内役

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-00691 / cocoon-blocks/balloon-ex-box-1　文字色の自由指定：style.color.text="#a82d46"

案内役

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-00692 / cocoon-blocks/balloon-ex-box-1　背景色の自由指定：style.color.background="#fff3ce"

案内役

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-00693 / cocoon-blocks/balloon-ex-box-1　背景色の自由指定：style.color.background="#e8f0fa"

案内役

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-00694 / cocoon-blocks/balloon-ex-box-1　背景色の自由指定：style.color.background="#19448e"

案内役

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-00695 / cocoon-blocks/balloon-ex-box-1　人物位置：position="l"

案内役

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-00696 / cocoon-blocks/balloon-ex-box-1　人物位置：position="r"

案内役

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-00697 / cocoon-blocks/balloon-ex-box-1　アイコンスタイル：iconstyle="sn"

案内役

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-00698 / cocoon-blocks/balloon-ex-box-1　アイコンスタイル：iconstyle="sb"

案内役

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-00699 / cocoon-blocks/balloon-ex-box-1　アイコンスタイル：iconstyle="cn"

案内役

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-00700 / cocoon-blocks/balloon-ex-box-1　アイコンスタイル：iconstyle="cb"

案内役

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-00701 / cocoon-blocks/balloon-ex-box-1　backgroundColor：backgroundColor="key-color"

案内役

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-00702 / cocoon-blocks/balloon-ex-box-1　backgroundColor：backgroundColor="red"

案内役

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-00703 / cocoon-blocks/balloon-ex-box-1　backgroundColor：backgroundColor="pink"

案内役

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-00704 / cocoon-blocks/balloon-ex-box-1　backgroundColor：backgroundColor="purple"

案内役

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-00705 / cocoon-blocks/balloon-ex-box-1　backgroundColor：backgroundColor="deep"

案内役

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-00706 / cocoon-blocks/balloon-ex-box-1　backgroundColor：backgroundColor="indigo"

案内役

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-00707 / cocoon-blocks/balloon-ex-box-1　backgroundColor：backgroundColor="blue"

案内役

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-00708 / cocoon-blocks/balloon-ex-box-1　backgroundColor：backgroundColor="light-blue"

案内役

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-00709 / cocoon-blocks/balloon-ex-box-1　backgroundColor：backgroundColor="cyan"

案内役

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-00710 / cocoon-blocks/balloon-ex-box-1　backgroundColor：backgroundColor="teal"

案内役

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-00711 / cocoon-blocks/balloon-ex-box-1　backgroundColor：backgroundColor="green"

案内役

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-00712 / cocoon-blocks/balloon-ex-box-1　backgroundColor：backgroundColor="light-green"

案内役

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-00713 / cocoon-blocks/balloon-ex-box-1　backgroundColor：backgroundColor="lime"

案内役

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-00714 / cocoon-blocks/balloon-ex-box-1　backgroundColor：backgroundColor="yellow"

案内役

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-00715 / cocoon-blocks/balloon-ex-box-1　backgroundColor：backgroundColor="amber"

案内役

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-00716 / cocoon-blocks/balloon-ex-box-1　backgroundColor：backgroundColor="orange"

案内役

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-00717 / cocoon-blocks/balloon-ex-box-1　backgroundColor：backgroundColor="deep-orange"

案内役

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-00718 / cocoon-blocks/balloon-ex-box-1　backgroundColor：backgroundColor="brown"

案内役

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-00719 / cocoon-blocks/balloon-ex-box-1　backgroundColor：backgroundColor="light-grey"

案内役

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-00720 / cocoon-blocks/balloon-ex-box-1　backgroundColor：backgroundColor="grey"

案内役

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-00721 / cocoon-blocks/balloon-ex-box-1　backgroundColor：backgroundColor="dark-grey"

案内役

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-00722 / cocoon-blocks/balloon-ex-box-1　backgroundColor：backgroundColor="cocoon-black"

案内役

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-00723 / cocoon-blocks/balloon-ex-box-1　backgroundColor：backgroundColor="cocoon-white"

案内役

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-00724 / cocoon-blocks/balloon-ex-box-1　backgroundColor：backgroundColor="watery-blue"

案内役

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-00725 / cocoon-blocks/balloon-ex-box-1　backgroundColor：backgroundColor="watery-yellow"

案内役

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-00726 / cocoon-blocks/balloon-ex-box-1　backgroundColor：backgroundColor="watery-red"

案内役

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-00727 / cocoon-blocks/balloon-ex-box-1　backgroundColor：backgroundColor="watery-green"

案内役

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-00728 / cocoon-blocks/balloon-ex-box-1　backgroundColor：backgroundColor="ex-a"

案内役

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-00729 / cocoon-blocks/balloon-ex-box-1　backgroundColor：backgroundColor="ex-b"

案内役

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-00730 / cocoon-blocks/balloon-ex-box-1　backgroundColor：backgroundColor="ex-c"

案内役

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-00731 / cocoon-blocks/balloon-ex-box-1　backgroundColor：backgroundColor="ex-d"

案内役

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-00732 / cocoon-blocks/balloon-ex-box-1　backgroundColor：backgroundColor="ex-e"

案内役

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-00733 / cocoon-blocks/balloon-ex-box-1　backgroundColor：backgroundColor="ex-f"

案内役

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-00734 / cocoon-blocks/balloon-ex-box-1　プリセットの前景色：textColor="key-color" / borderColor="key-color"

案内役

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-00735 / cocoon-blocks/balloon-ex-box-1　プリセットの前景色：textColor="red" / borderColor="red"

案内役

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-00736 / cocoon-blocks/balloon-ex-box-1　プリセットの前景色：textColor="pink" / borderColor="pink"

案内役

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-00737 / cocoon-blocks/balloon-ex-box-1　プリセットの前景色：textColor="purple" / borderColor="purple"

案内役

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-00738 / cocoon-blocks/balloon-ex-box-1　プリセットの前景色：textColor="deep" / borderColor="deep"

案内役

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-00739 / cocoon-blocks/balloon-ex-box-1　プリセットの前景色：textColor="indigo" / borderColor="indigo"

案内役

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-00740 / cocoon-blocks/balloon-ex-box-1　プリセットの前景色：textColor="blue" / borderColor="blue"

案内役

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-00741 / cocoon-blocks/balloon-ex-box-1　プリセットの前景色：textColor="light-blue" / borderColor="light-blue"

案内役

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-00742 / cocoon-blocks/balloon-ex-box-1　プリセットの前景色：textColor="cyan" / borderColor="cyan"

案内役

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-00743 / cocoon-blocks/balloon-ex-box-1　プリセットの前景色：textColor="teal" / borderColor="teal"

案内役

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。

sample-00744 / cocoon-blocks/balloon-ex-box-1　プリセットの前景色：textColor="green" / borderColor="green"

案内役

春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。