まとめ記事やサービス比較の記事は、キュレーションメディアの中心になるページです。ところが、書き手ごとに項目の並べ方が違ったり、比較表がスマートフォンで画面からはみ出して読めなかったりすると、せっかくの情報が伝わりません。
「まとめ記事の番号付きリストや比較表を、毎回きれいに同じ形で作れるようにしたい。独自のブロックを開発しないと無理？」
結論から言うと、独自ブロックを作らなくても、WordPress 標準のブロックを組み合わせた「パターン」と、表ブロックに見た目を追加する「ブロックスタイル」で十分に実現できます。必要なのは子テーマの PHP ファイル2つと CSS ファイル2つ、functions.php への数十行の追加だけです。
前回の第4回では、引用文と出典をセットで入力する「引用元カード」ブロックをプラグインに作りました。第5回の今回は、まとめ記事の本文で使う2つの部品を子テーマに追加します。
今回のゴール：まとめリストと比較表を「選ぶだけ」にする
完成すると、書き手はエディターのパターン一覧（カテゴリ「キュレーション」）から次の2つを挿入できます。
| 部品 | 中身 | 実装方法 |
|---|---|---|
| まとめリスト | 見出し・要約・編集部のコメント・出典を1項目とし、3項目を並べた番号付きリスト | パターン＋CSS（番号は自動） |
| 比較表 | 1列目に比較軸を置いた表と、確認日を書くキャプション | パターン＋表ブロックのスタイル「比較」 |
比較表のスタイル「比較」は、パターンを使わずに挿入した普通の表ブロックにも、右側の「スタイル」から後付けできます。
独自ブロックではなくパターンとブロックスタイルを選んだ理由
第4回の引用元カードは、入力値の検証や表示ルールの一元管理が必要だったため、独自ブロック（プラグイン）にしました。今回の2つは事情が違います。
- 中身は見出し・段落・表という標準ブロックで足りる：特別な入力欄や検証は不要で、必要なのは「決まった並び」と「見た目」だけです。
- 見た目はテーマの責務：第0回で決めたとおり、見た目は子テーマ、テーマを替えても残すべき機能はプラグインに置きます。まとめリストや比較表の中身は標準ブロックなので、テーマを替えても文章と表は残り、見た目だけが新しいテーマのものになります。
- ビルドが要らない：PHP と CSS だけなので、Node.js の環境がなくても修正できます。
使い分けの目安は「入力値の検証や、表示の一括変更が必要なら独自ブロック。並びと見た目だけならパターンとブロックスタイル」です。
今回追加・変更したファイル
すべて子テーマ wp-content/themes/curation-child/ 配下です。
| ファイル | 内容 |
|---|---|
patterns/matome-list.php | まとめリストのパターン（新規） |
patterns/comparison-table.php | 比較表のパターン（新規） |
assets/css/matome-list.css | まとめリストの番号・区切り線など（新規） |
assets/css/comparison-table.css | スタイル「比較」の見た目と横スクロール対応（新規） |
functions.php | ブロックスタイルの登録と、ブロックごとの CSS の読み込み |
style.css | バージョン 0.5.0 |
まとめリストのパターンを作る
まとめリストは、グループブロックの中に「項目」のグループを3つ並べた構造です。
patterns/matome-list.php（編集部のコメント欄の部分を省略）
<?php
/**
* Title: まとめリスト（番号付き・3項目）
* Slug: curation-child/matome-list
* Categories: curation
* Keywords: まとめ, リスト, 番号
* Description: 見出し・要約・編集部のコメント・出典を1項目とする番号付きリスト。番号は表示時に自動で振られる。
*
* @package Curation_Child
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
$curation_child_items = 3;
?>
<!-- wp:group {"className":"curation-matome-list","layout":{"type":"default"}} -->
<div class="wp-block-group curation-matome-list">
<?php for ( $curation_child_i = 0; $curation_child_i < $curation_child_items; $curation_child_i++ ) : ?>
<!-- wp:group {"className":"curation-matome-item","layout":{"type":"default"}} -->
<div class="wp-block-group curation-matome-item">
<!-- wp:heading {"level":3,"className":"curation-matome-item__title","placeholder":"項目の見出し（番号は自動で付きます）"} -->
<h3 class="wp-block-heading curation-matome-item__title"></h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"placeholder":"要約：出典の内容を自分の言葉で2〜3文にまとめる（文章をそのまま写さない）"} -->
<p></p>
<!-- /wp:paragraph -->
<!-- （省略：編集部のコメント欄のグループ。後述） -->
<!-- wp:paragraph {"className":"curation-matome-item__source","textColor":"accent-4","fontSize":"small","placeholder":"出典：出典名（URL）／確認日：YYYY年M月D日"} -->
<p class="curation-matome-item__source has-accent-4-color has-text-color has-small-font-size"></p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->
<?php endfor; ?>
</div>
<!-- /wp:group -->パターンファイルは PHP なので、同じ構造の項目を for 文で繰り返して出力できます。項目数を変えたいときは $curation_child_items を変えるだけです。
1項目の中身は、第3回のスターターパターンと同じく「要約」と「編集部のコメント」を分けています。コメント欄は背景色と左の線で目立たせ、「編集部のコメント」というラベルを固定の文字で入れました。
patterns/matome-list.php（編集部のコメント欄の部分）
<!-- wp:group {"className":"curation-matome-item__comment","backgroundColor":"accent-5","style":{"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"var:preset|spacing|40","right":"var:preset|spacing|40"}}},"layout":{"type":"default"}} -->
<div class="wp-block-group curation-matome-item__comment has-accent-5-background-color has-background" style="padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--40)">
<!-- wp:paragraph {"className":"curation-matome-item__comment-label","fontSize":"small"} -->
<p class="curation-matome-item__comment-label has-small-font-size"><strong>編集部のコメント</strong></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"placeholder":"この情報をどう読むか、誰に役立つか、注意点は何か"} -->
<p></p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->まとめ記事の価値は、情報を並べることではなく、編集部の視点を加えることにあります。コメント欄を型として用意しておくと、「要約だけの項目」がレビューで一目で分かるようになります。
出典欄は、参照した資料名・URL・確認日を書く1行の段落にしました。原文をそのまま引用するときは、この欄の代わりに第4回の引用元カードを使います。パターン（テーマ）の中にプラグインのブロックを直接入れなかったのは、プラグインを無効にしたときにパターンが壊れないようにするためです。
番号は CSS カウンターで自動的に振る
項目の番号を見出しの文字として手入力すると、項目を並べ替えたり途中に追加したりしたときに、書き手が番号を振り直す必要があります。そこで、番号は CSS カウンター（＝要素の出現順に数を数えて表示する CSS の機能）で表示します。
assets/css/matome-list.css（抜粋）
.curation-matome-list {
counter-reset: curation-matome;
}
.curation-matome-item {
counter-increment: curation-matome;
padding-block: var(--wp--preset--spacing--40);
border-top: 1px solid var(--wp--preset--color--accent-6);
}
.curation-matome-item__title::before {
content: counter(curation-matome) ". ";
color: var(--wp--preset--color--brand);
}リスト全体（.curation-matome-list）で数をリセットし、項目（.curation-matome-item）が出てくるたびに1ずつ増やし、見出しの前に「1. 」「2. 」と表示します。エディターで項目のグループを複製・並べ替えしても、番号は自動で正しくなります。
📰 出典：MDN Web Docs「CSS カウンターの使用」
比較表：表ブロックにスタイル「比較」を追加する
比較表は、標準の表ブロック（core/table）をそのまま使い、見た目の選択肢として「比較」を追加します。これがブロックスタイルです。登録すると、表ブロックを選んだときの右側の「スタイル」に「デフォルト」「ストライプ」と並んで「比較」が表示され、選ぶと表の外側の figure 要素に is-style-comparison という class が付きます。
functions.php（追加部分）
function curation_child_register_block_styles() {
register_block_style(
'core/table',
array(
'name' => 'comparison',
'label' => '比較',
)
);
}
add_action( 'init', 'curation_child_register_block_styles' );
function curation_child_enqueue_block_styles() {
$theme = wp_get_theme();
$version = $theme->get( 'Version' );
$styles = array(
'core/table' => 'comparison-table',
'core/group' => 'matome-list',
);
foreach ( $styles as $block_name => $file ) {
wp_enqueue_block_style(
$block_name,
array(
'handle' => 'curation-child-' . $file,
'src' => get_theme_file_uri( 'assets/css/' . $file . '.css' ),
'path' => get_theme_file_path( 'assets/css/' . $file . '.css' ),
'ver' => $version,
)
);
}
}
add_action( 'init', 'curation_child_enqueue_block_styles' );（実ファイルでは各関数に説明のコメントを付けています）
📰 出典：WordPress Developer Resources「register_block_style()」
CSS の読み込みには wp_enqueue_block_style() を使いました。この関数で登録した CSS は、そのブロックがページで使われたときだけ出力され、エディターにも読み込まれます。比較表の CSS は表を含む記事だけで読み込まれるので、ほかのページの表示を重くしません。
📰 出典：WordPress Developer Resources「wp_enqueue_block_style()」
まとめリストの CSS はグループブロックに紐づけています。グループブロックはテンプレートでも使われているためほぼ全ページで読み込まれますが、中身は数行なので影響はごく小さいと判断しました（小さい CSS は WordPress が HTML 内に直接埋め込みます）。
比較表のパターン
patterns/comparison-table.php（ファイル冒頭のヘッダーコメントと直接アクセス防止の処理を省略）
<!-- wp:paragraph {"placeholder":"比較の目的と、比較軸を選んだ理由を書く（例：社内で使う前提で、公式サイトで確認できる項目に絞って比較）"} -->
<p></p>
<!-- /wp:paragraph -->
<!-- wp:table {"hasFixedLayout":false,"className":"is-style-comparison"} -->
<figure class="wp-block-table is-style-comparison"><table><thead><tr><th>比較軸</th><th>候補A</th><th>候補B</th><th>候補C</th></tr></thead><tbody><tr><th scope="row">比較軸1（例：料金の考え方）</th><td></td><td></td><td></td></tr><tr><th scope="row">比較軸2（例：無料で試せる範囲）</th><td></td><td></td><td></td></tr><tr><th scope="row">比較軸3（例：サポート窓口）</th><td></td><td></td><td></td></tr><tr><th scope="row">向いている読者</th><td></td><td></td><td></td></tr></tbody></table><figcaption class="wp-element-caption">確認日：YYYY年M月D日時点。各公式サイトの公開情報をもとに編集部が作成。最新の情報は公式サイトで確認してください。</figcaption></figure>
<!-- /wp:table -->ポイントは次の3つです。
- 表の前に「比較の目的と比較軸を選んだ理由」を書く段落を置く：比較軸の選び方で結論は変わります。理由を書いておくと、読者が自分の状況に当てはまるか判断でき、特定の候補に有利な比較になっていないかをレビューでも確認できます。
- 1列目は見出しセル（
<th scope="row">）：各行が何の比較なのかを、スクリーンリーダー（＝画面の読み上げソフト）にも伝えられます。 - キャプションに確認日：比較表は情報が古くなりやすい部品です。いつ時点の情報かを表のすぐ下に固定の形で書きます。
最後の行は「向いている読者」にしました。候補に順位を付けるのではなく、「どんな読者に向いているか」で締めくくると、優良誤認（＝実際より優れていると誤解させる表示）につながる断定を避けやすくなります。
スマートフォンで表だけを横スクロールさせる
列の多い比較表は、スマートフォンの幅に収めようとすると1セルに数文字しか入らず、読めなくなります。そこで、本文の幅はそのままに、表だけを横スクロールさせます。
WordPress の表ブロックは、もともと外側の figure に overflow-x: auto（＝はみ出した分を横スクロールにする指定）が付いています。そこで、スタイル「比較」では各列に最小幅を与え、画面が狭いときは表が figure からはみ出して横スクロールになるようにしました。
assets/css/comparison-table.css（抜粋）
.wp-block-table.is-style-comparison td {
min-width: 9rem;
}
/* 1列目（比較軸）は横スクロールしても見えるように固定する */
.wp-block-table.is-style-comparison tr > :first-child {
position: sticky;
left: 0;
z-index: 1;
width: 7rem;
min-width: 7rem;
background-color: var(--wp--preset--color--accent-5);
font-weight: 700;
}
/* キャプション（確認日）は表を横にスクロールしても左端に残す */
.wp-block-table.is-style-comparison figcaption {
position: sticky;
left: 0;
color: var(--wp--preset--color--accent-4);
font-size: var(--wp--preset--font-size--small);
}1列目には position: sticky（＝スクロールしても指定の位置に留まる指定）を付け、横にスクロールしても比較軸の列が左端に残るようにしています。どの行が何の比較かを見失わずに済みます。セルの色は第1回の theme.json で定義したトークン（accent-1、accent-5、brand）を使っています。
動作確認の方法
第0回・第2回の手順（setup.sh・seed-terms.sh）の後、次の点を確認しました（筆者の環境で確認済みです）。
- REST API（
/wp-json/wp/v2/block-patterns/patterns、管理者で認証）にcuration-child/matome-listとcuration-child/comparison-tableがカテゴリcurationで登録されている - 2つのパターンの中身をエディターで読み込むと、すべてのブロックが「有効」（＝ブロックの検証エラーが出ない）と判定される
- 表ブロックのスタイルに「デフォルト」「ストライプ」「比較」の3つが表示される
- パターンで作った記事の HTML に
<figure class="wp-block-table is-style-comparison">が出る
curl -s http://localhost:8088/<記事のスラッグ>/ | grep -o '<figure class="wp-block-table is-style-comparison">'- 幅 375px（スマートフォン相当）で表示すると、ページ全体の横幅は 375px のまま（はみ出しなし）で、表の figure だけがスクロール可能になり、1列目と確認日のキャプションは左端に残る
- まとめリストの見出しの前に「1.」「2.」「3.」が表示される
- 比較表の CSS は表を含む記事にだけ出力され、表のない記事には出力されない
幅 375px の確認は、ヘッドレスブラウザ（画面を表示せずに動かすブラウザ）で表示幅を指定して行いました。ブラウザの開発者ツールでスマートフォン表示に切り替えても同じように確認できます。実機での確認はしていません。
つまずきやすい点
- パターンの HTML は手書きすると壊れやすい：ブロックのコメント内の設定（JSON）と HTML の class・style が一致しないと、エディターで「想定されていない、または無効なコンテンツが含まれている」という趣旨の警告が表示されます。エディターで組み立てたブロックを「コードエディター」でコピーしてからパターンに貼ると安全です。
- constrained レイアウトの余白に注意：グループブロックのレイアウトを「コンテンツ幅を使用」（constrained）にすると、
has-global-paddingという class が付き、CSS で指定した左右の余白が上書きされることがありました。今回は内側のグループをすべて通常のレイアウト（default）にし、余白はブロックの設定（style 属性）で指定しています。 - ブロックスタイルは1つしか選べない：「ストライプ」と「比較」を同時には使えません。組み合わせが必要なら、その見た目を持つスタイルを1つ作ります。
- 自動の番号は本文の文字ではない：CSS で表示した番号は、コピーしたテキストや検索結果の抜粋には含まれないことがあります。番号そのものに意味がある場合（ランキングの順位など）は、見出しの文字として書きます。
発注者向けメモ：比較表は「作った後の更新」まで決めて依頼する
まとめリストや比較表は、パターンとブロックスタイルで作れば開発工数は小さく済みます。一方で、比較表は公開後の更新を決めておかないと、古い情報がそのまま残り続けます。料金やプランは頻繁に変わるため、確認日が数年前の比較表は、かえって読者の判断を誤らせます。
開発会社に依頼するときは、次の点を決めておきましょう。
- 比較軸と確認日の書き方：比較軸をどう選ぶか、確認日をどこに書くかを編集ルールとして文書にする
- 更新の担当と周期：誰が、どのくらいの間隔で比較表の情報を見直すか（例：半年ごと、料金改定の発表時）
- スマートフォンでの見せ方：横スクロールにするか、縦に並べ替えるか。列数の上限を決めておくと表示の確認が楽になる
- ランキングとの違い：順位を付けない比較にするか、順位を付けるなら選定基準をどう示すか（第3回のランキングテンプレートと合わせて決める）
工数が増えるのは、比較表の中身をデータベースで一元管理して複数記事に表示したい、料金などを外部から自動で更新したい、といった場合です。まずは記事ごとの表で運用し、同じ表を何度も使うようになってから検討するのが無理のない進め方です。
打ち合わせでは、次のように聞いてみてください。
- 「比較表はスマートフォンでどう表示されますか？ 表示確認はどの画面幅で行いますか？」
- 「パターンを直した場合、既存の記事の表はどうなりますか？ 見た目だけの変更なら全記事に反映されますか？」
- 「比較表の情報が古くなっていないか、確認日から一覧で探す方法はありますか？」
まとめと次回予告
第5回では、まとめリストと比較表を、独自ブロックを作らずに用意しました。
- 並びと見た目だけで足りる部品は、パターンとブロックスタイルで作る
- まとめリストは「要約」と「編集部のコメント」を分け、番号は CSS カウンターで自動にする
- 比較表は標準の表ブロックにスタイル「比較」を追加し、1列目の比較軸と確認日のキャプションを固定する
wp_enqueue_block_style()で、CSS をそのブロックが使われるページとエディターにだけ読み込む- スマートフォンでは表だけを横スクロールにし、本文の幅ははみ出さない
次回は「著者・監修者プロフィールを表示する（E-E-A-T の考え方）」です。記事の書き手と監修者の情報を登録・表示する仕組みを作り、「誰が書いた記事か」を読者に示します。
この連載の記事一覧
この記事は連載「WordPressで作るキュレーションメディア」の1回です。連載のほかの回は次のとおりです（連載の一覧ページ）。
- 【WordPressで作るキュレーションメディア 第0回】キュレーションメディアの要件と「低品質まとめ」の教訓 ― Docker で WordPress 6.8 の土台を作る
- 【WordPressで作るキュレーションメディア 第1回】theme.json でデザイントークンを定義する（子テーマの基本）
- 【WordPressで作るキュレーションメディア 第2回】カテゴリ・タグ・「特集」― タクソノミー設計
- 【WordPressで作るキュレーションメディア 第3回】記事・まとめ・ランキングのテンプレートとパターン
- 【WordPressで作るキュレーションメディア 第4回】「引用元カード」ブロック ― 著作権法第32条の引用を仕組みで守る
- 【WordPressで作るキュレーションメディア 第5回】「まとめリスト」と「比較表」をパターンとブロックスタイルで作る（この記事）
- 【WordPressで作るキュレーションメディア 第6回】著者・監修者プロフィールを表示する（E-E-A-T の考え方）
- 【WordPressで作るキュレーションメディア 第7回】人気記事ランキングと関連記事を小さなプラグインで作る
- 【WordPressで作るキュレーションメディア 第8回】目次と構造化データ（JSON-LD: Article / BreadcrumbList / ItemList）
- 【WordPressで作るキュレーションメディア 第9回】OGP・SNS カードと「広告・PR表記」― ステマ規制への対応
- 【WordPressで作るキュレーションメディア 第10回】表示速度の改善 ― 画像サイズ・キャッシュ・計測
- 【WordPressで作るキュレーションメディア 第11回】権限・編集フロー・運用 ― 下書きレビュー、バックアップ、更新
コメント
コメント一覧 （1件）
[…] 前回の第5回では、まとめリストと比較表をパターンとブロックスタイルで作りました。第6回の今回は、著者・監修者のプロフィールを登録・表示する仕組みを作ります。 […]