【WordPress】フルサイト編集対応ブロックテーマの作り方完全ガイド｜事前準備から完成まで

そもそもブロックテーマとは？クラシックテーマとの違いとメリット

WordPressでサイトを作る方法は日々進化しています。
その中でも特に注目されているのが、「ブロックテーマ」の存在です。
これは従来の「クラシックテーマ」とは大きく異なる仕組みで、WordPress 5.9以降に導入されたFSE（フルサイト編集）に対応した新しいテーマ形式です。

この記事では、ブロックテーマとは何か、クラシックテーマとの違い、そしてブロックテーマを使うメリットについて解説し、その後は実際に手を動かしながらサンプルデザインを基にWebサイトのTOPページ部分を構築していきます。

これからWordPressサイトを自作したい方、ブロックテーマに挑戦してみたい方は、ぜひ参考にしてください。

ブロックテーマとは？ 〜FSE（フルサイト編集）に対応した次世代テーマ〜

ブロックテーマとは、従来のPHPベースのテーマとは異なり、「ブロック」単位でページ全体を構築する仕組みです。
ページだけでなく、ヘッダーやフッター、投稿リストやテンプレートパーツもすべてブロックとして管理されます。

この新しいテーマ形式では、「FSE（Full Site Editing）」と呼ばれる機能により、テーマファイルを直接編集することなく、管理画面上のビジュアルエディターでサイト全体のデザインと構造をカスタマイズできます。

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

このように、ブロックテーマは「ノーコードでも柔軟に編集できる」という点で、クラシックテーマとは一線を画しています。

※しかしながら、実際には多少のコード編集は必要となるので、「ローコード編集」というのが正しい表現かもしれません…

ブロックテーマの3つの大きなメリット

クライアント自身で更新できるサイトが作れる

ブロックテーマの最大のメリットのひとつは、サイト運用のハードルが下がることです。
従来のテーマでは、ちょっとしたレイアウトの変更や文字修正も開発者に依頼する必要がありましたが、ブロックテーマではクライアント自身が編集できるようになります。

デザイン調整がリアルタイムで簡単にできる

FSEのおかげで、実際の表示を確認しながら直感的にレイアウトを組み立てられます。
コーディングの知識があまりなくても、「見たまま編集」できるのは、特に初心者にとって大きな魅力です。

モダンな制作ワークフローで作業効率が上がる

ブロックテーマでは、CSSやテーマ設定をtheme.jsonで一元元管理できるため、開発の効率も向上します。
これにより、開発者にとっても、よりクリーンで保守しやすいサイト制作が可能になります。

しかしながら、WordPressの実際の制作現場では、ブロックテーマを使った構築はあまり浸透しておらず、いまだにクラシックテーマによるコーディングベースによるサイト構築が主流であるというのが私の制作者としての肌感です。

慣れないうちは戸惑うこともありますが、そのぶん可能性も広がっています。
次のセクションでは、実際にブロックテーマを自作するために必要な準備やスキルについて詳しく解説していきます。

ブロックテーマを自作する前に知っておくべき準備と基本知識

ブロックテーマの魅力を理解したところで、「自分でも作ってみたい」と感じた方も多いのではないでしょうか？
とはいえ、いきなり手を動かす前に、まずは最低限知っておくべき準備と基礎知識を押さえておくことが重要です。

私自身、初めてブロックテーマの構築に挑戦した際、クラシックテーマとのあまりの違いに戸惑い、非効率な手戻りを何度も経験しました。
ここでは、そうした経験も踏まえて、これから始める方がスムーズに進められるよう、基礎を丁寧に解説していきます。

WordPressのバージョンとFSE機能の確認

ブロックテーマを使用するには、WordPress 5.9以降であることが大前提です。
また、フルサイト編集（FSE）が有効かどうかは、管理画面の「外観」メニューに「エディター（ベータ）」が表示されているかで確認できます。

古いWordPressテーマやプラグインを併用している場合、ブロックテーマとの相性に問題が生じる可能性があるため、開発を始める前に環境の見直しをおすすめします。

開発はローカル環境で！

ブロックテーマの開発は、ローカル環境で行うのが安心・安全です。
私がよく使うのは「Local by Flywheel」や「XAMPP」といったツールで、WordPress環境の構築がGUIで簡単にできます。もちろん、MAMPでもOKです。

ローカル環境であれば、試行錯誤の段階でも本番に影響せずに変更を重ねることができ、失敗を恐れず挑戦できます。

ブロックテーマの基本構成と必須ファイル

ブロックテーマを構成する上で最低限必要なファイル・ディレクトリは以下の通りです。

your-theme/
├── style.css
├── theme.json
├── templates/
│   └── index.html
├── parts/

クラシックテーマではPHPで構築していたテンプレートファイルが、ブロックテーマではHTML形式で記述される点が大きな違いです。

GutenbergブロックのHTML構文への理解

ブロックテーマでは、テンプレートファイル内にGutenbergブロックのHTML構文を直接記述していきます。
例としては、次のような記述になります。

<!-- wp:paragraph -->
<p>これは段落ブロックです。</p>
<!-- /wp:paragraph -->

Gutenbergエディターで作成するブロック構造を、そのままHTMLで書いていくイメージです。
最初は戸惑うかもしれませんが、慣れてくるとデザインと構造を直感的に扱えるようになり、開発がとても楽になります。

デザインツールとの併用で設計効率アップ

ブロックテーマのメリットの1つとして「クライアント自身で更新できるサイトが作れる」ということを挙げさせていただきましたが、実際にはある程度のデザイン知識は必須といえるでしょう。
Webサイトとは「色」「タイプグラフィ」「余白」など、さまざまなデザイン要素が絶妙なバランスで合致して初めてユーザーにとって使いやすいものになる、ということは念頭に置いておきましょう。

もしあなたがデザイナーでFigmaやAdobe XDなどのデザインツールを使えるのであれば、ブロックテーマ開発との相性も抜群です。
私の場合、Figma上であらかじめ各パーツをブロック単位で設計しておくことで、実装時に「これはテンプレートパーツに」「これは再利用ブロックに」と判断がスムーズになり、効率的に開発を進められました。

ここまでで、ブロックテーマ自作に向けた基礎知識と準備のポイントを押さえることができました。
次のブロックでは、実際のテーマ構築の流れと、その中での注意点について詳しく解説していきます。

実務でブロックテーマを導入する前に、これだけは押さえておきたいポイント

ブロックテーマは非常に自由度が高い一方で、プロジェクト進行においては以下のような点に注意が必要です。

デザイナーが「ブロックエディターの限界」を理解しているか？

ブロックエディターは日々進化していますが、「すべての表現がノーコードでできるわけではない」というのが実情です。
例えば以下のようなケースでは工夫が求められます。

このため、デザインを担当する人が「これはブロックで実現可能／不可能」を判断できるだけの知識を持っているかどうかが重要です。

