ブロックサンプル：プレイリスト（3/3）

プレイリスト（3/3）

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

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

sample-06598 / core/playlist　lock：lock={"move":true,"remove":false}【コピー用コード】

メディアライブラリへ音声を登録し、子の曲ブロックで実在する音声IDを選択してください。WordPress 7.1はIDがない曲を描画しないため、URLだけでは再生一覧を復元できません。

<!-- wp:playlist {"lock":{"move":true,"remove":false}} -->
<figure class="wp-block-playlist"><ol class="wp-block-playlist__tracklist wp-block-playlist__tracklist-show-numbers"><!-- wp:playlist-track {"src":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-sample.wav","album":"表示テスト","artist":"Cocoon サンプル","image":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-square.png","length":"0:01","title":"確認用の音"} /-->

<!-- wp:playlist-track {"src":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-sample.wav","album":"表示テスト","artist":"Cocoon サンプル","image":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-square.png","length":"0:01","title":"もう一つの確認音"} /--></ol></figure>
<!-- /wp:playlist -->

sample-06599 / core/playlist　lock：lock={"move":false,"remove":true}【コピー用コード】

<!-- wp:playlist {"lock":{"move":false,"remove":true}} -->
<figure class="wp-block-playlist"><ol class="wp-block-playlist__tracklist wp-block-playlist__tracklist-show-numbers"><!-- wp:playlist-track {"src":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-sample.wav","album":"表示テスト","artist":"Cocoon サンプル","image":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-square.png","length":"0:01","title":"確認用の音"} /-->

<!-- wp:playlist-track {"src":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-sample.wav","album":"表示テスト","artist":"Cocoon サンプル","image":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-square.png","length":"0:01","title":"もう一つの確認音"} /--></ol></figure>
<!-- /wp:playlist -->

sample-06600 / core/playlist　lock：lock={"move":true,"remove":true}【コピー用コード】

<!-- wp:playlist {"lock":{"move":true,"remove":true}} -->
<figure class="wp-block-playlist"><ol class="wp-block-playlist__tracklist wp-block-playlist__tracklist-show-numbers"><!-- wp:playlist-track {"src":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-sample.wav","album":"表示テスト","artist":"Cocoon サンプル","image":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-square.png","length":"0:01","title":"確認用の音"} /-->

<!-- wp:playlist-track {"src":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-sample.wav","album":"表示テスト","artist":"Cocoon サンプル","image":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-square.png","length":"0:01","title":"もう一つの確認音"} /--></ol></figure>
<!-- /wp:playlist -->

sample-06601 / core/playlist　anchor：anchor="sample-anchor"【コピー用コード】

<!-- wp:playlist {"anchor":"anchor-sample-06601"} -->
<figure id="anchor-sample-06601" class="wp-block-playlist"><ol class="wp-block-playlist__tracklist wp-block-playlist__tracklist-show-numbers"><!-- wp:playlist-track {"src":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-sample.wav","album":"表示テスト","artist":"Cocoon サンプル","image":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-square.png","length":"0:01","title":"確認用の音"} /-->

<!-- wp:playlist-track {"src":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-sample.wav","album":"表示テスト","artist":"Cocoon サンプル","image":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-square.png","length":"0:01","title":"もう一つの確認音"} /--></ol></figure>
<!-- /wp:playlist -->

sample-06602 / core/playlist　className：className="block-gallery-example"【コピー用コード】

<!-- wp:playlist {"className":"block-gallery-example"} -->
<figure class="wp-block-playlist block-gallery-example"><ol class="wp-block-playlist__tracklist wp-block-playlist__tracklist-show-numbers"><!-- wp:playlist-track {"src":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-sample.wav","album":"表示テスト","artist":"Cocoon サンプル","image":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-square.png","length":"0:01","title":"確認用の音"} /-->

<!-- wp:playlist-track {"src":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-sample.wav","album":"表示テスト","artist":"Cocoon サンプル","image":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-square.png","length":"0:01","title":"もう一つの確認音"} /--></ol></figure>
<!-- /wp:playlist -->

sample-06603 / core/playlist　文字色の自由指定：style.color.text="#19448e"【コピー用コード】

