【WordPress】フルサイト編集に対応したブロックテーマの作り方と実案件への活かし方【②ページ構築】|UCHIWA Creative Studio

CONTENTS

前回まで

前回までは「ブロックテーマ」というものについて、その概要や構築時の注意点、そして実際の構築（共通スタイルやヘッダーフッターの作成）までを行いました。
詳しくは下記の記事をご覧ください。

【WordPress】フルサイト編集に対応したブロックテーマの作り方と実案件への活かし方【①準備～ヘッダー・フッター構築まで】

WordPressブロックテーマで作るTOPページ完全ガイド！テンプレート追加からメインビジュアル、各セクションのレイアウト調整まで、ステップバイステップで解説。パターン、グリッド活用で効率的にサイ…

今回はその続きのTOPページの全体構築を行っていきたいと思います。
それでは早速始めていきましょう。

ページ全体の構築

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

テンプレートの追加

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

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

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

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

WordPressの表示設定

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

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

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

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

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

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

メインビジュアルの構築

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

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

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

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

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

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

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

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

テキスト	白
オーバーレイ	#164D59
オーバーレイの不透明度	50%
パディング上下	100px
パディング左右	11番
最小の高さ	600px

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

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

コンテンツ幅を使用するインナーブロック	チェックを外す
フォント	Zen Maru Gothic
ブロックの間隔	2番（1rem）

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

テキストの配置	左寄せ
フォントサイズ	F-XXL
行の高さ	1.5

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

フォントサイズ	F-L
行の高さ	1.5

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

ブロックの間隔

8番（4rem）

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

特徴セクションの構築

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

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

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

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

セクションタイトル（当院の特徴）	見出しブロック（H2）
リードテキスト（地域の皆さまに信頼される～）	段落ブロック
「Info Card」の画像	カラムブロックの左側に画像ブロックを内包
「Info Card」のタイトル	カラムブロックの右側に見出しブロック(H3)を内包
「Info Card」の本文	カラムブロックの右側に段落ブロックを内包

UIのパターン化

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

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

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

ブロックの間隔

1番(0.75rem)

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

コンテンツ幅を使用するインナーブロック	チェックを外す
幅	空欄

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

コンテンツ幅を使用するインナーブロック	チェックを外す
幅	80px

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

角丸	9999px(正円になればどのような値でも可)

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

パディング上下	2番(1rem)
パディング左右	2番(1rem)
ブロックの間隔	2番(1rem)
角丸	8px
影	ドロップシャドウ（前回の記事でスタイル済み）

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

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

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

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

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

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

グリッド項目の位置	自動
カラム	3
最小列幅	300pxぐらい（大きくレイアウトが崩れない範囲で設定）
ブロックの間隔	3番（1.5rem）

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

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

テキストの配置（両テキスト）	中央寄せ
フォント	Zen Maru Gothic（セクションタイトルは既に見出しにスタイルが適用されているため不要）
フォントサイズ	やや大（セクションタイトルは既に見出しにスタイルが適用されているため不要）

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

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

コンテンツ幅を使用するインナーブロック	チェックを外す
ブロックの間隔	３番（1.5rem）

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

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

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

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

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

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

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

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

他ブロック間との余白

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

「メインビジュアル」と「当院の特徴」の間に1.8emの余白があることを示している

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

マージン（上）

10番（5rem）

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

余談

ちなみに今回のTOPページではブロック間のデフォルト値の余白「1.8em」は一切使用しません。
全て個別に余白を設定していきます。

ですが、もし今後ブログのような更新頻度の高いページを作成していくとなった場合を考えてみてください。
ブロックごとにいちいち余白を設定していくのは非常に面倒ですよね？

そういった手間を省くためにデフォルト値を設定しています。