目的
- HOME/MENU / STAFF / ACCESS / BLOG の固定ページを作成し、ナビゲーション構造を整える
- 外観＞エディタより色やレイアウトの設定
- フルサイト編集（FSE）で、既存のヘッダー・フッターをカスタマイズし、共通レイアウトを編集する
作成する固定ページ
| ページ名 | スラッグ | 備考 |
|---|---|---|
| MENU | menu | メニュー一覧を掲載 |
| STAFF | staff | スタッフ募集内容＋Contact Form設置 |
| ACCESS | access | 地図・住所・営業時間など掲載 |
| BLOG | blog | 投稿一覧ページのリンク用（サイドバー付き固定ページを作成） |
内容は仮でもOK。タイトルのみ設定して「公開」設定。
固定ページ一覧より、クイック編集を使って順序をデザイン通りに並べておきましょう。
色の設定
Figmaで指定された色のテーマ設定を行います。外観＞エディタより デザインのスタイルをクリックし、色の設定を行います。
色をクリックして「パレットを編集」に入ります。テーマから詳細を表示をクリックします。Figmaのカラー仕様書を参考に色を変更しましょう。背景暗移行の変更はありません。要素の変更も行っておきましょう。
カスタムカラーにベージュ（#F9E8D9)を追加しておきましょう。背景は個別に変更して作成しておきましょう。
スタイル設定
スタイルのレイアウト幅の変更を行います。
- コンテンツ幅 1078px
- 幅広 100%
ヘッダーの作成・編集方法
WordPressの「外観 ＞ エディタ」から、ヘッダーをカスタマイズする手順
- 左メニューから「外観」＞「エディタ」をクリック
- 画面上部のナビゲーションから「パターン」を選択
- 右側に表示される「テンプレートパーツ」の一覧から「ヘッダー」を選択
- 「ヘッダー」をクリックして、編集画面に入ります
- ヘッダー部分のレイアウトやロゴ、ナビゲーションメニューなどを自由にカスタマイズします
- 編集が終わったら、右上の「保存」ボタンをクリックして変更を反映させます
へッダーにナビゲーションやロゴ・SNSアイコンを設定する
- ナビゲーション：HOMEリンクを追加・並び替え
- 「外観」＞「エディタ」から、ヘッダー編集画面へ
- ヘッダー内のナビゲーションブロックを選択し、以下の操作を行います：
- 「+」ボタンから**「カスタムリンク」**を追加
- リンクテキスト：
HOME - URL： トップページのURL（例：
https://example.com/） HOMEを一番左端にドラッグして移動- その他のリンクは固定ページのまま
- ロゴの設定
- ヘッダー内にあるサイトロゴブロックを選択
- 画像をアップロード（またはメディアライブラリから選択）
- スタイル： デフォルトのまま
- 画像の幅：
247pxに指定 - 幅設定： 「フィット（fit）」を選択
- リンク設定： 「画像にホームページへのリンクを追加」にチェックを入れる
- ソーシャルアイコンの設置
- アイコンは以下の3つを設定（Facebook、Instagram、 Pintarest）リンク先は全て「#」
リスト表示で要素を確認しながらFigmaデザインのヘッダーデザインに近づけましょう。
フッターの作成・編集方法
WordPressでフッターをカスタマイズするには、以下の手順で「テンプレートパーツ」から編集します。
- 左メニューから「外観」＞「エディタ」をクリック
- 編集画面上部メニューから「パターン」を選択
- 右側に表示される「テンプレートパーツ」の一覧から「フッター」を探します
- 「フッター」をクリックして編集画面に入ります
- フッター内のテキスト、ナビゲーション、SNSアイコンなどを自由に編集
- 編集が終わったら、右上の「保存」をクリックして変更を反映します
Figmaデザインをもとにフッターを編集しよう
今回はFigmaデザインを参考にしながら、WordPressのリストビューを使って異なる箇所を確認し、必要な部分のみ変更します。
なお、Figmaにはフッター下部のナビゲーションは含まれていませんが、今回は既存のデフォルトフッターをそのまま利用します。
左カラムの設定（左上から順に）
【1】画像ブロックの追加
- 使用画像：
Figmaのロゴデザインを「白文字」でPNG形式に書き出す - サイズ指定：
幅は333pxに設定 - リンク：
トップページへのリンクを設定 - 配置：
フッター左上に画像ブロックを配置
【2】段落ブロック：OPEN情報
- スタイル設定：
- テキスト色：白
- 「OPEN」の文字だけ：太字
- フォントサイズ：デフォルト
右カラムの設定
【3】ソーシャルアイコンブロックの追加
- 追加するアイコン：
- リンク先： すべて
#に設定（仮リンク）
OPEN 11:00〜23:00 本店 TEL 03−5466-XXXX 東京都渋谷区広尾１丁目23−22 WWD NLD 1F 福岡店 TEL 092−544-XXXX 福岡県福岡市中央区中洲2-2-10
下部のナビゲーションについて
- デザインカンプには記載がありませんが、既存のデフォルトのナビゲーション（フッター下部のメニュー）をそのまま使用します。
- 特に変更の必要はありません。