<!-- wp:playlist {"style":{"color":{"text":"#19448e"}}} -->
<figure class="wp-block-playlist has-text-color" style="color:#19448e"><ol class="wp-block-playlist__tracklist wp-block-playlist__tracklist-show-numbers"><!-- wp:playlist-track {"src":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-sample.wav","album":"表示テスト","artist":"Cocoon サンプル","image":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-square.png","length":"0:01","title":"確認用の音"} /-->

<!-- wp:playlist-track {"src":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-sample.wav","album":"表示テスト","artist":"Cocoon サンプル","image":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-square.png","length":"0:01","title":"もう一つの確認音"} /--></ol></figure>
<!-- /wp:playlist -->

sample-06604 / core/playlist　文字色の自由指定：style.color.text="#fff3ce"【コピー用コード】

<!-- wp:playlist {"style":{"color":{"text":"#fff3ce"}}} -->
<figure class="wp-block-playlist has-text-color" style="color:#fff3ce"><ol class="wp-block-playlist__tracklist wp-block-playlist__tracklist-show-numbers"><!-- wp:playlist-track {"src":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-sample.wav","album":"表示テスト","artist":"Cocoon サンプル","image":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-square.png","length":"0:01","title":"確認用の音"} /-->

<!-- wp:playlist-track {"src":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-sample.wav","album":"表示テスト","artist":"Cocoon サンプル","image":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-square.png","length":"0:01","title":"もう一つの確認音"} /--></ol></figure>
<!-- /wp:playlist -->

sample-06605 / core/playlist　文字色の自由指定：style.color.text="#a82d46"【コピー用コード】

<!-- wp:playlist {"style":{"color":{"text":"#a82d46"}}} -->
<figure class="wp-block-playlist has-text-color" style="color:#a82d46"><ol class="wp-block-playlist__tracklist wp-block-playlist__tracklist-show-numbers"><!-- wp:playlist-track {"src":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-sample.wav","album":"表示テスト","artist":"Cocoon サンプル","image":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-square.png","length":"0:01","title":"確認用の音"} /-->

<!-- wp:playlist-track {"src":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-sample.wav","album":"表示テスト","artist":"Cocoon サンプル","image":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-square.png","length":"0:01","title":"もう一つの確認音"} /--></ol></figure>
<!-- /wp:playlist -->

sample-06606 / core/playlist　背景色の自由指定：style.color.background="#fff3ce"【コピー用コード】

<!-- wp:playlist {"style":{"color":{"background":"#fff3ce"}}} -->
<figure class="wp-block-playlist has-background" style="background-color:#fff3ce"><ol class="wp-block-playlist__tracklist wp-block-playlist__tracklist-show-numbers"><!-- wp:playlist-track {"src":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-sample.wav","album":"表示テスト","artist":"Cocoon サンプル","image":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-square.png","length":"0:01","title":"確認用の音"} /-->

<!-- wp:playlist-track {"src":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-sample.wav","album":"表示テスト","artist":"Cocoon サンプル","image":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-square.png","length":"0:01","title":"もう一つの確認音"} /--></ol></figure>
<!-- /wp:playlist -->

sample-06607 / core/playlist　背景色の自由指定：style.color.background="#e8f0fa"【コピー用コード】

<!-- wp:playlist {"style":{"color":{"background":"#e8f0fa"}}} -->
<figure class="wp-block-playlist has-background" style="background-color:#e8f0fa"><ol class="wp-block-playlist__tracklist wp-block-playlist__tracklist-show-numbers"><!-- wp:playlist-track {"src":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-sample.wav","album":"表示テスト","artist":"Cocoon サンプル","image":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-square.png","length":"0:01","title":"確認用の音"} /-->

<!-- wp:playlist-track {"src":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-sample.wav","album":"表示テスト","artist":"Cocoon サンプル","image":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-square.png","length":"0:01","title":"もう一つの確認音"} /--></ol></figure>
<!-- /wp:playlist -->

sample-06608 / core/playlist　背景色の自由指定：style.color.background="#19448e"【コピー用コード】

<!-- wp:playlist {"style":{"color":{"background":"#19448e","text":"#ffffff"}}} -->
<figure class="wp-block-playlist has-text-color has-background" style="color:#ffffff;background-color:#19448e"><ol class="wp-block-playlist__tracklist wp-block-playlist__tracklist-show-numbers"><!-- wp:playlist-track {"src":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-sample.wav","album":"表示テスト","artist":"Cocoon サンプル","image":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-square.png","length":"0:01","title":"確認用の音"} /-->

