ブロックテーマ（FSE）入門｜サイトエディターでデザインを組む手順

生徒

WordPressの管理画面に「サイトエディター」ってのが出てきたんですが、これ何ですか？ 今までのカスタマイザーと違うんですか？

ペン博士

ブロックテーマを使うと出てくる画面だね。ヘッダーもフッターもブロックで組むのが最大の違い。PHPを触らずにサイト全体を編集できる。今日は仕組みと手順を順番に見ていこう。

WordPressには現在、2種類のテーマがあります。従来型のクラシックテーマと、サイト全体をブロックで組むブロックテーマです。

ブロックテーマを有効化すると、管理画面に「サイトエディター」が現れ、ヘッダー・フッター・記事の並び方まで、記事を書くのと同じ操作で編集できるようになります。この仕組みがFSE（フルサイト編集）です。

この記事では両者の違いから始めて、サイトエディターの構成、テンプレートの編集手順、theme.jsonによる設定、既存サイトからの移行判断まで解説します。

• ブロックテーマとクラシックテーマの違い
• サイトエディターの5つの画面
• テンプレートとテンプレートパーツの関係
• ヘッダー・フッターを編集する手順
• 記事一覧の並びを変える（クエリループ）
• theme.jsonで色とサイズを一元管理する
• パターンで使い回す仕組み
• CSSの当て方と追加方法
• 既存サイトを移行すべきかの判断
• つまずきやすい点と対処

ブロックテーマとクラシックテーマの違い

見分け方は簡単です。管理画面の「外観」に「エディター」があればブロックテーマ、「カスタマイズ」があればクラシックテーマです。

重要なのはどちらが優れているという話ではないという点です。既存の資産や制作体制によって最適解が変わります。判断基準は後半で扱います。

サイトエディターの5つの画面

「外観 → エディター」を開くと、左側に5つのメニューが並びます。それぞれの役割を押さえておくと迷いません。

最初に触るべきは「スタイル」です。ここで色とフォントを決めておくと、以降の編集で選択肢として出てくるため、統一感が保てます。

テンプレートとテンプレートパーツの関係

ブロックテーマの構造を理解する鍵が、この2つの区別です。

• テンプレート：ページ全体の型。記事ページ・一覧ページ・404など、表示の種類ごとに存在する
• テンプレートパーツ：複数のテンプレートで使い回す部品。ヘッダー・フッター・サイドバーなど

my-block-theme/
├── style.css              # テーマ情報（従来と同じ）
├── theme.json             # 色・サイズなどの設定（中核）
├── templates/             # テンプレート
│   ├── index.html
│   ├── single.html        # 記事ページ
│   ├── archive.html       # 一覧ページ
│   ├── page.html          # 固定ページ
│   └── 404.html
└── parts/                 # テンプレートパーツ
    ├── header.html
    └── footer.html

従来のsingle.phpがsingle.htmlになったイメージです。中身はPHPではなくブロックを表すHTMLコメントで書かれています。

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->

<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
  <!-- wp:post-title {"level":1} /-->
  <!-- wp:post-featured-image /-->
  <!-- wp:post-content /-->
</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

この記述はサイトエディターで操作すれば自動生成されます。ファイルを直接書く必要はありませんが、構造を知っておくと不具合時に原因を追えます。

ヘッダー・フッターを編集する手順

最も需要が多い操作です。ロゴの差し替えからメニューの配置まで、この流れで行います。

1. 外観 → エディター を開く
2. 「パターン」→「テンプレートパーツ」→「ヘッダー」を選ぶ
3. 右上の鉛筆アイコンで編集モードに入る
4. ロゴ・メニュー・ボタンなどのブロックを配置する
5. 右上「保存」→ 変更対象を確認して保存

注意点は保存時のダイアログです。何を保存するかのチェックボックスが出るため、意図しない項目まで保存しないよう確認してください。テンプレートとスタイルを同時に変更している場合、両方にチェックが入ります。

ヘッダーを固定表示にする

ヘッダーのグループブロックを選択
 → 右サイドバーの「位置」→「粘着（Sticky）」を選ぶ