実装とデザインの分業体制の場合、連携が特に重要

特に「デザイン→実装」へ引き継ぐワークフローでは、次のような選択肢を事前に共有・議論しておくべきです。

これらの判断には、デザイナー側にも一定の実装知識が求められます。
または、最初からWordPress実装に強い人がデザインも兼任するという体制が、スムーズな進行につながる場合もあります。

サイト全体の下準備

それではここからは実際にブロックテーマを活用したWebサイトを構築していきたいと思います。
構築にあたり、まずはこれらの下準備をあらかじめ行っておきます。

固定ページの登録

今回はTOPページだけの制作を主題としていますので、厳密には固定ページは必要ありません。
しかしながら、ヘッダーの「ナビゲーションメニュー」やページ内のボタンにリンクを設置する際に下層ページとしてあらかじめ登録されている方が何かと便利ですので登録しておきましょう。
下記の5つの固定ページを登録しておきましょう。

ダミーの「お知らせ」記事登録

また、お知らせ記事も表示できるようにダミーでよいので下記のようなタイトルと日付の記事を登録しておきましょう。

ブロックテーマ自作の具体的な手順

準備が整ったら、いよいよブロックテーマの自作に取り掛かります。
これまで「ブロックテーマとは？」ということで長々と説明してきましたが、まずは仕組みや理屈などは置いておいて「ブロックテーマに慣れる」ということを目標にこの後の手順をなぞっていただければと思います。

今回自作のブロックテーマを作るにあたって何か具体的な題材が欲しいなと思ったので、サンプルデザインを私の方で準備してみました。
下記のリンクからFigmaファイルをダウンロードできるので、実際に開いて中身を見てみましょう。

今回は「あだちメディカルクリニック」という架空のクリニックのWebサイトのデザインを作ってみましたので、こちらを参考にブロックテーマを作成していきましょう。

Create Block themeプラグインをインストール

ここから先は既にローカル環境にWordPressのテスト環境を準備してあることを前提に話を進めていきます。

まずは、ブロックテーマを作成しやすくするためのプラグイン「Create Block theme」をインストールします。
無くても問題なく作成することは可能ですが、あった方が圧倒的に便利なのでインストールしておきましょう。

WordPressの「プラグイン」から検索欄に「Create Block Theme」と入力してください。
恐らく下記のプラグインが表示されると思いますので、「インストール」を押したのち、「有効化」を選択してください。

プラグインを有効化したら、今度は空のテーマを作成していきます。
今回はあえて空のテーマを０から構築していきます。

サイドバーの「プラグイン」から「ブロックテーマを作成」をクリックします。

「新しい空のテーマを作成する」を選択します。

ポップアップ画面が表示されるので、必要情報を入力して「空のテーマの作成と有効化」をクリックしてください。

ここまでの作業で下記の構成のテーマが自動で作成されます。

your-theme/
├── style.css
├── theme.json
├── templates/
│   └── index.html
├── parts/
├── screenshot.png

Gutenbergプラグインのインストール

今回は一部のブロックの機能を拡張して使用したいので、Gutenbergプラグインというものを使用したいと思います。
※あくまでも「実験中」という位置づけであるため、実際の案件で使用するかどうかは慎重に検討してください。

先ほどと同じように検索欄に「Gutenberg」と入力してください。
下記のプラグインが表示されると思いますので、「インストール」を押したのち、「有効化」を選択してください。

有効化すると、サイドバーに「Gutenberg」という項目が追加されるので、「実験中」をクリックします。

その中から「グリッドのインタラクティビティを追加」にチェックをいれて「保存」ボタンを押してください。

これで機能の拡張が完了しました。
この機能は後々使用していきます。

theme.jsonについて

theme.jsonは、ブロックテーマの“核”とも言えるファイルです。
ここにはスタイルの統一ルールや、エディターの設定、使用するカラー・フォントなどが定義されています。

デザインのルールをあらかじめ theme.json にまとめておくことで、サイト全体の統一感を保ちながら、エディター側でも同じスタイルを参照できるようになります。

下記はtheme.jsonのサンプルコードになります。

{
  "version": 2,
  "settings": {
    "color": {
      "palette": [
        {
          "slug": "primary",
          "color": "#0d6efd",
          "name": "Primary"
        }
      ]
    },
    "typography": {
      "fontSizes": [
        {
          "slug": "large",
          "size": "32px",
          "name": "Large"
        }
      ]
    }
  }
}

このtheme.jsonはコードで直接記述してテーマに認識させる方法でも全然問題ないのですが、WordPressの「エディター」機能から設定することも可能です。

次はその「エディター」画面からtheme.jsonの編集を行っていきましょう。

スタイルの登録：タイポグラフィ

先ほどのテーマが有効化されるとそのままエディター画面が開かれるので、作業を進めていきます。
もし、別のページを開いていた場合はサイドバーの「外観」⇒「エディター」をクリックしてエディター画面を開いてください。

そして同時にFigmaファイルを開き、「DesignPreset」のページを開いてください。

今回はテーマを作成しやすいように下記のようなプリセットをあらかじめ用意しておいたので、これらをエディター画面から編集しtheme.jsonに反映させていきます。

タイプグラフィとは「文字を美しく読みやすく配置するデザイン」のことですが、Webデザインにおいてタイポグラフィと言われたら、フォント、文字の大きさ、行間、文字間、色などの総称を指すと思ってください。

エディターのサイドバーから「スタイル」を選択し、「タイポグラフィ」をクリックします。

今回はsystem font以外に「Zen maru Gothic」というフォントを使用するのでGoogle Fontsからインストールしていきます。

「フォント」から「フォントをインストール」をクリックします。

検索窓に「zen maru」と入力すると下記のように「Zen Maru Gothic」が表示されます。

Figmaの方にも記載しているように、今回は500と700のweightのみを使用するので下記のように選択してインストールをクリックします。

次にフォントサイズを登録していきます。

デフォルトサイズが下記のように設定されており、このまま使用しても良いのですが、今回はすべてカスタムプリセットを設定していきます。

まずはtheme.jsonの「typography」の部分に下記の記述を追加します。

"typography": {
  "defaultFontSizes": false,
　"fontFamilies": [
　　{
　　　//省略//
　　}
　]
},

defaultFontSizes:falseにすることで、もともとデフォルトで存在していたフォントサイズのプリセットを消すことができます。

それではまず最初に固定サイズのプリセットを登録していきます。
下記のように「極小」～「超特大」までの値を入力していってください。

※保存ボタンは特にないので入力後そのまま前の画面に戻って大丈夫です。

固定サイズのプリセットをすべて入力すると下記のようになっているはずです。

次は画面の横幅サイズに応じてフォントサイズが変化するような「Fluidタイポグラフィ」というものを設定してきます。
Fluidタイポグラフィとは画面幅に応じてブラウザが自動でテキストサイズを可変してくれるものです。