<!-- wp:playlist-track {"src":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-sample.wav","album":"表示テスト","artist":"Cocoon サンプル","image":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-square.png","length":"0:01","title":"もう一つの確認音"} /--></ol></figure>
<!-- /wp:playlist -->

sample-06609 / core/playlist　グラデーション：style.color.gradient="linear-gradient(135deg,#dcecff 0%,#fff2db 100%)"【コピー用コード】

<!-- wp:playlist {"style":{"color":{"gradient":"linear-gradient(135deg,#dcecff 0%,#fff2db 100%)"}}} -->
<figure class="wp-block-playlist has-background" style="background:linear-gradient(135deg,#dcecff 0%,#fff2db 100%)"><ol class="wp-block-playlist__tracklist wp-block-playlist__tracklist-show-numbers"><!-- wp:playlist-track {"src":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-sample.wav","album":"表示テスト","artist":"Cocoon サンプル","image":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-square.png","length":"0:01","title":"確認用の音"} /-->

<!-- wp:playlist-track {"src":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-sample.wav","album":"表示テスト","artist":"Cocoon サンプル","image":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-square.png","length":"0:01","title":"もう一つの確認音"} /--></ol></figure>
<!-- /wp:playlist -->

sample-06610 / core/playlist　グラデーション：style.color.gradient="linear-gradient(90deg,#19448e 0%,#9b2d64 100%)"【コピー用コード】

<!-- wp:playlist {"style":{"color":{"gradient":"linear-gradient(90deg,#19448e 0%,#9b2d64 100%)"}}} -->
<figure class="wp-block-playlist has-background" style="background:linear-gradient(90deg,#19448e 0%,#9b2d64 100%)"><ol class="wp-block-playlist__tracklist wp-block-playlist__tracklist-show-numbers"><!-- wp:playlist-track {"src":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-sample.wav","album":"表示テスト","artist":"Cocoon サンプル","image":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-square.png","length":"0:01","title":"確認用の音"} /-->

<!-- wp:playlist-track {"src":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-sample.wav","album":"表示テスト","artist":"Cocoon サンプル","image":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-square.png","length":"0:01","title":"もう一つの確認音"} /--></ol></figure>
<!-- /wp:playlist -->

sample-06611 / core/playlist　linkの色：style.elements.link.color.text="#19448e"【コピー用コード】

<!-- wp:playlist {"style":{"elements":{"link":{"color":{"text":"#19448e"}}}}} -->
<figure class="wp-block-playlist has-link-color"><ol class="wp-block-playlist__tracklist wp-block-playlist__tracklist-show-numbers"><!-- wp:playlist-track {"src":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-sample.wav","album":"表示テスト","artist":"Cocoon サンプル","image":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-square.png","length":"0:01","title":"確認用の音"} /-->

<!-- wp:playlist-track {"src":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-sample.wav","album":"表示テスト","artist":"Cocoon サンプル","image":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-square.png","length":"0:01","title":"もう一つの確認音"} /--></ol></figure>
<!-- /wp:playlist -->

sample-06612 / core/playlist　linkの色：style.elements.link.color.text="#fff3ce"【コピー用コード】

<!-- wp:playlist {"style":{"elements":{"link":{"color":{"text":"#fff3ce"}}}}} -->
<figure class="wp-block-playlist has-link-color"><ol class="wp-block-playlist__tracklist wp-block-playlist__tracklist-show-numbers"><!-- wp:playlist-track {"src":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-sample.wav","album":"表示テスト","artist":"Cocoon サンプル","image":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-square.png","length":"0:01","title":"確認用の音"} /-->

<!-- wp:playlist-track {"src":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-sample.wav","album":"表示テスト","artist":"Cocoon サンプル","image":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-square.png","length":"0:01","title":"もう一つの確認音"} /--></ol></figure>
<!-- /wp:playlist -->

sample-06613 / core/playlist　文字組み：fontSize：style.typography.fontSize="14px"【コピー用コード】

<!-- wp:playlist {"style":{"typography":{"fontSize":"14px"}}} -->
<figure class="wp-block-playlist" style="font-size:14px"><ol class="wp-block-playlist__tracklist wp-block-playlist__tracklist-show-numbers"><!-- wp:playlist-track {"src":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-sample.wav","album":"表示テスト","artist":"Cocoon サンプル","image":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-square.png","length":"0:01","title":"確認用の音"} /-->