CSSを書かずに追従ヘッダーが作れます。ただし親のグループが「全幅」でないと選択肢が出ないことがあるため、配置の設定も確認してください。

記事一覧の並びを変える（クエリループ）

ブロックテーマで最も強力なのがクエリループブロックです。「どの記事を・何件・どう並べるか」をブロックの設定で指定できます。

<!-- wp:query {"query":{"perPage":6,"postType":"post","order":"desc","orderBy":"date"},
     "layout":{"type":"default"}} -->
<div class="wp-block-query">
  <!-- wp:post-template {"layout":{"type":"grid","columnCount":3}} -->
    <!-- wp:post-featured-image {"isLink":true,"aspectRatio":"16/9"} /-->
    <!-- wp:post-title {"isLink":true,"level":3} /-->
    <!-- wp:post-excerpt {"excerptLength":60} /-->
  <!-- /wp:post-template -->
  <!-- wp:query-pagination -->
    <!-- wp:query-pagination-previous /-->
    <!-- wp:query-pagination-numbers /-->
    <!-- wp:query-pagination-next /-->
  <!-- /wp:query-pagination -->
</div>
<!-- /wp:query -->

従来ならWP_QueryをPHPで書いていた処理です。コードを書かずに一覧を作れるのが、ブロックテーマ最大の実用的な利点といえます。

theme.jsonで色とサイズを一元管理する

ブロックテーマの中核となる設定ファイルです。ここに書いた値が、エディターの選択肢としてそのまま出てきます。

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 3,
  "settings": {
    "color": {
      "palette": [
        { "slug": "primary", "color": "#0ea5e9", "name": "メインカラー" },
        { "slug": "ink", "color": "#16202b", "name": "本文" },
        { "slug": "bg", "color": "#f6f8fa", "name": "背景" }
      ],
      "custom": false
    },
    "typography": {
      "fontSizes": [
        { "slug": "small", "size": "0.875rem", "name": "小" },
        { "slug": "medium", "size": "1rem", "name": "標準" },
        { "slug": "large", "size": "clamp(1.4rem, 1.1rem + 1.3vw, 2rem)", "name": "大" }
      ]
    },
    "layout": { "contentSize": "760px", "wideSize": "1200px" }
  },
  "styles": {
    "color": { "background": "var(--wp--preset--color--bg)",
               "text": "var(--wp--preset--color--ink)" },
    "typography": { "lineHeight": "1.8" }
  }
}

"custom": falseにするとカラーピッカーで自由な色を選べなくなります。ブランドカラー以外を使わせたくない案件では、この一行が効きます。

定義した値は自動でCSS変数として出力されるため、追加CSSからも参照できます。

.my-box {
  background-color: var(--wp--preset--color--primary);
  font-size: var(--wp--preset--font-size--large);
}

パターンで使い回す仕組み

よく使う組み合わせを「パターン」として保存すると、どのページでも呼び出せます。CTAや料金表など、繰り返し登場する部品に向きます。

• 同期パターン：1箇所を直すと全ページに反映される（旧・再利用ブロック）
• 非同期パターン：挿入後は個別に編集できる。ひな形として使う

<?php
/**
 * Title: お問い合わせCTA
 * Slug: my-theme/cta
 * Categories: call-to-action
 */
