投稿として安全に表示するため、一覧の参照先は既存の「マークアップ」カテゴリーの記事6件に限定しています。絞り込み条件を含む元の設定例は統合原本に保持しています。

全種類の基本形を確認するページです。各ブロックの設定変更例は、「ブロックサンプル」カテゴリーの投稿として公開しています。

左カラム / cocoon-blocks/column-left

中央カラム / cocoon-blocks/column-center

右カラム / cocoon-blocks/column-right

2カラム / cocoon-blocks/column-2

3カラム / cocoon-blocks/column-3

マイクロバルーン / cocoon-blocks/micro-balloon

マイクロバルーン / cocoon-blocks/micro-balloon-1

吹き出し / cocoon-blocks/balloon-box

最初期の吹き出しはサイトの吹き出し設定を保存時に参照します。実サイトの設定を選択して確認してください。

<!-- wp:cocoon-blocks/balloon-box {"content":"サンプルの文章"} -->
<div class="wp-block-cocoon-blocks-balloon-box speech-wrap sb-id-1 sbs-stn sbp-l sbis-undefined cf block-box"><div class="speech-person"><figure class="speech-icon"><img src="https://balthasar.xsrv.jp/wp-content/themes/cocoon-master/images/man.png" alt="" class="speech-icon-image"/></figure><div class="speech-name">サンプルの文章</div></div><div class="speech-balloon"><!-- wp:paragraph -->
<p>春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cocoon-blocks/balloon-box -->

吹き出し / cocoon-blocks/balloon-box-1

旧吹き出しは保存時にサイトの吹き出し設定を参照します。実サイトで吹き出しを選び直してから確認してください。

<!-- wp:cocoon-blocks/balloon-box-1 {"name":"案内役"} -->
<div class="wp-block-cocoon-blocks-balloon-box-1 speech-wrap sb-id-1 sbs-stn sbp-l sbis-cb cf block-box"><div class="speech-person"><figure class="speech-icon"><img src="https://balthasar.xsrv.jp/wp-content/themes/cocoon-master/images/man.png" alt="" class="speech-icon-image"/></figure><div class="speech-name">案内役</div></div><div class="speech-balloon"><!-- wp:paragraph -->
<p>春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cocoon-blocks/balloon-box-1 -->

吹き出し / cocoon-blocks/balloon-box-2

吹き出しEX / cocoon-blocks/balloon-ex-box

旧拡張吹き出しは保存時にサイトの吹き出し設定を参照します。実サイトで吹き出しを選び直してから確認してください。

<!-- wp:cocoon-blocks/balloon-ex-box {"name":"案内役","icon":"https://balthasar.xsrv.jp/wp-content/themes/cocoon-master/images/man.png"} -->
<div class="wp-block-cocoon-blocks-balloon-ex-box speech-wrap sb-id-1 sbs-stn sbp-l sbis-cb cf block-box"><div class="speech-person"><figure class="speech-icon"><img src="https://balthasar.xsrv.jp/wp-content/themes/cocoon-master/images/man.png" alt="" class="speech-icon-image"/></figure><div class="speech-name">案内役</div></div><div class="speech-balloon"><!-- wp:paragraph -->
<p>春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cocoon-blocks/balloon-ex-box -->

白抜きボックス / cocoon-blocks/blank-box

タブボックス / cocoon-blocks/tab-box

トグルボックス / cocoon-blocks/toggle-box

見出しボックス / cocoon-blocks/caption-box

タブ見出しボックス / cocoon-blocks/tab-caption-box

ラベルボックス / cocoon-blocks/label-box

ボタン / cocoon-blocks/button

囲みボタン / cocoon-blocks/button-wrap

アイコンボックス / cocoon-blocks/icon-box

案内ボックス / cocoon-blocks/info-box

白抜きボックス / cocoon-blocks/blank-box-1

付箋風ボックス / cocoon-blocks/sticky-box

タブボックス / cocoon-blocks/tab-box-1

吹き出し / cocoon-blocks/balloon-ex-box-1

ブログカード / cocoon-blocks/blogcard

ボタン / cocoon-blocks/button-1

囲みボタン / cocoon-blocks/button-wrap-1

アコーディオン（トグル） / cocoon-blocks/toggle-box-1

検索案内 / cocoon-blocks/search-box

タイムライン / cocoon-blocks/timeline

タイムラインアイテム / cocoon-blocks/timeline-item

アイコンリスト / cocoon-blocks/iconlist-box

FAQ / cocoon-blocks/faq

ランキング / cocoon-blocks/ranking

テンプレート / cocoon-blocks/template

ボックスメニュー / cocoon-blocks/box-menu

広告 / cocoon-blocks/ad

プロフィール / cocoon-blocks/profile

新着記事 / cocoon-blocks/new-list

