固定トップページを作ろうと思った理由

WordPressでブログを始めた当初、私のサイトのトップページには、公開した記事が新しい順に並んでいました。記事が少ないうちは特に問題を感じませんでしたが、記事が増えるにつれ、サイトに次の2種類の内容があることが伝わりにくくなりました。

• 心臓手術を受けた実体験
• ChatGPTを使ったWordPressブログ作成の実践記

初めて訪れた方が、どこから読めばよいのか迷わないようにするため、2つの入口を設けた固定トップページを作ることにしました。

変更前は、次のように最新の投稿一覧がトップページに表示されていました。

目次へ戻る ↑

WordPressの固定トップページとは

WordPressでは、トップページに最新の投稿一覧を表示する方法と、自分で作成した固定ページをホームページとして表示する方法があります。

WordPress公式の「静的フロントページの作成」でも、固定ページをホームページに指定し、別の空ページを投稿ページとして設定する方法が案内されています。

私の場合は、固定トップページに次の2つの入口を設けました。

• 心臓手術体験記を読む
• ChatGPT×WordPress実践記を読む

投稿一覧は削除せず、別の「記事一覧」ページとして残します。これにより、初めて訪れた方は目的別の入口を選び、従来どおり新着記事も確認できます。

目次へ戻る ↑

最初に2つの固定ページを作成した

1．トップページ

WordPress管理画面で、次の順に進みます。

タイトルは「トップページ」としました。このページには、後からサイトの説明と2つの入口を追加します。

2．記事一覧

同じ方法で「記事一覧」という固定ページを作成しました。本文は空白のままで構いません。WordPress側でこのページを「投稿ページ」に指定すると、公開した投稿の一覧が自動的に表示されます。

目次へ戻る ↑

表示設定でトップページと記事一覧を指定した

2つの固定ページを公開した後、次の場所を開きました。

「ホームページの表示」を「固定ページ」に変更し、次のように指定します。

• ホームページ：トップページ
• 投稿ページ：記事一覧

最後に「変更を保存」を押します。これで、サイトのトップには作成した固定ページが表示され、最新投稿一覧は別ページに表示されます。

次の画像は、「ホームページ」と「投稿ページ」の設定内容を確認した画面です。

目次へ戻る ↑

Lightningの「1カラム」が見つからなかった

トップページでは右側のサイドバーを表示せず、本文を広く使いたいと考えました。ところが、説明にある「1カラム」や「1カラム（サブセクション無し）」が、私の管理画面には見つかりませんでした。

Lightning公式の「レイアウトの設定」では「1カラム」「1カラム（サブセクション無し）」が案内されていますが、私の環境では同じ選択肢を確認できませんでした。

次の場所を確認しました。

• 外観 → カスタマイズ → Lightningレイアウト設定
• 固定ページ編集画面の「Lightningデザイン設定」
• 別のブラウザで同じ画面

固定ページの編集画面にはLightningデザイン設定がありましたが、目的の「1カラム（サブセクション無し）」を確認できませんでした。

設定が表示されなかった正確な原因は特定できていません。Lightningのバージョンや利用環境などによって画面が異なる可能性があるため、この記事では私の環境で実際に動作した方法として紹介します。

画面と説明が一致しない場合の確認方法は、WordPressの画面とChatGPTの説明が違うときは？｜スクリーンショットで確認した方法でも紹介しています。

目次へ戻る ↑

追加CSSでトップページだけ1カラムにした

設定項目を探し続けるのではなく、追加CSSでトップページだけサイドバーを非表示にし、本文を横幅いっぱいにする方法へ切り替えました。

管理画面では、次の場所を開きます。

私の環境で使用した基本部分は次の内容です。

/* トップページのサイドバーを非表示 */
body.home.page .siteContent .subSection,
body.home.page .siteContent .sideSection {
  display: none !important;
}

