いよいよ、ホームページの「ページ」を実際に作っていくステップです。
まずは、こちらの見本サイト「馬小屋カフェ」を見てください👇
このページでは、上記の馬小屋カフェを例に、同じようなページ構成を自分で作っていく練習をしていきます。
固定ページや投稿ページを、管理画面から実際に作成してみて、保存するところまでを体験しましょう。
中身のデザインは、あとでブロック操作のパートでじっくりやるので、今回は「ページの器」を用意するのが目的です。
操作の手順はすべてこのページに書いてある通りに進めればOKです。
ぜひWordPressの管理画面を開きながら、一緒に作っていきましょう！
目次
固定ページを作ってみよう
① どこから作る？
まずは、WordPressの管理画面から「固定ページ」を新規作成してみましょう。
左メニューの「固定ページ」→「新規追加」をクリックすると、以下のような画面になります。
この画面で注目しておきたいポイントは以下の3つです：
- ①：タイトルを追加
ここには「メニュー紹介」や「アクセス情報」など、ページ名を入力します。
- ②：スラッグ（パーマリンク）
URLの末尾になる部分で、例：「/menu」「/access」など。
自動生成されますが、必要に応じて変更できます。
- ③：固定ページタブが選ばれているか確認
設定エリアが「固定ページ」タブになっていればOKです。
まだ本文を入れなくても大丈夫。まずは「ページを作る」感覚をつかみましょう。
② 下書き・公開・非公開の違いと注意点
ページを作ったら、保存する必要があります。
ただし、保存の方法によって、サイトの表示状況が大きく変わるので注意しましょう。
「下書き」ってなに？
「下書き」は、作成中の状態で保存するモードです。
インターネット上には公開されず、自分だけが見られます。
途中まで書いたページを、あとで編集したいときは「下書きのまま保存」でOKです。
「公開」は誰でも見られる状態
「公開」を押すと、そのページはURLがあれば誰でも見られる状態になります。
完成していないページでも、公開ボタンを押すと検索エンジンにも拾われる可能性があるため、公開前の確認が大切です。
「非公開」はログイン中の自分しか見えない
「非公開」に設定すれば、管理者（ログイン中の自分）以外はそのページを見ることができません。
ただし、「非公開」にしておくとリンクを貼ったり、表示確認したりするときに不便な場合があります。
今回のように練習で「公開」して見た目を確認したい場合は、あとで「ノンインデックス」設定をしておくのが安心です！
③作成中のページは「ノンインデックス」にしておこう
固定ページを作成している途中、検索エンジンにインデックス（登録）されてしまうと、中途半端な内容がGoogleなどに表示されてしまいます。
見栄えが整っていないページや、仮タイトル・仮文章のままのページが検索結果に出てしまうのは、避けたいところですよね。
そんなときは、「ノンインデックス」設定が有効です！
これは、「このページは検索エンジンに登録しないで」と伝える機能です。
公開状態であっても、ノンインデックスにしておけば、Googleなどに表示されません。
①管理画面→設定→表示設定をクリック
②下までスクロールしていくと「検索エンジンがサイトをインデックスしないようにする」があるのでチェック
③変更を保存
完成したら「チェックを外す」のも忘れずに！
ノンインデックスのままでは、せっかく完成したページも検索エンジンに評価されません。
ページが整ったら、必ずチェックを外して再度「更新」しましょう。（今回は練習なので不要です）
枠だけ作ってみよう（題名・スラッグだけ）
まずはページの「骨組み」だけを用意してみましょう。
後で内容をコピペしたりブロックで装飾するので、今の時点では「タイトル」と「スラッグ」だけ入力すればOKです。
固定ページに必要な項目（最低限）
作っておく固定ページの一覧（練習用）
| ページタイトル | スラッグ（URL末尾） |
|---|
| Topページ | （入力不要） |
| お店について | about |
| メニュー | menu |
| お知らせ | news |
| アクセス | access |
| お問い合わせ | contact |
| サイトマップ | sitemap |
| よくある質問 | faq |
※「Topページ」は「ホーム」ページ（フロントページ。サイトを開いたら真っ先に表示されるページです）。これだけ少し設定が違うので、あとで詳しく解説しますね。
①タイトルを入力（例：お店について）
②スラッグはここでは変更できないこともある。
③そんな時は公開：「今すぐ」をクリックし、「現在」→「公開」
④左上、Wのマークをクリックして管理画面へ。
「固定ページ」→「固定ページ一覧」から該当記事の「クイック編集」をクリック。
スラッグを入力
⑤変更ボタンを押す
馬小屋カフェを真似して作ってみよう
まずは、こちらの見本サイト「馬小屋カフェ」を開きましょう👇
このページには、固定ページで構成されたトップページが表示されています。
上部にあるグローバルメニュー（「お店について」「メニュー」「アクセス」など）から、各ページを開いてみましょう。
このセクションでやること
- グローバルメニュー・フッターメニューから各固定ページを1つずつ開く
- ページ内の本文をまるごとコピー
- 自分のWordPressの管理画面で、準備済みの空の固定ページを開いて貼り付け
- 「公開」しておく
見本の「馬小屋カフェ（仮）」と自分の管理画面。2つのタブで開いてコピペしていけばすぐできますよ。
コピーするページ（6ページ）※Topページとサイトマップは別途作成
以下のページを順番に開き、それぞれ自分のサイトに貼り付けてください。
- お店について（スラッグ：about）
- メニュー（menu）
- お知らせ（news）
- アクセス（access）
- お問い合わせ（contact）
サイトマップ（sitemap）- よくある質問（faq）
Topページ（各固定ページから後程コピペします）
注意：この５ページはコピーだけでは作れません
以下のページは、見本ページをコピーするだけでは機能しません。
このあと、作り方を詳しく解説します。
- お問い合わせページ：フォームが動かない → Contact Form 7 で設置します
- アクセスページ：Googleマップが表示されない → 地図の埋め込み方法を説明します
- お知らせページ：投稿リストは自動で出ません → 投稿リストブロックを使って設定します
- サイトマップ：プラグインを入れて自動で作れます
- Topページ：ヒーローセクションは自分で作ろう→そのあとは固定ページをコピペでOK
まずは「本文が入った状態」を作ろう！
この時点では、デザインや装飾は気にしなくて大丈夫です。
まずは中身のあるページを作って、公開 or 下書き保存しておきましょう。
この作業が終わったら、次のセクションで「なぜこう表示されるのか？」を学んでいきます。
馬小屋カフェで使ったページの作り方
お問い合わせページの作り方
お問い合わせページにフォームを表示する方法（Contact Form 7）
見本の「馬小屋カフェ・お問い合わせページ」、本文をそのままコピーして貼り付けました。
ありがとうございます。
でも、お気づきでしょうか？フォーム部分が「段落」ブロックになってしまい、このままではフォームとして使えません。
以下の手順で、Contact Form 7（CF7）を使って、正しくフォームを表示・送信できるように設定しましょう。
❌ コピーだけでは動きません
下の画像①のように、フォーム部分が単なる「段落」として貼り付けられているので、削除してください。
※このままでは見た目だけのフォームになり、送信できません。
正しいフォームの挿入手順
- 左のブロック一覧をスクロールして「Contact Form 7」ブロックを選択（画像②）
- ページ内にコンタクトフォームの選択ボックスが出るので、既に作成されている「コンタクトフォーム1」などをプルダウンで選びます（画像③）
- 保存し、プレビューでフォームが正しく表示されているか確認してください（画像④）
✉️ テスト送信してみましょう
実際にフォームからメールを送信してみてください。
WordPressに登録してある管理者メールアドレス宛に、通知メールが届けば成功です。
⚠️ メールが届かない場合の対処
フォームが正しく設置されているのにメールが届かない場合、以下のような原因が考えられます。
- 管理者メールアドレスの設定ミス（Gmailなどを再確認）
- サーバー側のメール送信制限（ConoHaの場合は比較的スムーズ）
- フォームの設定（送信元メールアドレスが独自ドメインでない等）
Contact Form 7 はシンプルで使いやすいですが、メール周りのトラブルが起こることもあります。
上手くいかないときは「サーバー名＋Contact Form 7 メールが届かない」などで検索して、同様の事例を探すのが近道です。
アクセスページの作り方
アクセスページは、ユーザーが実際に店舗や事務所へ訪問するための大切なページです。Googleマップの埋め込みだけでは不十分なこともあるため、まずは基本情報をきちんと記載しておきましょう。
✅ アクセスページに入れるべき情報
- 店舗（事務所）名・住所・電話番号
- 営業時間・定休日
- 車・電車・バスでのアクセス方法
- 駐車場の案内
- Googleマップの埋め込み（後述）
❌ 地図のコピペでは動きません
見本の「馬小屋カフェ・アクセスページ」のように、Googleマップが貼ってあると安心しますよね。でも、地図をコピペしても動かない。。。
マップのコードを段落ブロックに貼っても表示されず、HTMLとして処理されません。正しく埋め込むには、次の手順が必要です。
🗺 Googleマップの正しい埋め込み方
- Googleマップ（https://maps.google.co.jp）で自分の店舗・事務所を検索
- 左側の「共有」ボタンをクリック →「地図を埋め込む」タブを選ぶ
- 表示される <iframe> コードをコピー
- WordPress編集画面に戻り、「カスタムHTML」ブロックを追加（「埋め込み」ではない）
- そこにコピーした <iframe> コードを貼り付け
- プレビューして、地図が正しく表示されるか確認
貼り付けるコード例（※実際にはGoogleマップ側で取得したコードを使ってください）：