<!-- wp:playlist-track {"src":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-sample.wav","album":"表示テスト","artist":"Cocoon サンプル","image":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-square.png","length":"0:01","title":"もう一つの確認音"} /--></ol></figure>
<!-- /wp:playlist -->

sample-06614 / core/playlist　文字組み：fontSize：style.typography.fontSize="24px"【コピー用コード】

<!-- wp:playlist {"style":{"typography":{"fontSize":"24px"}}} -->
<figure class="wp-block-playlist" style="font-size:24px"><ol class="wp-block-playlist__tracklist wp-block-playlist__tracklist-show-numbers"><!-- wp:playlist-track {"src":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-sample.wav","album":"表示テスト","artist":"Cocoon サンプル","image":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-square.png","length":"0:01","title":"確認用の音"} /-->

<!-- wp:playlist-track {"src":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-sample.wav","album":"表示テスト","artist":"Cocoon サンプル","image":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-square.png","length":"0:01","title":"もう一つの確認音"} /--></ol></figure>
<!-- /wp:playlist -->

sample-06615 / core/playlist　文字組み：fontSize：style.typography.fontSize="2rem"【コピー用コード】

<!-- wp:playlist {"style":{"typography":{"fontSize":"2rem"}}} -->
<figure class="wp-block-playlist" style="font-size:2rem"><ol class="wp-block-playlist__tracklist wp-block-playlist__tracklist-show-numbers"><!-- wp:playlist-track {"src":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-sample.wav","album":"表示テスト","artist":"Cocoon サンプル","image":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-square.png","length":"0:01","title":"確認用の音"} /-->

<!-- wp:playlist-track {"src":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-sample.wav","album":"表示テスト","artist":"Cocoon サンプル","image":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-square.png","length":"0:01","title":"もう一つの確認音"} /--></ol></figure>
<!-- /wp:playlist -->

sample-06616 / core/playlist　余白の組み合わせ：style.spacing.padding={"top":"0","right":"0","bottom":"0","left":"0"} / style.spacing.margin={"top":"0","right":"0","bottom":"0","left":"0"}【コピー用コード】

<!-- wp:playlist {"style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"},"margin":{"top":"0","right":"0","bottom":"0","left":"0"}}}} -->
<figure class="wp-block-playlist" style="margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><ol class="wp-block-playlist__tracklist wp-block-playlist__tracklist-show-numbers"><!-- wp:playlist-track {"src":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-sample.wav","album":"表示テスト","artist":"Cocoon サンプル","image":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-square.png","length":"0:01","title":"確認用の音"} /-->

<!-- wp:playlist-track {"src":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-sample.wav","album":"表示テスト","artist":"Cocoon サンプル","image":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-square.png","length":"0:01","title":"もう一つの確認音"} /--></ol></figure>
<!-- /wp:playlist -->

sample-06617 / core/playlist　余白の組み合わせ：style.spacing.padding={"top":"1em","right":"1em","bottom":"1em","left":"1em"} / style.spacing.margin={"top":"1em","right":"1em","bottom":"1em","left":"1em"}【コピー用コード】

<!-- wp:playlist {"style":{"spacing":{"padding":{"top":"1em","right":"1em","bottom":"1em","left":"1em"},"margin":{"top":"1em","right":"1em","bottom":"1em","left":"1em"}}}} -->
<figure class="wp-block-playlist" style="margin-top:1em;margin-right:1em;margin-bottom:1em;margin-left:1em;padding-top:1em;padding-right:1em;padding-bottom:1em;padding-left:1em"><ol class="wp-block-playlist__tracklist wp-block-playlist__tracklist-show-numbers"><!-- wp:playlist-track {"src":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-sample.wav","album":"表示テスト","artist":"Cocoon サンプル","image":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-square.png","length":"0:01","title":"確認用の音"} /-->

<!-- wp:playlist-track {"src":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-sample.wav","album":"表示テスト","artist":"Cocoon サンプル","image":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-square.png","length":"0:01","title":"もう一つの確認音"} /--></ol></figure>
<!-- /wp:playlist -->

sample-06618 / core/playlist　余白の組み合わせ：style.spacing.padding={"top":"2rem","right":"2rem","bottom":"2rem","left":"2rem"} / style.spacing.margin={"top":"2rem","right":"2rem","bottom":"2rem","left":"2rem"}【コピー用コード】