今回のデザインではコンテンツ幅を1200pxで設定してあるので、このサイズの場合にテキストは最大値の値をとって欲しいわけです。
最小値の方はデフォルトでは320pxになっていますが、こちらも一応明示的に示しておきます。

"typography": {
  "defaultFontSizes": false,
　"fluid":{
    "maxViewportWidth": "1200px",
    "minViewportWidth": "320px"
  }
　"fontFamilies": [
　　{
　　　//省略//
　　}
　]
},

エディターの方の編集ではこれまで同様にカスタムプリセットから新規にプリセットを追加します。

そして「フルードタイポグラフィ」にチェックを入れ「カスタムフルード値」にもチェックを入れます。
そして最大値と最小値にFigmaから取得した値を入力します。

ただし、ここで一つ注意点があります。
Fluidタイポグラフィを使用する場合に、「サイズ」の入力フィールドの値は他のプリセットのサイズと被ってはいけません。（固定プリセットも当然含まれます）

例えば…

新規にカスタムプリセットを追加した場合、入力値には16という値がセットされています。

このままカスタムフルード値にチェックを入れると、グレーアウトし変更ができなくなります。

入力はできなくなりましたが、ここでは内部的に16pxという値を保持しています。
この16pxという値は固定プリセットの「中」サイズと被ってしまっています。
この場合、Fluidタイポグラフィとして登録することはできますが、テーマ作成時にこのプリセットをフォントサイズとして適用しようとしたときに、先に登録してある「中」サイズのプリセットが優先されて適用されることになり、Fluidタイポグラフィで登録したこのプリセットが何の意味も持たないものになってしまいます。

つまり、先ほど「Fluidタイポグラフィを使用する場合に～」とは言いましたが、実際は「サイズ」に入力される値は「Fluid」「固定」を問わず、一切他と被ってはいけません。

という点に注意しつつ、下記のようにFigmaの値を参照しながらFluidタイポグラフィとして登録していきます。

最終的にフォントサイズに関するタイポグラフィのセッティングは下記のようになっています。

「タイポグラフィ」では、フォントの種類（フォントファミリー）やフォントサイズをあらかじめデフォルト値として設定できます。
これにより、ウェブページを作成する際に、要素ごとにいちいち設定する手間を省き、効率的に作業を進められます。

「要素」のカテゴリーに中に「テキスト」や「見出し」「リンク」などがありますが、今回は「テキスト」「見出し」「ボタン」の3つを設定していきます。

FigmaのDesignPresetにはこの辺りの設定を細かくは設定していませんが、実際のデザインを見てみるとこの辺りの設定は取得できるかと思います。
例えば通常の段落テキストは下記のような設定が適用できます。

「見出し」は今回のデザインではH2とH3までしか使用しない想定なので、こちらの2つを登録しておきます。

ボタンのタイポグラフィは下記のように設定します。

ここまでで「タイポグラフィ」に関する設定は一通り完了です。
一度ここまでの設定をtheme.jsonにエクスポートしてみましょう。

画面の右側のプレビュー画面をクリックすると編集画面に移行します。

右上の三点リーダーをクリックします。

「ブロックテーマを作成」を選択します。

「テーマへの変更を保存」をクリックします。

「変更内容を保存」ボタンをクリックします。

これで下記のようにtheme.jsonに変更内容が保存されました。

{
	"settings": {
		"appearanceTools": true,
		"layout": {
			"contentSize": "620px",
			"wideSize": "1000px"
		},
		"spacing": {
			"units": [
				"%",
				"px",
				"em",
				"rem",
				"vh",
				"vw"
			]
		},
		"typography": {
			"defaultFontSizes": false,
			"fluid": {
				"maxViewportWidth": "1200px",
				"minViewportWidth": "320px"
			},
			"fontFamilies": [
				{
					"fontFamily": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
					"name": "System Font",
					"slug": "system-font"
				},
				{
					"fontFace": [],
					"fontFamily": "\"Zen Maru Gothic\", sans-serif",
					"name": "Zen Maru Gothic",
					"slug": "zen-maru-gothic"
				}
			],
			"fontSizes": [
				{
					"fluid": false,
					"name": "小",
					"size": "14px",
					"slug": "custom-1"
				},
				{
					"fluid": false,
					"name": "中",
					"size": "16px",
					"slug": "custom-2"
				},
				{
					"fluid": false,
					"name": "やや大",
					"size": "20px",
					"slug": "custom-3"
				},
				{
					"fluid": false,
					"name": "大",
					"size": "24px",
					"slug": "custom-4"
				},
				{
					"fluid": false,
					"name": "特大",
					"size": "32px",
					"slug": "custom-5"
				},
				{
					"fluid": false,
					"name": "超特大",
					"size": "48px",
					"slug": "custom-6"
				},
				{
					"fluid": {
						"max": "20px",
						"min": "18px"
					},
					"name": "F-M",
					"size": "200px",
					"slug": "custom-7"
				},
				{
					"fluid": {
						"max": "24px",
						"min": "16px"
					},
					"name": "F-L",
					"size": "240px",
					"slug": "custom-8"
				},
				{
					"fluid": {
						"max": "32px",
						"min": "24px"
					},
					"name": "F-XL",
					"size": "320px",
					"slug": "custom-9"
				},
				{
					"fluid": {
						"max": "48px",
						"min": "28px"
					},
					"name": "F-XXL",
					"size": "480px",
					"slug": "custom-10"
				}
			]
		},
		"useRootPaddingAwareAlignments": true
	},
	"styles": {
		"elements": {
			"button": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--zen-maru-gothic)",
					"fontSize": "var(--wp--preset--font-size--custom-7)"
				}
			},
			"h2": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--zen-maru-gothic)",
					"fontSize": "var(--wp--preset--font-size--custom-9)"
				}
			},
			"h3": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--zen-maru-gothic)",
					"fontSize": "var(--wp--preset--font-size--custom-3)"
				}
			}
		},
		"typography": {
			"fontSize": "var(--wp--preset--font-size--custom-2)",
			"lineHeight": "1.5"
		}
	},
	"templateParts": [
		{
			"area": "header",
			"name": "header"
		},
		{
			"area": "footer",
			"name": "footer"
		}
	],
	"version": 3,
	"$schema": "https://schemas.wp.org/wp/6.8/theme.json"
}

スタイルの登録：色

続いては色に関するスタイルを設定していきます。
今回もまたDesignPresetのシートを確認し、エディターから登録していきます。
下記の4つの色を登録しておきます。

まずは、「パレットを編集」をクリックしましょう。

パレットには初期状態では下記のようにデフォルトで複数のカラーがセットされています。

一旦これらは邪魔なので消しておきましょう。
theme.jsonに下記を追記します。

