ブロックサンプル：囲みボタン（1/1）

囲みボタン（1/1）

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

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

sample-00369 / cocoon-blocks/button-wrap　基本形

sample-00370 / cocoon-blocks/button-wrap　content：content="短いサンプル"

sample-00371 / cocoon-blocks/button-wrap　content：content="春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。"

sample-00372 / cocoon-blocks/button-wrap　tag：tag="<a href=\"#gallery-top\">案内を見る</a>"

sample-00373 / cocoon-blocks/button-wrap　tag：tag="<a href=\"#gallery-top\"><strong>詳しい案内</strong><br>こちらから確認</a>"

sample-00374 / cocoon-blocks/button-wrap　色設定：color="btn-wrap btn-wrap-red"

sample-00375 / cocoon-blocks/button-wrap　色設定：color="btn-wrap btn-wrap-pink"

sample-00376 / cocoon-blocks/button-wrap　色設定：color="btn-wrap btn-wrap-purple"

sample-00377 / cocoon-blocks/button-wrap　色設定：color="btn-wrap btn-wrap-deep"

sample-00378 / cocoon-blocks/button-wrap　色設定：color="btn-wrap btn-wrap-indigo"

sample-00379 / cocoon-blocks/button-wrap　色設定：color="btn-wrap btn-wrap-blue"

sample-00380 / cocoon-blocks/button-wrap　色設定：color="btn-wrap btn-wrap-cyan"

sample-00381 / cocoon-blocks/button-wrap　色設定：color="btn-wrap btn-wrap-teal"

sample-00382 / cocoon-blocks/button-wrap　色設定：color="btn-wrap btn-wrap-green"

sample-00383 / cocoon-blocks/button-wrap　色設定：color="btn-wrap btn-wrap-light-green"

sample-00384 / cocoon-blocks/button-wrap　色設定：color="btn-wrap btn-wrap-lime"

sample-00385 / cocoon-blocks/button-wrap　色設定：color="btn-wrap btn-wrap-yellow"

sample-00386 / cocoon-blocks/button-wrap　色設定：color="btn-wrap btn-wrap-amber"

sample-00387 / cocoon-blocks/button-wrap　色設定：color="btn-wrap btn-wrap-orange"

sample-00388 / cocoon-blocks/button-wrap　色設定：color="btn-wrap btn-wrap-deep-orange"

sample-00389 / cocoon-blocks/button-wrap　色設定：color="btn-wrap btn-wrap-brown"

sample-00390 / cocoon-blocks/button-wrap　色設定：color="btn-wrap btn-wrap-grey"

sample-00391 / cocoon-blocks/button-wrap　サイズ：size=""

sample-00392 / cocoon-blocks/button-wrap　サイズ：size=" btn-wrap-m"

sample-00393 / cocoon-blocks/button-wrap　サイズ：size=" btn-wrap-l"

sample-00394 / cocoon-blocks/button-wrap　align：align=""

sample-00395 / cocoon-blocks/button-wrap　align：align="left"

sample-00396 / cocoon-blocks/button-wrap　align：align="center"

sample-00397 / cocoon-blocks/button-wrap　align：align="right"

sample-00398 / cocoon-blocks/button-wrap　lock：lock={"move":false,"remove":false}

sample-00399 / cocoon-blocks/button-wrap　lock：lock={"move":true,"remove":false}

sample-00400 / cocoon-blocks/button-wrap　lock：lock={"move":false,"remove":true}

sample-00401 / cocoon-blocks/button-wrap　lock：lock={"move":true,"remove":true}

sample-00402 / cocoon-blocks/button-wrap　className：className="block-gallery-example"

sample-00403 / cocoon-blocks/button-wrap　extraBottomMargin：extraBottomMargin=""

sample-00404 / cocoon-blocks/button-wrap　extraBottomMargin：extraBottomMargin="0"

sample-00405 / cocoon-blocks/button-wrap　extraBottomMargin：extraBottomMargin="2"

sample-00406 / cocoon-blocks/button-wrap　extraBottomMargin：extraBottomMargin="10"

sample-00407 / cocoon-blocks/button-wrap　extraBottomMargin：extraBottomMargin="20"

sample-00408 / cocoon-blocks/button-wrap　長文と装飾の組み合わせ