新着記事の一覧に加えて、サイトの紹介やカテゴリー別の記事をトップページに配置する方法です。
プロフィールやカテゴリー別の記事を並べた、いわゆるサイト型にしたくなります。
SWELLなら、ブロックエディタだけで作れます。
この記事の基本構成は、専用テンプレートや追加コードを使わずに作れます。
後半のCSSは、必要な場合だけ使う任意の調整です。
つまずくのは作り方ではなく、固定ページの使い分けです。
そこを先に説明します。
会社のホームページ全体を、ページ構成からお問い合わせまで順に作る手順は「SWELLでコーポレートサイトを作る手順」にまとめています。
固定ページを2枚使う
これが分かれば、あとは中身を作るだけです。
| ページ | 役割 | 中身 |
|---|---|---|
| トップページ用 | サイトの顔になるページ | ここを作り込む |
| 新着記事用 | 記事の一覧を出すページ | 題名だけ。空でよい |
新着記事用のページは、中身を書きません。
WordPressの設定で「投稿ページ」に指定すると、記事の一覧が自動で入るためです。
独立した新着記事一覧を用意したい場合は、投稿ページ用の固定ページも指定します。
投稿ページを指定しなくてもカテゴリーページや投稿リストブロックは利用できます。
固定ページ2枚は本稿の構成例で、すべてのサイトに必須ではありません。
作る手順
1. 固定ページを2枚つくる
固定ページ → 新規追加で2枚作ります。
- トップページ用（スラッグは
topなど） - 新着記事用（スラッグは
archiveなど）
新着記事用は題名だけ入れて、そのまま公開します。
2. トップページ用の表示設定を整える
中身を作る前に、このページ単体の表示設定を変えます。
編集画面の右側、SWELL設定のところです。
| 項目 | どうするか | なぜ |
|---|---|---|
| サイドバー | 非表示 | 本例では本文を広く使う。サイドバーが必要なら残す |
| 目次 | 非表示 | 見出しが多いので勝手に目次が出る |
| 目次前の広告 | 非表示 | 同上 |
| コンテンツ下の余白 | 無くす | フッターとの間が空きすぎる場合 |
記事タイトルは消さなくて構いません。
トップページに指定すると自動で表示されなくなります。
3. サイト情報のエリアを作る
フルワイドブロックで土台を作ります。
表示幅は3段階から選べます。
| 幅 | 見え方 |
|---|---|
| 記事と同じ | 本文と同じ幅。まとまって見える |
| サイト幅 | 少し広い。トップページ向き |
| フルワイド | 画面いっぱい。背景色を敷くとき |
その中にカラムブロックを置いて、2分割にします。
この区画のh2見出しの下に、左右それぞれの小見出し（h3）を入れます。
上位のh2がない構成なら、左右の見出しをh2にするなど文書全体の階層に合わせてください。
| 場所 | 配置する内容 |
|---|---|
| 左 | 投稿リスト（新着記事）と、その下にSWELLボタン |
| 右 | プロフィール |
SWELLボタンのリンク先は、さきほど作った新着記事用のページにします。
投稿リストの見出しタグは div をおすすめします。
この例では記事名を見出しにしないためdivにします。
記事名を小見出しとして扱う設計なら、上位のh3に対してh4を使うなど、ページ全体の階層に合わせてください。
見出しタグを使うだけで階層が崩れるわけではありません。
4. カテゴリーのエリアを作る
カテゴリーごとに、同じ形を繰り返します。
フルワイドで土台を作り、背景色を変えると区切りが分かりやすくなります。
投稿リストの設定はこうしています。
| 設定 | 値 | なぜ |
|---|---|---|
| 表示する投稿数 | 6 | 2行か3行で収まる |
| レイアウト | カード型 | 画像が出て選びやすい |
| 並び順 | 人気順 | よく読まれている記事が上に来る |
| タイトルのHTMLタグ | h3 | フルワイドの見出しが h2 なので、その下に入る |
| Pickup | カテゴリーを指定 | 忘れると全記事から拾ってしまう |
同じ記事が並ぶ場合は、まずPickupのカテゴリー指定を確認します。
どのカテゴリーの枠にも同じ記事が並んだら、ここを見てください。
投稿リストのタイトルを h3 にすると、見出しの階層がきれいに揃います。
フルワイドの見出しが h2、その中の記事名が h3、という形です。
5. トップページに指定する
最後に、作ったページをトップページとして登録します。
- 設定 → 表示設定を開く
- ホームページの表示を「固定ページ」にする
- ホームページにトップページ用を選ぶ
- 投稿ページに新着記事用を選ぶ
投稿ページの指定を忘れないでください。
ここが空だと、新着記事用のページを開いても中身が出ません。
仕上げ
メインビジュアルは、カスタマイザーから設定します。
外観 → カスタマイズ → トップページです。
固定ページの中身とは別の場所なので、探すと迷います。
プロフィールに点が出るとき
プロフィールのリストに「●」が付くことがあります。
トップページのプロフィールだけを調整する場合は、追加CSSに以下を入れます。
ホームページに固定ページを指定した構成の、本文内プロフィールに範囲を限定しています。
.home.page #main_content .post_content .p-authorBox ul {
list-style: none;
padding-left: 0;
}お使いのバージョンで点が出ていなければ、入れる必要はありません。
見た目の設定は、こちらにまとめています。
トップページにローディング画面を出す方法もあります。
まとめ
- 固定ページを2枚作る。トップページ用と、中身が空の新着記事用
- トップページ用はサイドバーと目次を非表示にする
- フルワイド＋カラム＋投稿リストの3つで組める。コードは要らない
- 投稿リストのPickupでカテゴリーを指定する。忘れると全記事から拾う
- 見出しは フルワイド=h2、記事名=h3 に揃える
- 設定 → 表示設定で、ホームページと投稿ページの両方を指定する
- メインビジュアルはカスタマイザー側
この記事は2026年9月16日時点で確認しました。
SWELLのカスタマイズは、目的別にまとめています。
2026年10月1日補足：ホームページ・投稿ページの変更前に、現在の指定とメニューのリンク先を記録します。
公開後はPC・スマホで新着一覧へのボタン、カテゴリーの絞り込み、TabとEnterでの移動を確認します。
戻す場合は「表示設定」の指定を元に戻し、変更したメニューも復元します。
既存記事のURLを一緒に変更する必要はありません。
実サイトの表示設定や広告設定は今回変更していません。
よくある質問：SWELLでサイト型トップページを作る
SWELLでサイト型トップページは、コードなしで作れますか？
基本構成はフルワイド・カラム・投稿リストなどのブロックで作れます。
プロフィールのリスト記号を調整するCSSは任意です。
トップページ用と新着記事用の固定ページを、それぞれの役割に合わせて設定してください。
固定ページは、なぜ2枚使うのですか？
記事では、トップページ用（サイトの顔になるページ、ここを作り込む）と、新着記事用（記事の一覧を出すページ、題名だけで空でよい）の2枚を使います。
新着記事用は、WordPressの設定で「投稿ページ」に指定すると記事の一覧が自動で入るためです。
固定ページ2枚は本稿の構成例で、すべてのサイトに必須ではなく、投稿ページを指定しなくてもカテゴリーページや投稿リストブロックは利用できます。
トップページ用の表示設定は、どう整えますか？
記事の表では、サイドバーは非表示、目次は非表示（見出しが多いので勝手に目次が出る）、目次前の広告は非表示、コンテンツ下の余白は、フッターとの間が空きすぎる場合に無くします。
記事タイトルは、トップページに指定すると自動で表示されなくなるため、消さなくて構いません。
どのカテゴリーの枠にも同じ記事が並んでしまうときは？
記事では、投稿リストのPickupでカテゴリーを指定します。
忘れると全記事から拾うため、どのカテゴリーの枠にも同じ記事が並んだらここを確認してください。
投稿リストのタイトルをh3にすると、フルワイドの見出しがh2、その中の記事名がh3という形で見出しの階層が揃います。
トップページとして登録するには、どうしますか？
「設定 → 表示設定」を開き、ホームページの表示を「固定ページ」にして、ホームページにトップページ用、投稿ページに新着記事用を選びます。
記事では、投稿ページの指定を忘れないよう注意しています。
ここが空だと、新着記事用のページを開いても中身が出ません。
メインビジュアルは、どこで設定しますか？
カスタマイザーの「外観 → カスタマイズ → トップページ」から設定します。
固定ページの中身とは別の場所なので、探すと迷う、と記事に書かれています。
変更前後に、何を確認しておくとよいですか？ 記事はいつ時点ですか？
記事の補足では、ホームページ・投稿ページの変更前に、現在の指定とメニューのリンク先を記録します。
公開後はPC・スマホで新着一覧へのボタン、カテゴリーの絞り込み、TabとEnterでの移動を確認します。
戻す場合は「表示設定」の指定を元に戻し、変更したメニューも復元します。
記事は2026年9月16日時点で確認した内容で、画面や仕様は変わる可能性があるため、最新は公式で確認してください。