{
	"settings": {
		"appearanceTools": true,
		"layout": {
			"contentSize": "620px",
			"wideSize": "1000px"
		},
        "color": {
            "defaultPalette":false
        },
        //省略//
    },
	"version": 3,
	"$schema": "https://schemas.wp.org/wp/6.8/theme.json"
}

defaultPalette:falseを指定することで初期状態のカラーを消すことができます。
そして新たに下記のようにパレットを登録します。

そして、タイポグラフィでやった時と同じように、この色を使って各要素のデフォルトの色を設定していきましょう。

下記の画像のようにそれぞれ設定してください。

上記を設定したら、再度「テーマへの変更を保存」しtheme.jsonに内容を反映させておきましょう。

スタイルの登録：影

次は「影」の設定をしていきますが、今回のTOPページのデザインでは影の仕様は一か所しかありません。
なので、スタイルとして登録しておかなくても構いませんが、解説のために一応登録しておきます。

デザインでは影はこの「特徴セクション」のメディア型コンポーネントにのみ使用されています。

このメディア型コンポーネントを選択し、「ドロップシャドウ」を確認するとどのような数値で設定されているのかを確認することができます。
再度WordPressのエディター画面に戻り、これらの値を登録していきます。

こちらもデフォルトの設定が加えられているので、削除しておきたいと思います。

theme.jsonに下記の変更を加えます。
defaultPresetsの値をfalseにしておきます。

{
	"settings": {
		"appearanceTools": true,
		"layout": {
			"contentSize": "620px",
			"wideSize": "1000px"
		},
        "color": {
            "defaultPalette":false
        },
    　　"shadow": {
      　　"defaultPresets": false
    　　},
        //省略//
    },
	"version": 3,
	"$schema": "https://schemas.wp.org/wp/6.8/theme.json"
}

「カスタム」右横の「+」をクリックし値を登録していきます。
入力値は下記のように設定すればOKです。

スライルの登録：レイアウト

次はレイアウトに関するスタイルを登録していきます。

レイアウトでは下記のような項目を設定することができます。

コンテンツ幅

まずは、コンテンツ幅についてですが、これはWebサイトにおける基本的なコンテンツの幅のことを指します。
例えば今回私が用意したデザインでは、薄赤色で示された列幅（ここでは1200px）に沿って凡そのコンテンツを配置しています。

幅広

一方で下記のヘッダーやメインビジュアル、背景画像のように、あえてコンテンツ幅から外して配置しているレイアウトのものも存在します。（ここでは1760pxで設定）
このように通常のレイアウトからは少しアクセントをつけて、あえて外したレイアウトにしたい場合等にこの「幅広」は使用します。

パディング

Webデザインをする上で絶対に避けては通れないのが、このパディングというものと、もう一つマージンという概念です。
簡潔に説明するのが非常に難しい言葉ですが、あえて簡単に説明するのであれば、パディングとは「その要素が内側に持つ余白」、マージンとは「他の要素との間の余白」のことを示します。

そして、この個所ではWebサイト全体におけるパディングを設定します。

では、「Webサイト全体におけるパディング」とはどういうことなのか？
下記の画像を見ていただけると分かりやすいかと思います。

この画像の右側のプレビュー画面を見ていただくと、コンテンツが横幅いっぱいに広がってしまっており、非常に見づらい状態になっているかと思います。
これは先ほどの「コンテンツ幅」の設定で1200pxという値を設定していいるにも関わらず、画面幅がそれを下回っているので、コンテンツが自動で画面幅いっぱいに表示されている、という状態です。

この状態のままでは、非常に見づらいWebサイトになってしまうので、このWebサイト全体に対して、最小限の余白を設けておこう！、というのがここでの設定となります。

本来であれば、スマホやタブレットデザインがあればそれらの値を参照して、固定値にするか可変値にするか決めればよいのですが、今回はどちらも用意していないため、固定値として16pxという値を横方向に対してのみ(縦方向のパディングは不要)設定しておきます。

するとどうでしょう？先ほどまでとは違い、プレビュー画面の内側に余白が生まれました。
これで先ほどよりも一段と見やすいレイアウトになったかと思います。

ブロックの間隔

続いて、ブロック間の余白のデフォルト値を設定します。

今回のTOPページに関しては、このデフォルト値はほぼ使わない予定ですが、下層ページなどを今後皆様ご自身で作成していく際などに汎用的に使用できるように設定しておきましょう。
ちなみに、TOPページではこのデフォルト値を新しい値に都度書き換えて余白を設定していきます。

今回はFigmaの値通りに「1.8em」という設定で余白を設定しておきます。
ちなみに「em」という単位ですが、これは要素が持つfont-size×1.8倍のサイズという意味です。
例えばフォントサイズが16pxの要素に対しては28.8pxの余白が付与されます。

Spacing preset(余白のプリセット)

ここからはエディター画面からは編集できないので、theme.jsonを直接編集していきます。
Figmaの下記の値をそのままtheme.jsonに適用します。

このプリセットの中にMAXサイズとMINサイズがそれぞれ異なる値で設定されているものがあります。
これは、PC画面とスマホ画面でそれぞれ余白の大きさを変えたいからです。

PCの余白をそのままスマホに適用させる場合、そのままのサイズで上手くハマる場合もあれば、違和感が生まれて不自然なデザインになってしまう場合があります。
WordPressの本来の機能ではPCサイズとスマホサイズでデザインを変える機能はありません。

そこで、本来は無い機能を補うためにclampという関数を使って画面幅に合わせて徐々にMAXサイズからMINサイズに遷移していきます。
また、今回のclmap関数は1200pxでMAXサイズ値をとり320pxでMINサイズの値を取るように設定しています。

clampの計算は下記のツールを使用しています。

Font-size clamp() generator

Generate linearly scale font-size with clamp()

theme.jsonの方には下記のように記述します。
spacingSizesの中身と、defaultSpacingSizes:falseを追記してください。