人気記事 / cocoon-blocks/popular-list

新着情報 / cocoon-blocks/info-list

ナビカード / cocoon-blocks/navicard

タブ / cocoon-blocks/tab

タブアイテム / cocoon-blocks/tab-item

CTA / cocoon-blocks/cta

レーダーチャート / cocoon-blocks/radar

キャンペーン / cocoon-blocks/campaign

ログインユーザー限定 / cocoon-blocks/login-user-only

Amazon商品リンク / cocoon-blocks/amazon-product-link

ブロックの検索画面で商品を選択してください。Amazonの設定と実在する商品データが必要です。各設定例は商品選択後に適用します。

<!-- wp:cocoon-blocks/amazon-product-link {"title":"サンプルのタイトル"} /-->

楽天商品リンク / cocoon-blocks/rakuten-product-link

ブロックの検索画面で商品を選択してください。楽天の設定と実在する商品データが必要です。各設定例は商品選択後に適用します。

<!-- wp:cocoon-blocks/rakuten-product-link {"title":"サンプルのタイトル"} /-->

見出しボックス / cocoon-blocks/caption-box-1

タブ見出しボックス / cocoon-blocks/tab-caption-box-1

ラベルボックス / cocoon-blocks/label-box-1

マイクロバルーン / cocoon-blocks/micro-balloon-2

マイクロテキスト / cocoon-blocks/micro-text

段落 / core/paragraph

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

画像 / core/image

見出し / core/heading

季節のたよりと暮らしの記録

ギャラリー / core/gallery

リスト / core/list

• 身の回りを整える
• 日々の出来事を記録する
• 次の予定を考える

リスト項目 / core/list-item

• 季節の野菜を取り入れる

引用 / core/quote

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

表示確認用の架空の文章

アコーディオン / core/accordion

アコーディオン項目 / core/accordion-item

アコーディオン見出し / core/accordion-heading

アコーディオンパネル / core/accordion-panel

アーカイブ / core/archives

• 2026年9月
• 2026年8月
• 2026年7月
• 2026年6月
• 2026年5月
• 2026年4月
• 2026年3月
• 2026年2月
• 2026年1月
• 2025年12月
• 2025年11月
• 2025年10月
• 2025年9月
• 2025年8月
• 2025年7月
• 2025年6月
• 2025年5月
• 2025年4月
• 2025年3月
• 2025年2月
• 2025年1月
• 2023年9月
• 2023年4月
• 2023年3月
• 2020年1月
• 2019年12月
• 2019年9月
• 2019年5月
• 2018年11月
• 2018年8月
• 2018年6月
• 2017年4月
• 2016年8月
• 2016年6月
• 2015年9月
• 2014年7月
• 2014年6月
• 2014年5月
• 2013年4月
• 2013年1月
• 2012年3月
• 2012年1月
• 2011年3月
• 2010年10月
• 2010年9月
• 2010年8月
• 2010年7月
• 2010年6月
• 2010年5月
• 2010年4月
• 2010年3月
• 2010年2月
• 2010年1月
• 2009年10月
• 2009年9月
• 2009年8月
• 2009年7月
• 2009年6月
• 2009年5月
• 2008年4月
• 2008年1月

音声 / core/audio

ボタン / core/button

ボタンのグループ / core/buttons

カレンダー / core/calendar

カテゴリー一覧 / core/categories

• Uncategorized
• あさひ
• あさやけ
• いろは
• うえの
• えいご
• おおさかカテゴリーとしてウィジェットやラベル等で
• かわせ
• きって
• くらぶ
• けしき
• こども
• さくら
• しんぶん
• すずめ
• せかい
• そろばん
• ひ孫カテゴリー
• ほげ A
• アメリカ
• イタリア
• ウクライナ
• エジプト
• オーストラリア
• カテゴリー 1
• カテゴリー 2
• カテゴリー 3
• カテゴリー A
• カテゴリー B
• カテゴリー C
• カナダ
• キューバ
• クロアチア
• ケニア
• コスタリカ
• コーヒー
• サブ
• チャンピオンシップ
• テンプレート
• ブログロール
• ブロックサンプル
• マークアップ
• メディア
• 一件のみのカテゴリ
• 北海道
• 墾田永年私財法
• 子カテゴリー 01
• 子カテゴリー 02
• 子カテゴリー 03
• 子カテゴリー 04
• 子カテゴリー 05
• 孫カテゴリー
• 実習
• 宮城
• 山形
• 岩手
• 平等院鳳凰堂
• 建武の新政
• 征夷大将軍
• 御家人
• 応仁の乱
• 懲らしめる
• 投稿フォーマット
• 日記
• 未公開
• 未分類
• 栃木
• 極端な例
• 気が進まない
• 消毒
• 福島
• 秋田
• 移行プラグイン
• 群馬
• 茨城
• 親ほげ
• 親カテゴリー
• 購入
• 配置
• 除外
• 青森

