WordPressに固定トップページを作る方法｜Lightningで「1カラム」が見つからない場合の対処法

2026年7月17日 2026年7月18日

kara3

最初に結論

私の環境では、Lightningの説明にある「1カラム（サブセクション無し）」が表示されませんでした。

そのため、次の方法で固定トップページを作成しました。

「トップページ」と「記事一覧」の固定ページを作る
表示設定でホームページと投稿ページを指定する
追加CSSでトップページのサイドバーを非表示にする
カスタムHTMLで2つの入口を作る
PCとスマートフォンで表示を確認する

設定項目が見つからなくても、追加CSSを使うことで目的の表示に変更できました。

WordPressで固定トップページを作ろうとしたところ、説明にある「1カラム（サブセクション無し）」が私のLightning画面には見つかりませんでした。この記事では、固定ページの設定、追加CSS、PCとスマートフォンの表示調整、記事一覧リンクの404修正まで、実際に行った手順を順番に紹介します。

この記事で分かること

最新投稿一覧を、専用の固定トップページへ変更する方法
Lightningで「1カラム」が見つからない場合の代替方法
PCでは横並び、スマートフォンでは縦並びにする方法
記事一覧へのリンクが404になった場合の確認方法
ChatGPTを使ってHTML・CSSを整えるときの注意点

この記事の確認環境

この記事は、2026年7月に私のWordPress環境で確認した内容です。

WordPress：バージョン7.0.1
Lightning：バージョン15.37.1
Lightning Pro：未使用
VK All in One Expansion Unit：バージョン9.118.0
使用ブラウザ：Edge

WordPressやLightningの更新状況によって、設定項目や画面表示が異なる場合があります。

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

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

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

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

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

WordPressの変更前のトップページに最新投稿一覧が表示されている画面 — 図1　変更前のトップページ。最新投稿の一覧だけが表示されていました。

目次へ戻る ↑

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

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

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

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

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

目次へ戻る ↑

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

1．トップページ

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

固定ページ
↓
新規固定ページを追加

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

2．記事一覧

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

補足

「記事一覧」の編集画面が空白でも異常ではありません。投稿ページに指定した固定ページは、WordPressが投稿一覧を自動表示します。

目次へ戻る ↑

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

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

設定
↓
表示設定

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

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

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

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

WordPressの表示設定でトップページと記事一覧を指定した画面 — 図2　「設定」→「表示設定」で、ホームページを「トップページ」、投稿ページを「記事一覧」に指定した状態。

目次へ戻る ↑

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

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

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

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

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

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

Lightningデザイン設定に目的の1カラム設定が表示されていない画面 — 図3　固定ページの編集画面。Lightningデザイン設定は表示されていますが、私の環境では目的の1カラム設定を確認できませんでした。

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

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

目次へ戻る ↑

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

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

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

外観
↓
カスタマイズ
↓
追加CSS

CSSを追加する前の注意

すでに入力されているCSSは削除せず、一番下へ追加する
現在のCSSをメモ帳などへコピーして保存する
テーマの構造によっては、同じ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では左右に並び、スマートフォンでは上下に並ぶようになりました。