/* トップページの本文を横幅いっぱいにする */
body.home.page .siteContent .mainSection {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* トップページのページ名とパンくずを非表示 */
body.home.page .page-header,
body.home.page .entry-header,
body.home.page .breadcrumb {
  display: none !important;
}

このCSSは、通常の記事やほかの固定ページではなく、固定トップページだけを対象にしています。公開後は必ず、別ブラウザとスマートフォンでも確認してください。

目次へ戻る ↑

2つの入口をカスタムHTMLで作成した

トップページ本文には「カスタムHTML」ブロックを追加し、2つの入口を作りました。以下は、構造を分かりやすくするための簡略版です。色や枠、ボタンの見た目は別のCSSで調整します。

<div class="kara-home__grid">
  <article class="kara-home__card kara-home__card--heart">
    <p class="kara-home__number">01</p>
    <p class="kara-home__label">心臓手術を受ける方・ご家族へ</p>
    <h3 class="kara-home__card-title">心臓手術体験記を読む</h3>
    <p>手術決定、入院、ICU、退院後、自宅療養、仕事復帰までを記録しています。</p>
    <a class="kara-home__button kara-home__button--heart"
       href="https://kara3.com/%E5%BF%83%E8%87%93%E6%89%8B%E8%A1%93%E4%BD%93%E9%A8%93%E8%A8%98%EF%BD%9C%E7%9B%AE%E6%AC%A1/">心臓手術体験記の目次へ →</a>
  </article>

  <article class="kara-home__card kara-home__card--chatgpt">
    <p class="kara-home__number">02</p>
    <p class="kara-home__label">ブログ初心者・ChatGPTを使いたい方へ</p>
    <h3 class="kara-home__card-title">ChatGPT×WordPress実践記を読む</h3>
    <p>原稿作成、WordPress、SEO、X投稿、Site Kitの確認方法を紹介しています。</p>
    <a class="kara-home__button kara-home__button--chatgpt"
       href="https://kara3.com/chatgpt%E3%81%A7%E3%83%96%E3%83%AD%E3%82%B0%E4%BD%9C%E6%88%90%EF%BD%9C%E7%9B%AE%E6%AC%A1/">ChatGPTでブログ作成の目次へ →</a>
  </article>
</div>

リンク部分には、現在公開されている心臓手術体験記の目次とChatGPTでブログ作成の目次のURLを設定しています。

ChatGPTにWordPress用HTMLを作ってもらう流れは、ChatGPTでWordPress用HTMLを作る方法｜コードが分からない私が実際に使った手順でも紹介しています。

目次へ戻る ↑

PCでは横並び、スマートフォンでは縦並びにした

最初に作成した状態では、PCで見ても2つの入口が縦に並んでいました。そこで、追加CSSの一番下に次の設定を加えました。

/* PCでは横並び */
@media screen and (min-width: 782px) {
  .kara-home__grid {
    display: flex !important;
    flex-direction: row !important;
    gap: 28px !important;
  }
  .kara-home__card {
    width: calc(50% - 14px) !important;
    flex: 1 1 0 !important;
  }
}

/* スマートフォンでは縦並び */
@media screen and (max-width: 781px) {
  .kara-home__grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 22px !important;
  }
  .kara-home__card {
    width: 100% !important;
  }
}

設定後、PCでは左右に並び、スマートフォンでは上下に並ぶようになりました。

スマートフォンでは、文字やボタンが狭くならないように、2つの入口を縦に表示しました。

表示が崩れた場合の戻し方

CSSを追加した後に表示が崩れた場合は、今回追加したCSS部分だけを削除し、「公開」を押します。事前に保存しておいた元のCSSへ戻せば、変更前の状態に戻せます。

CSSを削除しても表示が変わらない場合は、ブラウザの再読み込みやキャッシュの削除も確認してください。

目次へ戻る ↑

「新着記事を一覧で見る」が404になった

トップページに「新着記事を一覧で見る」というリンクを設置し、リンク先をhttps://kara3.com/blog/にしました。しかし、実際に押すと「ページが見つかりません」と表示されました。

私の場合は、次のように「ページが見つかりません」と表示されました。

私の場合の原因は、リンクでは/blog/を指定していたのに、固定ページ「記事一覧」のスラッグが日本語の「記事一覧」のままだったことです。

次の画像では、変更前のスラッグが「記事一覧」になっている箇所を確認できます。