{
  "settings": {
    "appearanceTools": true,
    "color": {
      //省略//
    },
    "layout": {
     //省略//
    },
    "shadow": {
     //省略//
    },
    "spacing": {
      "defaultSpacingSizes": false,
      "units": ["%", "px", "em", "rem", "vh", "vw"],
      "spacingSizes": [
        {
          "name": "1",
          "size": "0.75rem",
          "slug": "30"
        },
        {
          "name": "2",
          "size": "1rem",
          "slug": "40"
        },
        {
          "name": "3",
          "size": "1.5rem",
          "slug": "50"
        },
        {
          "name": "4",
          "size": "clamp(1rem, 0.8182rem + 0.9091vw, 1.5rem)",
          "slug": "60"
        },
        {
          "name": "5",
          "size": "2rem",
          "slug": "70"
        },
        {
          "name": "6",
          "size": "clamp(1rem, 0.6364rem + 1.8182vw, 2rem)",
          "slug": "80"
        },
        {
          "name": "7",
          "size": "2.5rem",
          "slug": "90"
        },
        {
          "name": "8",
          "size": "4rem",
          "slug": "100"
        },
        {
          "name": "9",
          "size": "clamp(2.5rem, 1.9545rem + 2.7273vw, 4rem)",
          "slug": "110"
        },
        {
          "name": "10",
          "size": "5rem",
          "slug": "120"
        },
        {
          "name": "11",
          "size": "clamp(1.5rem, 0.2273rem + 6.3636vw, 5rem)",
          "slug": "130"       
        }
      ]
    },
    //省略
  "styles": {
   //省略//
  },
  "templateParts": [
    //省略//
  ],
  "version": 3,
  "$schema": "https://schemas.wp.org/wp/6.8/theme.json"
}

すると、下記のように余白のプリセットが登録されています。
（※今回は「name」の値にに数字を入れてしまっていますが、これだとパッと見たときに何pxなのか判断できないので、もう少し分かりやすい表記でもいいかもしれませんね）

スタイルの登録：ブロック

続いてブロックにスタイルを適用していきます。
ここで言うブロックとは、ブロックエディター上に存在する各ブロックのことです。
※Figma上のコンポーネントのことではありません。

今回のデザインを見渡した際にブロックの設定として登録できそうなものは凡そ下記が該当するかなと思います。

ナビゲーションブロック

ヘッダー部分のナビゲーションの登録を行っていきます。

エディター画面の「スタイル」から「ブロック」を選択し、下にスクロールしていくと、「ナビゲーション」というブロックが見つかるはずです。

このブロックを選択し、下記のようにスタイルを設定してください。

ボタンブロック

続いて、「ボタン」ブロックのスタイルを登録していきます。

「ボタン」を選択し、下記のようにスタイルを登録します。

テキストと背景の色に関しては、「スタイルの登録：色」で既に登録していると思いますので、ここで再度設定を行う必要はありません。

このボタンブロック、実は「エディター」の機能だけで実現することは不可能です。
なぜなら矢印アイコンの部分、ここがエディター上では実現できないからです。

そのため、テーマフォルダの中に新たにfunstions.phpを作成しstyle.cssと合わせてコードを記述していきます。

<?php
//テーマ独自のCSS（style.css）をエディターに読み込む関数
function mytheme_supports() {
    add_editor_style('style.css');
}
add_action('after_setup_theme', 'mytheme_supports');

//テーマのCSS(style.css)をフロントに読み込む関数
function mytheme_enqueue(){
    wp_enqueue_style('mytheme_style', get_stylesheet_uri(), array(), filemtime(get_theme_file_path('style.css')));
}
add_action('wp_enqueue_scripts', 'mytheme_enqueue');

//WordPressのコアブロックにスタイルを追加するための関数
function register_block_styles(){
    register_block_style(
        'core/button',
        array(
            'name' => 'has-icon-button',
            'label' => 'アイコン付きボタン'
        )
    );
}
add_action('init', 'register_block_styles');

そしてアイコン画像を保存しておくためのimagesフォルダをassetsフォルダの直下に設置します。

your-theme/
├── assets/
│   └── fonts
│   └── images
├── style.css
├── theme.json
├── templates/
│   └── index.html
├── parts/

そしてFigmaから画像をエクスポートしてimagesフォルダの中に保存します。

style.cssには下記のように記述します。

.is-style-has-icon-button .wp-block-button__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.is-style-has-icon-button .wp-block-button__link::after {
  content: "";
  display: inline-block;
  width: 1.5rem;
  aspect-ratio: 1/1;
  background-image: url("assets/images/tdesign_swap-right.png");
  background-size: contain;
  background-repeat: no-repeat;
}

以上で「ボタン」ブロックの設定は完了です。

パターンの登録：ヘッダー

続いては現在プレビュー画面に表示されているこちらの「ヘッダー」部分をデザインを基に編集していきます。

まずはエディターのサイドバーから「パターン」を選択します。

既にデフォルトで「ヘッダー」と「フッター」が用意されているので、今回はこれらの中身を変更してデザインを再現していきましょう。
試しに「ヘッダー」をクリックし、概観を見てみると様々なブロックで構築されているのが分かるかと思います。

これらのブロックをそのまま使用し、スタイルを整えるだけでも今回のヘッダーデザインは十分再現できるとは思いますが、今回はブロックテーマ制作の学習が目的であるため、一旦これらのブロックはすべて削除し、1から作り直していきたいと思います。

その前にまずはサイトのタイトルとキャッチフレーズを変更したいと思うので、管理画面の「設定」⇒「一般」から下記のようにサイトのタイトルとキャッチフレーズを入力し、保存しておいてください。

それでは先ほどの「ヘッダー」の編集画面に戻ります。
下記のブロックをまずは挿入してください。

サイトロゴブロックの設定

まずはサイトロゴから登録していきます。
下記の部分を丸っとPNG形式でFigmaの方からエクスポートします。
ご自身のローカル環境のどこでも良いので保存しておきましょう。

そしてWordPressの方の編集画面で「サイトロゴ」の部分のブロックをクリックし、今ダウンロードした画像をアップロードします。

右サイドパネルの「ブロック」設定から下記のように設定を行ってください。
「画像にホームへのリンクをつける」にチェックをつけるとユーザーがロゴ画像をクリックした際にサイトのTOPページに遷移することが可能になります。

ナビゲーションブロックの設定

続いて「ナビゲーション」の設定です。
左サイドバーの「ナビゲーション」を展開しドラッグ＆ドロップでメニューの順番を入れ替えます。

ちなみに「ナビゲーション」ブロックは現在公開されている固定ページが一覧表示されます。
今回はナビゲーションに必要な固定ページしか登録していませんが、通常は右サイドバーの「ブロック」タブからデザインに従い取捨選択を行ってください。
「上に移動」「下に移動」を使い分けながら、メニューの並び順を変更します。

レイアウトを調整

次はこれらのブロックのレイアウトを整えていきます。

ブロックのリストビューから2つの「サイトロゴ」と「ナビゲーション」ブロックの2つを選択し、三点リーダーをクリックして「グループ化」をクリックします。
もしくは、「Ctrl+G」でグループ化を行います。

グループ化が完了したら、そのグループブロックを選択した状態で右サイドパネルを確認します。
そうすると、グループのレイアウトを設定できるようになっているので、ここでは左から2番目の「横並び」を選択し、レイアウトは一番右の「項目の間隔」を選択します。

※ちなみに下記のように2つのブロックを選択してブロックのメニューバーから直接「横並び」を選択することも可能です。

このようにサイトロゴブロックとナビゲーションブロックが横幅いっぱいに広がるようになります。

これだけではまだヘッダーのデザイン再現としては不十分なので追加で設定を行っていきましょう。

上方向のパディングは33px、横方向のパディングは11番（24px~80px）を選択します。

現在までの設定でヘッダーは下記のようなレイアウトになっています。

ここで、「なぜ勝手にハンバーガーメニューが出来ているのか？」と疑問に思った方もいるかもしれません。

先ほどのナビゲーションブロックの設定では説明は省きましたが、ナビゲーションブロックはデフォルトでは下記のように設定されており、スマホサイズの画面で自動でハンバーガーメニューが出力されるようになっています。

パターンの登録：フッター

続いてはフッターの編集を行っていきます。
今回はこのレイアウトを「グリッド」ブロックを使用して実現していきます。
そして、一部「Gutenberg」プラグインの実験的な機能を使用しないと実現できないため、「Gutenbergプラグインのインストール」のセクションの手順を実行しておいてください。

まずは、既存のフッターに登録されているブロックを削除して完全にまっさらな状態にしておきましょう。

そして新たに必要なブロックを追加していきます。

それぞれ下記ような設定値で登録しています。

※ボタンに関してはそのままボタンブロックを挿入し、テキストを入れるだけなので省略

この「診療時間」のテーブルブロックはデフォルト機能だけではデザインを再現できないので、ボタンブロックのスタイルを追加したときと同じようにコードを追加して、新たなスタイルを設定します。

まず、functions.phpに下記のように追記します。

<?php
//省略//

//WordPressのコアブロックにスタイルを追加するための関数
function register_block_styles(){
    register_block_style(
        'core/button',
        array(
            'name' => 'has-icon-button',
            'label' => 'アイコン付きボタン'
        )
    );
    register_block_style(
        'core/table',
        array(
            'name' => 'original-style',
            'label' => 'オリジナルスタイル'
        )
    );
}
add_action('init', 'register_block_styles');

.is-style-original-style thead {
  border-bottom: solid 1px;
}

.is-style-original-style tr:not(:last-child) {
  border-bottom: solid 1px #ccc;
}

.is-style-original-style th,
.is-style-original-style td {
  padding: 1rem 0.5rem;
}

.is-style-original-style th {
  border: none;
}

.is-style-original-style td {
  border: none;
}

上記のコードを追加した上で下記の設定値でブロックを登録します。

そして、色を付けたいテキストを選択し、メニューバーの「ハイライト」から色を選択していきます。

ここまでの設定でテーブルブロックの見た目が下記のようになっていればOKです。

最後にコピーライトの部分は下記のように設定してください。

レイアウトを調整

必要なブロックはそろったのでレイアウトを調整していきます。
まずは「画像ブロック」、「段落ブロック」、「ボタンブロック」の3つを複数選択しグループ化を行います。
そして、ブロックの間隔を5番で設定しておきます。

次に、上記で設定してグループと「テーブル」ブロックを「グリッド」でまとめます。
ここの値に関してはFigmaファイルの「レイアウトガイド」から値を取得することができます。

※ちなみに1グリッドあたりの横幅に関しては下記の計算でWordPress側で自動で計算されています。

※ここでの最小列幅とは「最低でも72pxの幅を持つ」という意味になります。
1200pxで設定してあるグループブロックを12個の可変サイズのグリッドと11個の固定サイズの余白で区切り、
そのグリッドが72pxを下回った時にグリッドブロック内の要素が改行されるという仕組みです。

そしてグリッドブロック内のそれぞれの要素には上記のように設定を行います。

現在までの設定でヘッダーは下記のようなレイアウトになっています。

ページ全体の構築

これまでの作業でヘッダー・フッターやボタンなどの各パーツの構築は終えています。
ここからはページを各セクションに分けて構築を進めていきたいと思います。

テンプレートの追加

まずは、「外観」⇒「エディター」⇒「テンプレート」⇒「テンプレートを追加」ボタンをクリックします。

そうするとポップアップが表示されるので、ここでは「フロントページ」を選択します。（今回構築していくのは一旦フロントページのみです）

そして、まっさらな状態の編集画面で「header」「コンテンツ」「footer」という3つのブロックを追加して保存してください。
「コンテンツ」ブロックに関しては上方向のマージンを0に設定しておきます。

これでフロントページ用のテンプレート作成は完了です。

WordPressの表示設定

先ほど登録したテンプレートを固定ページの「ホーム」に適用させるために、ここで一旦WordPressの表示設定を変更していきます。

「設定」⇒「表示設定」を選択します。

ホームページの表示を「固定ページ」にチェック、「ホームページ」の個所にあらかじめ作成してある「ホーム」を選択します。
後は「変更を保存」ボタンを忘れずにクリックすればOKです。

この設定を行うと「固定ページ一覧」の「ホーム」のページにフロントページという表示が追加されます。

そして、「ホーム」ページの編集画面に入るとテンプレートには先ほど作成した「フロントページ」が自動的に設定されています。

ここまでで、ページを作成するにあたっての設定は一旦完了なので、次のセクションからは実際の構築を始めていきます。

メインビジュアルの構築

メインビジュアルの構築を進めていきます。

まずは、「外観」⇒「エディター」⇒「固定ページ」⇒「ホーム」を選択します。

下記のようにまっさらな編集画面が表示されると思いますので左上のブロック追加ボタンから「カバー」ブロックを選択して追加します。

カバーブロックを追加したらFigmaから画像をダウンロードしてアップロードしてください。
そして、レイアウトの「コンテンツ幅を使用するインナーブロック」のチェックを外します。

各要素を下記のように登録します。
ボタンブロックに関しては前回の記事で登録したオリジナルスタイルを適用した「アイコン付きボタン」を使用します。

そして3つのブロックを全て選択して「グループ化」を行います。

グループ全体を左寄せにするために下記のように「カバー」ブロックを選択した状態で、中身の配置を「中央左」に設定します。

カバーブロックに対してスタイルを適用していきます。

ブロックごとの間隔の微調整を行うために段落2つを選択して、グループ化を行います。

グループのレイアウト設定で、「コンテンツ幅を使用するインナーブロック」のチェックを外します。
そして、グループに対してスタイルを適用させていきます。

次に、最初のコピーの方に下記のようにスタイルを適用してください。

２番目のコピーの方には下記のようにスタイルを適用してください。

最後にコピーとボタンを囲っているグループに対して余白のスタイルを適用していきます。

ここまででフロントページの見た目は下記のようになっていると思います。

特徴セクションの構築

次は「特徴セクション」の構築を進めていきます。
下記の部分です。

また、名称が適切かどうか分かりませんが…赤枠で示した部分のUIコンポーネントを便宜上「Info Card」と呼ぶことにします。

まずは、必要な要素を一通り追加していきましょう。
「Info Card」の各アイテムは一旦1つ作り、それを「パターン化」してから複製するので、ここでは一旦1つだけ登録しておきます。

なお、「InfoCard」の作成に当たっては今回は「カラムブロック」を使用します。
カラム数は「2」に設定し、「モバイルでは縦に並べる」のチェックを外しておきます。

UIのパターン化

「Info Card」のように何度も使用する可能性があるUI要素は「パターン化」という形で登録しておくと非常に便利です。
それでは早速作成していきましょう。

まずは、見出しと本文部分をグループ化します。

グループ化後、「縦積み」を選択します。そして、スタイルは下記のように設定しておきます。

そして、こちらの右側のカラムには下記のようにスタイルを適用します。

そして、カラムの左側の方には下記のようにスタイルを適用します。

画像ブロックそのものは正円にする必要があるので下記のようにスタイルを適用してください。

そして、「カラム」ブロックにもどり下記のようにスタイルを適用します。

そして、さらに垂直方向の配置を「中央揃え」に設定します。

ここまでできたら、このUIコンポーネントを選択し「パターンを作成」をクリックします。

Info Cardと名前を付けて、「同期」のチェックを外し「追加」ボタンをクリックします。
これで、この「Info Card」は1つのブロックとして登録されブロックエディター上のどこでも自由に使用できるようになりました。

自身で追加していった「パターン」は「マイパターン」から選択して追加することができます。

今回はこれを6つ追加します。
そして、6つすべてを複数選択し、「グループ化」を行います。

グループ化を行ったら、今度はそれを「グリッド」化し、下記のようにスタイルを適用します。

セクションタイトルとリードテキストのスタイル

セクションタイトルとリードテキストは下記のようにスタイルを適用します。

そして、これら2つのテキストをグループ化します。

このグループに対して下記のようにスタイルを適用します。

セクション内部のレイアウトの調整

このままだと下記のようにInfo Cardのグリッドレイアウト部分が画面幅いっぱいに広がってしまいます。

これを解消するためには、このセクション全体をグループ化します。
そうすることでtheme.jsonに設定してある「コンテンツ幅」を利用できるようになります。

これでグリッドがコンテンツ幅(1200px)に収まるようになりました。

ここで、「ボタン」を挿入するのを忘れていたので追加していきます。
今、グループ化したセクションの直下に新たに「ボタン」ブロックを追加してください。

スタイルには「アイコン付きボタン」を適用させましょう。

デフォルトではボタンは「左揃え」のレイアウトになっているため、これを中央揃えにしておきましょう。

最後にこのセクションに対して「ブロックの間隔」のスタイルを適用することで、「グループ」「グリッド」「ボタン」の3つの要素間の余白を調整します。

他ブロック間との余白

今現在、「メインビジュアル」と「当院の特徴」の間には、前回の記事でtheme.jsonに記述したように1.8em分の余白があいています。

そこで、このセクションのブロックに対して、上方向に10番（5rem=80px）の余白を設定することで上書きします。

これで先ほどよりも大きい値の余白が設定されました。

診療科目セクションの構築

続いて診療科目セクションの構築を進めていきます。

今回もパターンを作成していきますが、これを「Icon Card」と命名しておきます。
この「Icon Card」も先ほどと同様に1つを先に構築しておき、パターンから挿入していく、という手順で進めていきたいと思います。

今回もまずは一旦必要な要素をすべて登録してから、各々の要素にスタイルを適用していきます。

メインビジュアルの時と同様に「カバー」ブロックを使用して、背景とその中のコンテンツを同時に設定していきます。

UIのパターン化

では、「Icon Card」を構築していきます。

まずは、画像、タイトル、本文を選択して、「グループ化」を行います。

グループ化を行った後は下記のようにスタイルを適用します。

今回用意しているアイコン画像の方には元々ある程度の余白が含まれているため、タイトルとの間の余白はカンプ上では「0」に設定しています。
それに伴い「ブロックの間隔」は「なし」に設定していますが、これだと汎用性がなくなってしまうためご自身でお好みのサイズに変更していただいても大丈夫です。

今回はこのまま「なし」の状態で進めていきます。

画像とタイトルとの間は余白は無しで良いのですが、タイトルと本文との間の余白は設定しておきましょう。
そのために、「見出し」ブロックと「段落」ブロックを選択しグループ化を行います。

このグループに対して下記のスタイルを適用します。

※テキストの「中央寄せ」も忘れずに行っておきましょう。

ここまでできたら、「パターン化」して再利用できるようにしておきましょう。

これも先ほどと同様に「パターン」⇒「マイパターン」から選択することができます。

この「Icon Card」を新たに8つ追加して、「カバー」ブロックに内包するように移動させます。（なぜか追加しようとするとカバーブロックの外側に追加されてしまうので。）
そして、これらをすべて選択し、グループ化を行います。

このグループに対して、スタイルを適用します。

セクション内部のレイアウトの調整

つづいてこのセクション全体のレイアウトを調整していきます。

まずは、セクションタイトルについてテキストを「中央揃え」に設定します。

つぎに、ボタンのレイアウトも「中央揃え」に設定します。

つぎに、これらのカバーブロック内部のコンテンツ3つを選択して、グループ化を行います。

このグループに対して、下記のスタイルを適用します。

次に、このカバーブロックに上下のパディングを追加します。

他ブロック間との余白

最後に上方向のマージンを調整することで、前のブロックとの間の余白を調整します。

最後に「Icon Card」の画像とテキストを差し替えれば、このセクションは完成です。

お知らせセクションの構築

つづいて「お知らせ」セクションを構築していきます。
「お知らせ」の記事のひとつひとつはWordPressの「投稿」によって作成されていますが、これらの一覧をブロックエディター上で表示するための方法をご紹介します。

その前にまずは、それ以外の部分の見出しやボタンなどを設置し、このセクション内のコンテンツを大まかに構築していきます。

まずは、カバーブロック内にお知らせ記事一覧以外の要素を挿入します。

「クエリ―ループ」ブロック

では、ここにお知らせ記事一覧を表示させていきましょう。

ブロック一覧から「クエリ―ループ」ブロックを選択して追加します。
そうすると下記のように、「選択」か「新規」かを選ぶように聞かれるので、「新規」を選択してください。

次に、表示したい内容を聞かれるので今回はデザイン通りに「タイトルと日付」を選択します。

下記のように現在登録してある記事の一覧が表示されます。

この状態ではまだ設定として不十分なため、追加でいろいろ設定を行っていきます。

まずは、TOPページ内では「ページ送り」は必要ありませんので削除しておきましょう。

次に、「投稿テンプレート」のブロックを展開し「日付」と「タイトル」の並び順を逆にします。
さらに、「画像」ブロックを「タイトル」ブロックの後に挿入してアイコンを表示させます。

「日付」ブロックの設定を行います。

「タイトル」ブロックの設定を行います。

ここまで出来たら「日付」ブロックと「タイトル」ブロックを選択して「グループ化」を行います。

このグループに対して、スタイルを適用します。

投稿テンプレートの内部に2カラムの「カラム」ブロックを追加して、「グループ」ブロックと「画像」ブロックをそえぞれのカラムの中に移動させます。

そして先頭のグループを内包している側のカラムの幅には空欄を設定して自由に広がるようにします。

「画像」を内包しているカラムには幅40pxを指定します。

このようにしておくことで、スマホのように小さいサイズの画面幅でもアイコン画像が潰れることなく表示されます。

この「カラム」ブロックに対してスタイルを適用していきます。

「カラム」ブロックの1階層上の「投稿テンプレート」ブロックに対してもマージンは無しで設定しておきましょう。
そして、下部のみに枠線も設定しておきましょう。（カラムには上方向の枠線しか設定していないので）

セクション内部のレイアウトの調整

レイアウトを調整するにあたって、左側のと右側でそれぞれグループ化を行います。

このグループに対して下記のスタイルを適用してください。

こちらのグループには下記のスタイルを適用します。

ここからはそれぞれのグループの内部のレイアウトを調整していきます。
まずは、左側のグループのレイアウトを整えていきましょう。

最初に英字タイトルの部分について、「区切り」ブロックと「段落」ブロックを選択してグループ化を行います。

このグループに対して下記のスタイルを適用します。

このままだと区切りブロックが見えなくなってしまっているので、下記の「区切り」ブロックには下記のようなスタイルを適用します。

ここまでできたら、この英字付きのタイトルを「パターン化」しておきましょう。（次のセクショでもも使用します）

そして、右側グループ内の「ボタン」ブロックは「右揃え」に設定しておきます。

ここまでで、それぞれの要素の細かな調整は一通り完了しました。
最後に仕上げとして、左側グループと右側グループのレイアウトの調整を行いましょう。

では、まず2つのグループを選択して、グループ化を行ってください。
そしてグループに対して、下記のスタイルを適用します。

この段階ではまだレイアウトが崩れていますが気にしないでください。

次に、右と左のグループに対してそれぞれ下記のようにスタイルを適用します。

他ブロック間との余白

最後に「カバー」ブロックに対して上下方向のパディングを設定したらこのセクションは完成です。

アクセスセクションの構築

続いて、「アクセス」セクションを構築していきます。

このセクションは先ほどの「お知らせ」セクションと同様に「カバー」ブロックで背景に画像を設定し、その中にコンテンツを登録していきます。
また、Googleマップも掲載しているので、その埋め込み方法も解説していきます。

まずは、「カバー」ブロック内に一通りコンテンツを登録していきます。

Googleマップの埋め込み

ここにGoogleMapを埋め込んでいきます。
今回はサンプルデザインのためGoogleMapに設定する住所も仮のものとします。

GoogleMapにアクセスし、仮の住所を入力します。
入力した後に「共有」をクリックします。

下記の手順で設定していきます。

「英字付きタイトル」と「診療表」の間に「カスタムHTML」ブロックを挿入し、先ほどコピーしたHTMLをペーストします。

この状態で一度「プレビュー」を確認してみます。

下記のようにMAPの部分だけがコンテンツ幅からはみ出してしまっています。

これを解消するためにはカバーブロック内部の「英字付きタイトル以外」のすべて選択し「グループ化」を行います。

この状態で再度「プレビュー」を確認すると、下記のようになります。

ここから、各パーツのスタイルを設定していきます。

診療表のスタイル

診療表には下記のようにスタイルを設定します。

まずは、診療表を単独で「グループ化」します。

そして、下記のようにスタイルを適用します。

右側のコンテンツのレイアウト調整

さらに、診療表を囲ったブロックと段落ブロックをグループ化します。

続いて、上記のグループとボタンブロックを「グループ化」します。

下記のように余白を調整します。

セクション内部のレイアウトの調整

続いてセクション全体のレイアウト調整を行っていきます。

まずは、「カスタムHTML」ブロックをグループ化して囲います。（カスタムHTMLのままではグリッドのスパンの設定が行えないため）

さらに、MAPがコンテンツの横幅からはみ出てしまう現象を防ぐために下記のようにスタイルを適用します。

続いて、これら全体を囲っている「グループ」ブロックを「グリッド」に変更し、下記のようにスタイルを適用します。

つぎに、このグリッドの子要素の配置を設定していきます。
まずはMAPを囲っている「グループ」ブロックに対して配置を行います。

下記のようにスタイルを適用します。

最後にこの「カバー」ブロックに対して余白とパディングのスタイルを適用します。

ここまでの設定で見た目は下記のようになっています。

採用情報セクションの構築

最後に採用情報セクションの構築を進めていきます。

まずは、下記のような構成で必要なブロックを挿入していきます。

次に「カバー」ブロックを「グループ化」して囲います。（カバーブロック自体の横幅をコンテンツ幅に調整できるようにするため）

そして、下記のようにスタイルを適用します。

次に「段落」ブロックと「ボタン」ブロックを選択して、「グループ化」を行います。

さらに、このグループを先ほどカバーブロックを囲っていたグループの内部に移動させます。

この上位のグループブロックにはカバーブロックとグループブロックの間隔が0になるように設定します。

段落ブロック2つとボタンブロックを囲っているグループブロックに下記のようにスタイルを適用します。

最後にこのグループないの各要素のスタイルを適用していきます。

まずは、段落ブロック2つをグループ化します。

このブロックに対しては下記のようにスタイルを適用します。

続いて「地域医療の最前線で～」の段落ブロックに下記のスタイルを適用します。

続いて、「あだちメディカルクリニックは～」のテキストのスタイルを適用していきます。

つぎに、ボタンブロックの配置を変更します。

最後にこのセクションに上下のパディングを設定します。

最終的にこのような見た目になっていればOKです。

まとめ

ここまでの構築でWebサイト全体は下記のように仕上がりました。
実はまだ細かい部分で微調整が必要なのですが、ほぼデザインカンプと同じWebサイトが仕上がりました。

今回の記事を通してWordPressのブロックテーマを用いたWebサイトのTOPページ全体を構築する具体的な手順を詳細に解説してきました。
記事前半では共通スタイル、ヘッダー、フッターを基盤とし、記事の後半では後半はサイトのメインコンテンツ部分の構築に焦点を当てました。

このように、ブロックテーマはFSE（フルサイト編集）機能とtheme.jsonによるスタイル管理、そして「パターン」や「グリッド」といった強力なブロック機能を組み合わせることで、ノーコード（またはローコード）で複雑なデザインカンプに近いWebサイトを構築できることが示されました。
細かな微調整は必要であるものの、これらの手順を踏むことで、効率的かつ柔軟なWebサイト制作が可能になります。

この一連の解説が、ブロックテーマを用いたWordPressサイト構築に挑戦する方々の助けになれば幸いです。