コード / core/code

// 名前を受け取り、あいさつ文を返します。
function greet(name) {
  return "こんにちは、" + name + "さん";
}

カラム内の列 / core/column

カラム / core/columns

カバー / core/cover

詳細 / core/details

詳細を開いて確認する

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

埋め込み / core/embed

対象サービスの公開URLを指定して埋め込みを確定してください。各サービスのURLと外部応答が必要なため、コピー用コードとして収録しています。

<!-- wp:embed {"url":"https://example.com/replace-with-public-media-url","type":"rich","providerNameSlug":"wordpress"} -->
<figure class="wp-block-embed is-type-rich is-provider-wordpress wp-block-embed-wordpress"><div class="wp-block-embed__wrapper">
https://example.com/replace-with-public-media-url
</div><figcaption class="wp-element-caption">公開URLを指定して確認してください</figcaption></figure>
<!-- /wp:embed -->

ファイル / core/file

グループ / core/group

カスタムHTML / core/html

HTMLで書いた案内

強調の例：大切なお知らせ

場所

サンプル会場

数式 / core/math

最新のコメント / core/latest-comments

1. 

   コメント

2. 

   あああ

3. 

   aaaaaaaaa

最新の投稿 / core/latest-posts

• マークアップ: HTML タグとフォーマット
• マークアップ: 画像の配置
• マークアップ: テキスト配置

メディアとテキスト / core/media-text

続きを読む / core/more

別の確認用投稿で、一覧の抜粋と個別ページの本文を比較してください。

<!-- wp:more {"customText":"続きを読む"} -->
<!--more 続きを読む-->
<!-- /wp:more -->

改ページ / core/nextpage

このコードを別の確認用ページへ貼り付け、前後に段落を置いてページ分割を確認してください。

<!-- wp:nextpage -->
<!--nextpage-->
<!-- /wp:nextpage -->

固定ページリスト / core/page-list

• aaaaaaaa
• About
• Forum
• サンプルページ
• サンプルページ
• パスワード保護固定ページ
• フロントページ
• フロントページページ
• ブログ
• このサイトについて
  • ページマークアップ
  • 固定ページ: 画像の配置
  • フロートのクリア
  • コメントのついたページ
  • コメントが無効化された固定ページ
• レベル1
  • レベル 2a
  • レベル 2b
  • レベル2
    • レベル 3
      • レベル 3a
      • レベル 3b
• 文章例ページ
• ページ A
• ページ B

固定ページリスト項目 / core/page-list-item

固定ページ一覧から生成される項目です。実在する固定ページを作り、親の固定ページリストで確認してください。

<!-- wp:page-list-item /-->

パターン参照 / core/pattern

登録済みパターンのslugを指定して、対応するテンプレートで使用してください。

<!-- wp:pattern {"slug":"実際のパターンのスラッグ"} /-->

プレイリスト / core/playlist

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

<!-- 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 -->

プレイリストの曲 / core/playlist-track

親のプレイリスト内でメディアライブラリの音声を選択し、実在するIDを設定してください。同梱のsample.wavを登録すると確認できます。

<!-- 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":"確認用の音"} /-->

整形済みテキスト / core/preformatted

商品名       数量    単価
りんご         2     180
みかん         3     120

プルクオート / core/pullquote

小さな工夫を積み重ねて、暮らしを少しずつ整える。

サンプルの言葉

同期パターン / core/block

同期パターンを作成し、その実在するref（投稿ID）を設定してからコピー用コードを使用してください。

<!-- wp:block /-->

RSS / core/rss

• WordPress 7.1.3 Maintenance and Security Release
• WordPress 7.1.2 Release
• WordPress Takes Its Turn Leading the Open Website Alliance

検索 / core/search

サイト内を検索

検索

区切り / core/separator

---

ショートコード / core/shortcode

ソーシャルリンク / core/social-link

• WordPress

ソーシャルアイコン / core/social-links

• WordPress
• メール

スペーサー / core/spacer

表 / core/table

項目	内容	備考
春	やわらかな色合い	短い文章
夏	長い文章が複数行へ折り返される場合の表示確認です。	表示を確認
秋	落ち着いた配色	右寄せも確認

タブ / core/tabs

タブの見出し一覧 / core/tab-list

タブのパネル一覧 / core/tab-panels

タブの内容 / core/tab-panel

タグクラウド / core/tag-cloud

8ビット aside Codex css FTW html jetpack twitter videopress WordPress wordpress.tv アライメント カテゴリー ギャラリー コメント コンテンツ ショートコード タイトル タイル状 チャット テンプレート ファン マークアップ リンク レイアウト 動画 埋め込み 字幕 引用 投稿フォーマット 抜粋 改ページ 書式化 極端な例 標準 母船 注目の画像 状態 画像 目に見えない 続きを読む 自慢 記事 読みやすさ 音声