<!-- wp:playlist {"style":{"spacing":{"padding":{"top":"2rem","right":"2rem","bottom":"2rem","left":"2rem"},"margin":{"top":"2rem","right":"2rem","bottom":"2rem","left":"2rem"}}}} -->
<figure class="wp-block-playlist" style="margin-top:2rem;margin-right:2rem;margin-bottom:2rem;margin-left:2rem;padding-top:2rem;padding-right:2rem;padding-bottom:2rem;padding-left:2rem"><ol class="wp-block-playlist__tracklist wp-block-playlist__tracklist-show-numbers"><!-- wp:playlist-track {"src":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-sample.wav","album":"表示テスト","artist":"Cocoon サンプル","image":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-square.png","length":"0:01","title":"確認用の音"} /-->

<!-- wp:playlist-track {"src":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-sample.wav","album":"表示テスト","artist":"Cocoon サンプル","image":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-square.png","length":"0:01","title":"もう一つの確認音"} /--></ol></figure>
<!-- /wp:playlist -->

sample-06619 / core/playlist　枠線の組み合わせ：style.border.color="#19448e" / style.border.width="1px" / style.border.style="solid"【コピー用コード】

<!-- wp:playlist {"style":{"border":{"width":"1px","style":"solid","color":"#19448e"}}} -->
<figure class="wp-block-playlist has-border-color" style="border-color:#19448e;border-style:solid;border-width:1px"><ol class="wp-block-playlist__tracklist wp-block-playlist__tracklist-show-numbers"><!-- wp:playlist-track {"src":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-sample.wav","album":"表示テスト","artist":"Cocoon サンプル","image":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-square.png","length":"0:01","title":"確認用の音"} /-->

<!-- wp:playlist-track {"src":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-sample.wav","album":"表示テスト","artist":"Cocoon サンプル","image":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-square.png","length":"0:01","title":"もう一つの確認音"} /--></ol></figure>
<!-- /wp:playlist -->

sample-06620 / core/playlist　枠線の組み合わせ：style.border.color="#fff3ce" / style.border.width="3px" / style.border.style="dashed"【コピー用コード】

<!-- wp:playlist {"style":{"border":{"width":"3px","style":"dashed","color":"#fff3ce"}}} -->
<figure class="wp-block-playlist has-border-color" style="border-color:#fff3ce;border-style:dashed;border-width:3px"><ol class="wp-block-playlist__tracklist wp-block-playlist__tracklist-show-numbers"><!-- wp:playlist-track {"src":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-sample.wav","album":"表示テスト","artist":"Cocoon サンプル","image":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-square.png","length":"0:01","title":"確認用の音"} /-->

<!-- wp:playlist-track {"src":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-sample.wav","album":"表示テスト","artist":"Cocoon サンプル","image":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-square.png","length":"0:01","title":"もう一つの確認音"} /--></ol></figure>
<!-- /wp:playlist -->

sample-06621 / core/playlist　枠線の組み合わせ：style.border.color="#a82d46" / style.border.width="6px" / style.border.style="dotted"【コピー用コード】

<!-- wp:playlist {"style":{"border":{"width":"6px","style":"dotted","color":"#a82d46"}}} -->
<figure class="wp-block-playlist has-border-color" style="border-color:#a82d46;border-style:dotted;border-width:6px"><ol class="wp-block-playlist__tracklist wp-block-playlist__tracklist-show-numbers"><!-- wp:playlist-track {"src":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-sample.wav","album":"表示テスト","artist":"Cocoon サンプル","image":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-square.png","length":"0:01","title":"確認用の音"} /-->

<!-- wp:playlist-track {"src":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-sample.wav","album":"表示テスト","artist":"Cocoon サンプル","image":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-square.png","length":"0:01","title":"もう一つの確認音"} /--></ol></figure>
<!-- /wp:playlist -->

sample-06622 / core/playlist　extraBottomMargin：extraBottomMargin=""【コピー用コード】

<!-- wp:playlist -->
<figure class="wp-block-playlist"><ol class="wp-block-playlist__tracklist wp-block-playlist__tracklist-show-numbers"><!-- wp:playlist-track {"src":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-sample.wav","album":"表示テスト","artist":"Cocoon サンプル","image":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-square.png","length":"0:01","title":"確認用の音"} /-->

