ブロックサンプル：アコーディオン（7/7）

アコーディオン（7/7）

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

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

sample-03794 / core/accordion　背景画像：style.background.backgroundImage={"url":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-landscape.png","source":"file","title":"背景用画像"}

sample-03795 / core/accordion　背景画像のサイズ：style.background.backgroundSize="cover"

sample-03796 / core/accordion　背景画像のサイズ：style.background.backgroundSize="contain"

sample-03797 / core/accordion　背景画像の位置：style.background.backgroundPosition="50% 50%"

sample-03798 / core/accordion　背景画像の位置：style.background.backgroundPosition="0% 0%"

sample-03799 / core/accordion　背景画像の位置：style.background.backgroundPosition="100% 100%"

sample-03800 / core/accordion　背景画像の繰り返し：style.background.backgroundRepeat="repeat"

sample-03801 / core/accordion　背景画像の繰り返し：style.background.backgroundRepeat="no-repeat"

sample-03802 / core/accordion　layout：layout={"type":"constrained"}

sample-03803 / core/accordion　layout：layout={"type":"flex","flexWrap":"wrap","justifyContent":"center"}

sample-03804 / core/accordion　layout：layout={"type":"flex","orientation":"vertical","justifyContent":"left"}

sample-03805 / core/accordion　layout：layout={"type":"grid","columnCount":2}

sample-03806 / core/accordion　extraBottomMargin：extraBottomMargin=""

sample-03807 / core/accordion　extraBottomMargin：extraBottomMargin="0"

sample-03808 / core/accordion　extraBottomMargin：extraBottomMargin="2"

sample-03809 / core/accordion　extraBottomMargin：extraBottomMargin="10"

sample-03810 / core/accordion　extraBottomMargin：extraBottomMargin="20"

sample-03811 / core/accordion　組み合わせ：濃い背景と白い文字