?>
<!-- wp:group {"backgroundColor":"bg","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-bg-background-color">
  <!-- wp:heading {"textAlign":"center"} -->
  <h2 class="has-text-align-center">まずは無料で相談する</h2>
  <!-- /wp:heading -->
  <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
  <div class="wp-block-buttons">
    <!-- wp:button -->
    <div class="wp-block-button"><a class="wp-block-button__link" href="/contact/">問い合わせる</a></div>
    <!-- /wp:button -->
  </div>
  <!-- /wp:buttons -->
</div>
<!-- /wp:group -->

patterns/フォルダにこのファイルを置くだけで、エディターのパターン一覧に表示されます。テーマに同梱できるため、納品後の運用でも使い回せます。

CSSの当て方と追加方法

ブロックテーマでもCSSは書けます。ただし優先順位を理解しておかないと、指定が効かず混乱します。

原則はtheme.jsonで決められることはCSSで書かないです。theme.jsonに書けばエディター上の見た目にも反映されますが、CSSだけだと編集画面と実際の表示がずれます。

既存サイトを移行すべきかの判断

結論から言うと、動いているクラシックテーマのサイトを急いで移行する必要はありません。判断材料を整理します。

なお、クラシックテーマが廃止される予定は現時点でありません。両者は並行してサポートされています。

つまずきやすい点と対処

導入時に高確率で出る疑問と、その解決方法です。

3つ目の「初期化」は覚えておく価値があります。テンプレートを編集して収拾がつかなくなっても、テーマの初期状態に戻せるため、思い切って試せます。

ブロックテーマの作り方（最小構成）

自作する場合、必要なファイルは驚くほど少なくて済みます。最小構成から始めて、必要に応じて足していきます。

必須は3ファイル

my-theme/
├── style.css          # テーマ情報を書くヘッダーコメントのみ
├── theme.json         # 設定
└── templates/
    └── index.html     # これが無いとテーマとして認識されない

/*
Theme Name: My Block Theme
Theme URI: https://example.com/
Author: 制作者名
Description: ブロックテーマの最小構成サンプル
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: my-theme
*/

<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
  <!-- wp:query {"query":{"perPage":10,"postType":"post"}} -->
  <div class="wp-block-query">
    <!-- wp:post-template -->
      <!-- wp:post-title {"isLink":true} /-->
      <!-- wp:post-excerpt /-->
    <!-- /wp:post-template -->
  </div>
  <!-- /wp:query -->
</main>
<!-- /wp:group -->

この3ファイルをwp-content/themes/に置けば、もうサイトエディターで編集できる状態になります。あとはエディター上で組み立て、必要になった時点でファイルへ書き出します。

エディターの変更をテーマに反映する

サイトエディターでの編集内容は、初期状態ではデータベースに保存されます。テーマファイル側へ書き出したい場合は、エクスポート機能を使います。

外観 → エディター → 右上のオプション（︙）→「書き出し」
 → ZIPがダウンロードされる（templates/ と parts/ が最新の状態で入る）

納品用のテーマにまとめるときや、Gitで管理したいときはこの手順を使います。データベース側の変更が残っていると、ファイルよりそちらが優先される点に注意してください。

よく使うブロックと役割

ブロックテーマで頻繁に使う「動的な」ブロックを整理します。記事を書くときのブロックとは別の系統です。

混同しやすいのが「見出し」と「投稿タイトル」です。前者は固定の文字を置くブロック、後者は表示中の記事名が自動で入るブロックです。テンプレートでは後者を使います。

<!-- ✗ テンプレートに固定の見出しを置くと、全記事で同じ文字になる -->
<!-- wp:heading -->
<h1>記事タイトル</h1>
<!-- /wp:heading -->

<!-- ○ 投稿タイトルブロックを使う -->
<!-- wp:post-title {"level":1} /-->

代表的なブロックテーマ

学習や検証に使いやすいテーマを挙げます。まずは公式テーマで構造を掴むのが近道です。

• Twenty Twenty-Four / Twenty Twenty-Five：WordPress公式。構造が素直で学習向き
• Ollie：パターンが豊富で、コーポレートサイトを組みやすい
• Blockbase系：クラシックテーマからの移行を意識した設計

公式テーマはtheme.jsonの書き方の見本にもなります。管理画面から有効化して、テンプレートとパーツの構成を実際に開いてみると理解が早まります。

制作フローの変化と分担

ブロックテーマを採用すると、制作の進め方そのものが変わります。どこが変わるのかを押さえておくと、見積もりや体制づくりを誤りません。

設計フェーズの比重が上がる

クラシックテーマではPHPで自由に組めたため、細部は実装しながら決められました。ブロックテーマではtheme.jsonで許可した範囲がそのまま制作の枠になるため、色・文字サイズ・余白の設計を先に固める必要があります。

クライアントに渡せる範囲が広がる

ヘッダーのバナー差し替え、トップの記事件数変更、CTAの文言修正といった依頼が、運用側で完結します。制作側の細かな修正対応が減るぶん、保守契約の内容も見直す価値があります。

• 渡してよい：文言・画像・並び順・表示件数
• 渡さないほうがよい：テンプレート構造・theme.json
• 対策：編集者権限では触れる範囲が限られるため、権限設計で線を引く

権限は重要です。編集者ロールではサイトエディターを開けません（テンプレート編集には管理者権限が必要）。運用担当に何を任せるかで、付与する権限を決めてください。

見積もりで注意する点

「PHPを書かないから安い」と単純には言えません。ブロックの制約内でデザインを実現する調整や、パターンの整備には相応の時間がかかります。特に既存のデザインカンプをそのまま再現しようとすると、CSSでの上書きが増えて逆に手間になることがあります。

カンプ先行で作るなら、デザイン段階からブロックで表現できる構成にしておくのが最も効率的です。ブロックテーマは、デザインと実装を分断しない進め方と相性が良い仕組みだといえます.

まとめ

ブロックテーマは、ヘッダーからフッターまでをブロックで組み立てる仕組みです。「外観 → エディター」から、テンプレート（ページの型）とテンプレートパーツ（使い回す部品）を編集します。記事一覧はクエリループブロックで、PHPを書かずに条件と並び順を指定できます。色やフォントはtheme.jsonに定義すると、エディターの選択肢とCSS変数の両方に反映されるため、まずここを整えるのが近道です。既存サイトの移行は必須ではなく、新規制作やクライアント自身が更新するサイトから採用するのが現実的な進め方になります。

よくある質問（FAQ）

ブロックテーマかどうかはどこで見分けられますか？

管理画面の「外観」メニューを見てください。「エディター」があればブロックテーマ、「カスタマイズ」があればクラシックテーマです。両方表示される場合もありますが、その場合はテーマが部分的にブロック対応している状態です。

クラシックテーマは使えなくなりますか？

現時点で廃止の予定はありません。WordPressは両方式を並行してサポートしており、SWELLやCocoonのような高機能なクラシックテーマも活発に更新されています。急いで移行する必要はなく、新規案件から段階的に採用するのが現実的です。

theme.jsonは必ず書く必要がありますか？

ブロックテーマでは実質的に必須です。色・フォントサイズ・余白・レイアウト幅といった基本設定がここに集約されており、書かないとWordPress既定の設定がそのまま使われます。CSSで上書きすることもできますが、編集画面の表示と実際の表示がずれる原因になります。

ウィジェットやカスタマイザーはどうなりますか？

ブロックテーマではどちらも使いません。ウィジェットの役割はテンプレートパーツとブロックが担い、カスタマイザーの設定はサイトエディターの「スタイル」に移ります。ウィジェット前提のプラグインは、対応状況を事前に確認してください。

編集していてテンプレートを壊してしまいました。

サイトエディターでそのテンプレートを開き、右上のオプションメニューから「初期化（テーマの状態に戻す）」を選べば、テーマ同梱の初期状態に戻せます。ページごと・パーツごとに戻せるため、他の編集内容は保持されます。

あわせて読みたい関連記事

• 【2026年最新】WordPressテーマのカスタマイズ方法を完全解説
• WordPress子テーマでCSSをカスタマイズする実践ガイド
• WordPressが真っ白で表示されない原因と対処法

AIスキルで、未来の自分をアップデート！

今なら完全無料でAIを学べる！

• 動画や実践で楽しく学べる：初心者でも安心のカリキュラム
• スマホ・PCどちらでもOK：好きな時間に学習できる
• 料金は一切ナシ：0円でAIスキルが身につく

目的に合わせて選べる「AI副業」「AI転職」「AI活用」の3コースを用意。副収入・キャリアチェンジ・日常の生産性アップまで、あなたのゴールに合わせてAIを学べます。

会員登録はカンタン30秒で完了します。まずは公式LINEから、無料でAI学習をスタートしましょう！