WordPressトップページ作成（HOME）

目的

• Figmaデザインに基づき、HOME（トップページ）をセクションごとに構築する
• クエリーループで最新記事3件を自動表示し、動きのあるトップページを完成させる
• WordPressのブロックエディタとFSE（フルサイト編集）操作に慣れる

トップページの編集に入ろう

編集画面を開く

1. WordPress画面上部の黒いバー（管理バー）から「サイトを編集」をクリック
2. 編集画面が表示されたら、画面左上の「ドキュメント外観（≡ 三本線アイコン）」をクリックしてリストビューを開きましょう
   → 各セクションの構造を把握しやすくなります

※ 今回は「トップページ」のヘッダー・フッター以外の部分を編集していきます。

ヒーローセクションの編集

メニュー紹介セクション

• 見出し　（Menu）　スタイルはデフォルト　テキストはプライマリー　タイポグラフィは、Huge
• 見出しの上下にレスポンシブスペーサー　サイズはXL
• カラム　３段組　モバイルでは縦に並べる
• カラム内　画像　アスペクト比4:3 解像度フルサイズ
• カラム内　段落　太字　下方向にXXSの余白　タイポグラフィはLarge
• カラム内　段落　文章　タイポグラフィはSmall
• カラムデザイン　枠線１px 背景セカンダリ　ドロップシャドウ
  段落はグループ化しパティング　上下「S」左右「M」
• レスポンシブスペーサー　XL
• ボタン　サイズ標準　幅広　ベタ塗り　光る　色はプライマリー　ボタン角丸（適宜）
  幅広が気になる場合は３カラムを作成し、中央に配置
• レスポンシブスペーサー　XL

スタッフ募集セクション

• 新しくカバーを追加（背景色：#F9E8D9（ベージュ） にカスタム設定）
• レスポンシブスペーサー　XL
• 見出し　（Staff)　スタイルはデフォルト　テキストはプライマリー　タイポグラフィは、Huge
• レスポンシブスペーサー　XL
• 「スタッフ募集」バナー画像を挿入し、画像に staff ページへのリンクを設定（例：/staff）
• レスポンシブスペーサー　XL

What’s Newsセクションの追加

• カバー追加　背景色白　適宜変更
• 見出し　（What’s News）　スタイルはデフォルト　テキストはプライマリー　タイポグラフィは、Huge
• 見出しの上下にスペーサー　サイズはXL
• クエリーループ　カスタム　投稿　投稿順（最新から）
• 投稿テンプレート　グリッド　３カラム
• グループ　背景　白　パティング　上下　XS　左右　XS 　枠線 1px 線の色は適宜　ドロップシャドウ
• 画像　 解像度フルサイズ
• タイトル　デフォルト　投稿へのリンク
• 日付　右揃え
• レスポンシブスペーサー　XL
• ボタン　サイズ標準　幅広　ベタ塗り　光る　色はプライマリー　ボタン角丸（適宜）
  幅広が気になる場合は３カラムを作成し、中央に配置
• レスポンシブスペーサー　XL

Mapセクションの追加

• カバー追加（背景色：グレー #F5F5F5など）
• レスポンシブスペーサー　XL
• 見出し（Map）スタイルはデフォルト　テキストはプライマリー　タイポグラフィは、Huge
• Googleマップで地図を生成 → 埋め込み用HTMLコードをコピー
• HTMLブロックを使ってマップを貼り付け
• レスポンシブスペーサー　XL