旧テキストカラム / core/text-columns

詩 / core/verse

朝の光が
静かな机を照らす
今日の一歩をここから

動画 / core/video

脚注 / core/footnotes

別の確認用ページで段落の文字を選び、脚注を追加してください。脚注本文は投稿メタデータにも保存されるため、本文ソースだけでは復元できません。

<!-- wp:footnotes /-->

ナビゲーション / core/navigation

ナビゲーションリンク / core/navigation-link

サブメニュー / core/navigation-submenu

サイトロゴ / core/site-logo

サイトタイトル / core/site-title

Test Server

サイトのキャッチフレーズ / core/site-tagline

Just another WordPress site

クエリループ / core/query

テンプレートパーツ / core/template-part

ブロックテーマのサイトエディターで実在するslugとthemeを設定します。Cocoonの固定ページ本文だけではテンプレートパーツを作成できません。

<!-- wp:template-part {"slug":"header","theme":"実際のブロックテーマ名","tagName":"header"} /-->

アバター / core/avatar

投稿タイトル / core/post-title

WordPress・Cocoon ブロックサンプル（基本形）

投稿の抜粋 / core/post-excerpt

アイキャッチ画像 / core/post-featured-image

投稿本文 / core/post-content

別の投稿を参照するテンプレートで確認します。この比較ページ自身を参照すると本文が再帰的になるため、本文には実行コードを置きません。

<!-- wp:post-content /-->

投稿者 / core/post-author

投稿者名 / core/post-author-name

コメント数 / core/post-comments-count

コメントへのリンク / core/post-comments-link

投稿日 / core/post-date

投稿のカテゴリー・タグ / core/post-terms

前後の投稿リンク / core/post-navigation-link

投稿テンプレート / core/post-template

読了時間 / core/post-time-to-read

投稿のページ送り / core/query-pagination

次の投稿ページ / core/query-pagination-next

投稿ページ番号 / core/query-pagination-numbers

前の投稿ページ / core/query-pagination-previous

該当する投稿がない場合 / core/query-no-results

検索結果件数 / core/query-total

続きを読むリンク / core/read-more

記事を読む: WordPress・Cocoon ブロックサンプル（基本形）

コメント / core/comments

コメント投稿者名 / core/comment-author-name

コメント本文 / core/comment-content

コメント日時 / core/comment-date

コメント編集リンク / core/comment-edit-link

コメント返信リンク / core/comment-reply-link

コメントテンプレート / core/comment-template

コメント見出し / core/comments-title

コメントのページ送り / core/comments-pagination

次のコメントページ / core/comments-pagination-next

コメントページ番号 / core/comments-pagination-numbers

前のコメントページ / core/comments-pagination-previous

コメントフォーム / core/post-comments-form

ホームリンク / core/home-link

アイコン / core/icon

ログイン・ログアウト / core/loginout

ナビゲーションを閉じる / core/navigation-overlay-close

サイトエディターのナビゲーションオーバーレイ内で、閉じる操作を確認してください。

<!-- wp:navigation-overlay-close /-->

タームの投稿数 / core/term-count

タームの説明 / core/term-description

ターム名 / core/term-name

タームのクエリ / core/terms-query

タームテンプレート / core/term-template

クエリタイトル / core/query-title

投稿者のプロフィール / core/post-author-biography

パンくずリスト / core/breadcrumbs

クラシック / core/freeform

クラシックブロックの確認用ソースです。別の確認用ページへ貼り付け、クラシック表示とブロックへの変換を確認します。

<p>クラシック形式の文章です。</p>
<ul>
<li>最初の項目</li>
<li>次の項目</li>
</ul>

旧ウィジェット / core/legacy-widget

ウィジェット編集画面で、実在するウィジェットを選択して確認してください。

<!-- wp:legacy-widget /-->

ウィジェットグループ / core/widget-group

ウィジェット編集画面のウィジェットエリアへコピーして確認してください。

<!-- wp:widget-group -->
<h2 class="widget-title"></h2><div class="wp-widget-group__inner-blocks"><!-- wp:paragraph -->
<p>春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。</p>
<!-- /wp:paragraph --></div>
<!-- /wp:widget-group -->

ブログカード（埋め込み） / cocoon-blocks/embed-blogcard

マークアップ: HTML タグとフォーマット

見出し見出し壱見出し弐見出し参見出し四見出し五見出し六引用 (Blockquote) テスト一行の引用。ハングリーであれ、愚かであれ。cite 参照を含む複数行の引用。これは言語みたいなものだ。アルファベットすなわち音階を学び、文すなわちコ…

balthasar.xsrv.jp

2013.01.11