私は固定ページ一覧のクイック編集から、スラッグを次のように変更しました。

変更後は、次の場所を開き、設定内容を変えずに「変更を保存」を押しました。

その後、再度/blog/を開くと、記事一覧が正しく表示されました。

スラッグを変更した後は、次のように「blog」と表示されました。

目次へ戻る ↑

リンクがリンクだと分かりにくかった

リンクが正常に動くようになっても、文字だけでは、マウスを載せるまでリンクだと分かりにくい状態でした。そこで、次のように見た目を変更しました。

• 心臓手術体験記は赤い背景のボタンにする
• ChatGPT×WordPress実践記は青い背景のボタンにする
• 新着記事一覧は青い枠線付きのボタンにする
• 文字を太字にし、右側に矢印を付ける

単にリンクを設定するだけでなく、読者に「ここを押せる」と伝わることが重要だと分かりました。

目次へ戻る ↑

今回、ChatGPTをどのように使ったか

今回のトップページ作成では、ChatGPTを次の用途に使いました。

• トップページの構成案を整理する
• カスタムHTMLと追加CSSのたたき台を作る
• 表示が横並びにならない原因を整理する
• 404の原因を画面と照らし合わせて確認する
• リンクを分かりやすいボタンにするCSSを考える

ブログ記事の構成を考える方法については、ChatGPTでブログ記事のネタを増やす方法｜読者の悩みから30記事を作る手順でも紹介しています。

一方で、ChatGPTから案内された設定項目が、実際の画面にはないこともありました。そのため、画面のスクリーンショットを確認し、表示結果をPCとスマートフォンで一つずつ確かめながら修正しました。

目次へ戻る ↑

完成後に確認したこと

作成後は、WordPressの編集画面だけでなく、実際の公開画面で次の項目を確認しました。

• PCでは2つの入口が横並びになっているか
• スマートフォンでは縦並びになっているか
• 心臓手術体験記の目次へ移動できるか
• ChatGPT×WordPressの目次へ移動できるか
• 新着記事一覧が404にならないか
• 文字やボタンが画面からはみ出していないか
• 別のブラウザでも同じように表示されるか

CSSの変更が反映されないときは、WindowsではCtrl＋F5を押して再読み込みしました。ブラウザに古いCSSが残っている場合があるためです。

目次へ戻る ↑

固定トップページを作って終わりではない

トップページを作った目的は、見た目を整えることだけではありません。読者が「心臓手術体験記」「ChatGPT×WordPress実践記」「新着記事一覧」の中から、読みたい内容を選びやすくすることが目的です。

今後はGoogle Site Kitなどを使い、次の数字を確認していきます。

• トップページの閲覧数
• 心臓手術体験記の目次が読まれた回数
• ChatGPT×WordPressの目次が読まれた回数
• 新着記事一覧が読まれた回数
• XなどのSNSから来た訪問者数
• 訪問者が複数の記事を読んだか

トップページを作ったことで、本当に読者が記事を見つけやすくなったのかを、数字で確認しながら改善していきます。

公開後にブログが読まれたか確認する方法は、Xに投稿したあとブログが読まれたか確認する方法｜Site Kitで私が確認した項目で紹介しています。

目次へ戻る ↑

まとめ

今回行った作業は次のとおりです。

1. 固定ページ「トップページ」を作成した
2. 固定ページ「記事一覧」を作成した
3. 表示設定でホームページと投稿ページを指定した
4. Lightningの1カラム設定が見つからないことを確認した
5. 追加CSSでトップページだけを1カラムにした
6. 2つの入口をカスタムHTMLで作成した
7. PCでは横並び、スマートフォンでは縦並びにした
8. 記事一覧ページのURLとリンク先を一致させ、404を修正した
9. リンクをボタン化して、押せることが分かるようにした
10. 別ブラウザとスマートフォンで表示を確認した

説明どおりの設定項目が見つからなくても、別の方法で目的のトップページを作ることができました。同じようにWordPressやLightningの画面で迷っている方の参考になれば幸いです。

よくある質問

記事の先頭へ戻る ↑