<!-- wp:playlist-track {"src":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-sample.wav","album":"表示テスト","artist":"Cocoon サンプル","image":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-square.png","length":"0:01","title":"もう一つの確認音"} /--></ol></figure>
<!-- /wp:playlist -->

sample-06623 / core/playlist　extraBottomMargin：extraBottomMargin="0"【コピー用コード】

<!-- wp:playlist {"extraBottomMargin":"0"} -->
<figure class="wp-block-playlist is-style-bottom-margin-0em has-bottom-margin"><ol class="wp-block-playlist__tracklist wp-block-playlist__tracklist-show-numbers"><!-- wp:playlist-track {"src":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-sample.wav","album":"表示テスト","artist":"Cocoon サンプル","image":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-square.png","length":"0:01","title":"確認用の音"} /-->

<!-- wp:playlist-track {"src":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-sample.wav","album":"表示テスト","artist":"Cocoon サンプル","image":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-square.png","length":"0:01","title":"もう一つの確認音"} /--></ol></figure>
<!-- /wp:playlist -->

sample-06624 / core/playlist　extraBottomMargin：extraBottomMargin="2"【コピー用コード】

<!-- wp:playlist {"extraBottomMargin":"2"} -->
<figure class="wp-block-playlist is-style-bottom-margin-2em has-bottom-margin"><ol class="wp-block-playlist__tracklist wp-block-playlist__tracklist-show-numbers"><!-- wp:playlist-track {"src":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-sample.wav","album":"表示テスト","artist":"Cocoon サンプル","image":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-square.png","length":"0:01","title":"確認用の音"} /-->

<!-- wp:playlist-track {"src":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-sample.wav","album":"表示テスト","artist":"Cocoon サンプル","image":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-square.png","length":"0:01","title":"もう一つの確認音"} /--></ol></figure>
<!-- /wp:playlist -->

sample-06625 / core/playlist　extraBottomMargin：extraBottomMargin="10"【コピー用コード】

<!-- wp:playlist {"extraBottomMargin":"10"} -->
<figure class="wp-block-playlist is-style-bottom-margin-10em has-bottom-margin"><ol class="wp-block-playlist__tracklist wp-block-playlist__tracklist-show-numbers"><!-- wp:playlist-track {"src":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-sample.wav","album":"表示テスト","artist":"Cocoon サンプル","image":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-square.png","length":"0:01","title":"確認用の音"} /-->

<!-- wp:playlist-track {"src":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-sample.wav","album":"表示テスト","artist":"Cocoon サンプル","image":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-square.png","length":"0:01","title":"もう一つの確認音"} /--></ol></figure>
<!-- /wp:playlist -->

sample-06626 / core/playlist　extraBottomMargin：extraBottomMargin="20"【コピー用コード】

<!-- wp:playlist {"extraBottomMargin":"20"} -->
<figure class="wp-block-playlist is-style-bottom-margin-20em has-bottom-margin"><ol class="wp-block-playlist__tracklist wp-block-playlist__tracklist-show-numbers"><!-- wp:playlist-track {"src":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-sample.wav","album":"表示テスト","artist":"Cocoon サンプル","image":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-square.png","length":"0:01","title":"確認用の音"} /-->

<!-- wp:playlist-track {"src":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-sample.wav","album":"表示テスト","artist":"Cocoon サンプル","image":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-square.png","length":"0:01","title":"もう一つの確認音"} /--></ol></figure>
<!-- /wp:playlist -->

sample-06627 / core/playlist　組み合わせ：濃い背景と白い文字【コピー用コード】

<!-- wp:playlist {"backgroundColor":"key-color","textColor":"white","fontSize":"large"} -->
<figure class="wp-block-playlist has-white-color has-key-color-background-color has-text-color has-background has-large-font-size"><ol class="wp-block-playlist__tracklist wp-block-playlist__tracklist-show-numbers"><!-- wp:playlist-track {"src":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-sample.wav","album":"表示テスト","artist":"Cocoon サンプル","image":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-square.png","length":"0:01","title":"確認用の音"} /-->

<!-- wp:playlist-track {"src":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-sample.wav","album":"表示テスト","artist":"Cocoon サンプル","image":"https://balthasar.xsrv.jp/wp-content/uploads/2026/09/cocoon-block-samples-20260909-square.png","length":"0:01","title":"もう一つの確認音"} /--></ol></figure>
<!-- /wp:playlist -->