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

ボタン（1/1）

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

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

sample-00327 / cocoon-blocks/button　基本形

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

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

sample-00330 / cocoon-blocks/button　url：url="#gallery-top"

sample-00331 / cocoon-blocks/button　url：url="https://wordpress.org/"

sample-00332 / cocoon-blocks/button　リンクの開き方：target="_self"

sample-00333 / cocoon-blocks/button　リンクの開き方：target="_blank"

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

sample-00354 / cocoon-blocks/button　align：align=""

sample-00355 / cocoon-blocks/button　align：align="left"

sample-00356 / cocoon-blocks/button　align：align="center"

sample-00357 / cocoon-blocks/button　align：align="right"

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

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

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

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

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

sample-00363 / cocoon-blocks/button　extraBottomMargin：extraBottomMargin=""

sample-00364 / cocoon-blocks/button　extraBottomMargin：extraBottomMargin="0"

sample-00365 / cocoon-blocks/button　extraBottomMargin：extraBottomMargin="2"

sample-00366 / cocoon-blocks/button　extraBottomMargin：extraBottomMargin="10"

sample-00367 / cocoon-blocks/button　extraBottomMargin：extraBottomMargin="20"

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