CONTENTS
  1. HOME
  2. WordPress
  3. WordPressのテーマ使っての作成
  4. WordPressの固定ページの作成

WordPressの固定ページの作成

目的

  • Figmaデザインに基づき、固定ページ「MENU」「STAFF」「ACCESS」をセクションごとに構築する
  • テンプレートの固定ページの編集を行う
  • WordPressのブロックエディタとFSE（フルサイト編集）操作に慣れる

固定ページテンプレートの背景画像を変更

「MENU」などの固定ページで使われるテンプレートに背景画像を設定し、デザインをFigmaに近づけます。

固定ページテンプレートを開く

  1. ダッシュボードで「外観」＞「エディター」をクリック
  2. 上部メニューから「テンプレート」を選択
  3. 一覧の中から「固定ページ（Page）」テンプレートを開く

タイトル部分の背景画像を変更

  1. タイトルが含まれるカバー（Cover）ブロックを選択 まだカバーでない場合は、タイトルブロックをカバーでラップするとよいです（右クリックで「グループ化」または「カバーに変換」）
  2. 背景画像の設定：
    • Figmaの「MENU」ページなどから背景画像をエクスポート
    • または、独自に準備した画像を使用
    • 画像を置換して設定
  3. 背景のオーバーレイ（フィルター）も必要に応じて設定（例：黒の半透明を重ねて文字の視認性を高める）

文字のスタイル調整

  • 文字色： 背景画像とのコントラストを考慮し、白や黒など明確な色を選択
  • タイポグラフィ：
    • サイズ：Large 以上
    • 配置：中央揃えなど、Figmaのデザインに合わせて調整

固定ページ「MENU」の編集

編集画面を開く

  1. WordPressダッシュボードの固定ページ一覧を開く
  2. 該当する固定ページタイトル　例えば「MENU」のタイトルをクリックし、編集画面に入ります。

Figmaデザインに合わせた2カラムレイアウトの作成

2カラムレイアウトを作成する

  1. WordPressのブロックエディターで「カラム（Columns）」ブロックを挿入
  2. レイアウトは2カラム（1:1または任意）を選択
  3. カラムブロック全体を選択した状態で、以下のスタイルを適用
設定項目内容
パディング上下：S　左右：S（ブロック設定パネルで数値 or プリセット選択）
枠線太さ：2px　色：背景セカンダリ（テーマカラーから選択）
影ドロップシャドウ（「ブロックスタイル」や「追加CSSクラス」で適用）

左カラムに画像を配置

  1. 左側のカラムに「画像ブロック」を追加
  2. Figmaからエクスポートした画像を挿入

右カラムの設定(見出し)

  1. 右側のカラムに「見出し（Heading）」ブロックを追加
  2. 見出しテキストを入力　「Cheeseburger and Fries」
設定項目内容
見出しレベルh2
テキストカラープライマリーホバー（テーマカラーより選択）
タイポグラフィLarge（大きめの文字サイズを選択）

右カラムの設定(段落)

  1. 見出しの下に段落を配置　文字の大きさはデフォルト
  2. 「ジューシーなビーフパティに、フレッシュな野菜とチーズが絶妙に相性抜群！モチモチのバンズとの絶妙なハーモニーがz口いっぱいに広がります。さらに、シャキシャキのフレンチフライと冷たいドリンクもセットになって、心もお腹も満足度MAX！」と入力
  • １つ目のメニューが完成したあとはレスポンシブスペーサー（L）を配置
  • 出来上がったカラムを複製して以下のメニューを追加します。間にはスペーサーを挿入します。
  • [Ice Cafe Mocha]のみ、カラムを選択しツールバーより写真を「右に移動」しておきましょう
Ice Cafe Mocha
氷のように冷たく濃厚なカフェモカ、ひと口で心がとろける贅沢な一杯。豊かなコーヒーの香りが広がり、口に広がる滑らかなチョコレートの風味が極上の幸福を運んできます。氷の上に浮かぶミルククリームは、舌をくすぐる甘さで心地よい余韻を与えてくれます。

Chocolate Donut
口溶けなめらかなチョコレートドーナッツ。ふわふわ生地に包まれた濃厚なチョコレートが口いっぱいに広がり、至福の味わいが心を虜にします。ほんのり甘く、ほろ苦いバランスが絶妙で、一度食べるとやみつきになること間違いなし。

固定ページ「STAFF」の編集方法

【1】編集画面を開く

  1. WordPressダッシュボードの上部バーから「サイトを編集」をクリック
  2. 「STAFF」ページを表示し、「このページを編集」ボタンから編集画面に入ります
  3. Figmaデザイン「STAFF」ページを参考に、レイアウトやテキストを整えていきましょう

【2】自由に構成してみよう

文字サイズ・色・余白なども自分の判断で調整して問題ありません（デザインの再現度にこだわりすぎなくて大丈夫です）
セクションごとに「グループ」や「カラム」を使って自由にレイアウトしてOK

注意点

  • 電話番号の下には、あとからプラグインを設置します。
    → そのため、「スペースを空けた状態で残しておく」か、「あとでブロックを追加しやすい構造」にしておいてください。

固定ページ「ACCESS」の編集方法

【1】編集画面を開く

  1. WordPressダッシュボードの上部バーから「サイトを編集」をクリック
  2. 「STAFF」ページを表示し、「このページを編集」ボタンから編集画面に入ります
  3. Figmaデザイン「ACCESS」ページを参考に、レイアウトやテキストを整えていきましょう

【2】Google Map を ACCESS ページに貼り付けよう

ACCESSページには、Google Mapを埋め込んで店舗の場所を表示します。以下の手順で挿入しましょう。

Google Map の埋め込みコードを取得する

  1. Googleマップ を開く
  2. 任意の住所・施設名を検索（※住所は自由でOK）
  3. 画面左上の「共有」ボタンをクリック
  4. 「地図を埋め込む」タブを選択し、「HTMLをコピー」をクリック

WordPressのACCESSページで編集する

  1. Google Mapを表示させたい場所に「カスタムHTML」ブロックを挿入
  2. 先ほどコピーした埋め込み用コードを貼り付け

スタイルを追加して調整

貼り付けたコード内に、以下のようにスタイルを追加しておきましょう

<iframe src="〜GoogleMapのURL〜" style="border:0;width:100%" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

style="border:0;width:100%" の部分を忘れずに追加することで、余計な枠線を消し、横幅いっぱいに表示されるようになります。