【入門編】ヘッダーもフッターもブロックで編集！WordPressの新しい常識「フルサイト編集」とは？

0. はじめに：なぜ今、フルサイト編集（FSE）なのか？

Webサイト制作の現場は、常に進化しています。HTMLとCSSを学び、ようやくレイアウトが組めるようになったと思ったら、次はレスポンシブデザイン、そしてJavaScript…と、学習する範囲は広がるばかりです。

そんな中、世界最大のCMSであるWordPressが、サイト制作の概念を根底から変える大きな進化を遂げました。それが**「フルサイト編集（Full Site Editing: FSE）」**です。

これまで「ヘッダーやフッター、サイドバーのデザイン変更にはPHPファイル（header.phpなど）の直接編集が必要」という常識がありました。しかし、FSEはこれを完全に覆し、サイト全体をノーコードで、Gutenberg（グーテンベルク）ブロックだけでデザインし、カスタマイズすることを可能にしました。

FSEを学ぶことは、Web制作の効率を劇的に高め、よりデザインに集中するための「新しい常識」を手に入れることを意味します。さあ、Web制作の未来を一緒に見ていきましょう。

1. フルサイト編集（FSE）を構成する3つの核

フルサイト編集（FSE）は、いくつかの新しい概念と機能が組み合わさって実現されています。特に理解しておきたい3つの核を解説します。

1-1. サイトエディター（Site Editor）という名のコックピット

FSEを有効にしているテーマ（ブロックテーマ）を使うと、管理画面の「外観」メニューに**「エディター」**という項目が登場します。これこそが「サイトエディター」です。

従来のWordPress	フルサイト編集（FSE）
「投稿」や「固定ページ」の内容のみを編集	サイト全体の構造（ヘッダー、フッター、テンプレートなど）を編集
デザインの細かな調整は「カスタマイザー」やコードが必要	サイトエディターにすべて集約

サイトエディターでは、記事の内容だけでなく、サイトの構造全体をブロックの組み合わせとして捉え、視覚的に操作・編集できます。

1-2. ブロックテーマ（Block Theme）の役割

FSEの機能を利用するには、従来のテーマ形式ではなく、**「ブロックテーマ」**と呼ばれるFSE専用のテーマを導入する必要があります。

ブロックテーマは、サイトの全ての要素（ヘッダー、フッター、404ページなど）をブロックで構成できるように設計されています。これにより、これまでコードに依存していたデザイン要素も、すべてエディター上から調整できるようになりました。

WordPressの公式デフォルトテーマである「Twenty Twenty-Two」や「Twenty Twenty-Four」などが代表的なブロックテーマです。

1-3. グローバルスタイル（Global Styles）による一括デザイン制御

グローバルスタイルは、サイト全体で使用するデザインのルールブックです。

配色（カラーパレット）
フォント（タイポグラフィ）
レイアウト（余白、幅）

これらをサイトエディター内の「スタイル」パネルで一元的に設定できます。一度設定すれば、サイト内のすべての要素にそのルールが適用されるため、デザインの一貫性を保つのが非常に簡単になります。

💡 グローバルスタイルのメリット

「Webデザインの原則」でも重要な統一性と反復を、コードを書くことなく実現できます。サイトの雰囲気をガラッと変えたいときも、グローバルスタイルを編集するだけで、全ページに即座に反映されます。

2. FSE時代の制作フローを劇的に変える主要機能

FSEは、Web制作者の「作り方」そのものを効率化するための強力な機能を備えています。

2-1. テンプレートとテンプレートパーツの編集

テンプレートは、Webサイトにおける「型紙」のようなものです。例えば、ブログの「記事ページ」はテンプレート、企業の「お問い合わせページ」もテンプレートです。

FSEでは、この型紙自体をブロックで編集できます。

また、テンプレートパーツは、ヘッダーやフッターといった「使い回すパーツ」を指します。サイトエディターでテンプレートパーツを一つ編集すれば、それが適用されているすべてのページでデザインが更新されます。

2-2. ブロックパターンとパターンディレクトリ

「ブロックパターン」とは、複数のブロックを組み合わせてあらかじめデザインされたセクションのことです。

例えば、「画像とテキストとボタンを組み合わせたCTA（行動喚起）セクション」や、「3列に並べたサービス紹介ブロック」などがパターンとして用意されています。

このパターンをページに挿入するだけで、プロがデザインしたレイアウトを瞬時に構築できます。制作時間を大幅に短縮できる、FSE時代の最も便利な機能の一つです。

2-3. スタイルバリエーション（Style Variations）

ブロックテーマの中には、複数の「スタイルバリエーション」を持っているものがあります。これは、同じテーマでありながら、「色味とフォントの組み合わせ」が異なる複数のデザインプリセットを内包している機能です。

サイトエディターでスタイルを切り替えるだけで、まるで別のテーマに切り替えたかのように、サイト全体の雰囲気を変えることができます。

3. まとめ：FSEはWeb制作の「新しい扉」

フルサイト編集は、HTML/CSSによる構造と装飾の分離というWeb制作の基本理念を、より直感的で、コードに依存しない形で実現したものです。

Webデザイナー、Webクリエイターの役割は、**「コードを書くこと」から「ブロックというパーツを組み立て、デザイン原則に基づき最適化すること」**へとシフトしています。

まずは、WordPressの最新バージョンをインストールし、新しいブロックテーマ（例: Twenty Twenty-Four）を有効にするところから始めてみましょう。きっとその自由さと効率性に驚くはずです。