トップページに新着記事が並んでいるだけだと、何のサイトか伝わりません。
プロフィールやカテゴリー別の記事を並べた、いわゆるサイト型にしたくなります。
SWELLなら、ブロックエディタだけで作れます。
専用のテンプレートも、コードも要りません。
つまずくのは作り方ではなく、固定ページの使い分けです。
そこを先に説明します。
会社のホームページ全体を、ページ構成からお問い合わせまで順に作る手順は「SWELLでコーポレートサイトを作る手順」にまとめています。
固定ページを2枚使う
これが分かれば、あとは中身を作るだけです。
| ページ | 役割 | 中身 |
|---|---|---|
| トップページ用 | サイトの顔になるページ | ここを作り込む |
| 新着記事用 | 記事の一覧を出すページ | 題名だけ。空でよい |
新着記事用のページは、中身を書きません。
WordPressの設定で「投稿ページ」に指定すると、記事の一覧が自動で入るためです。
独立した新着記事一覧を用意したい場合は、投稿ページ用の固定ページも指定します。
投稿ページを指定しなくてもカテゴリーページや投稿リストブロックは利用できます。固定ページ2枚は本稿の構成例で、すべてのサイトに必須ではありません。
作る手順
1. 固定ページを2枚つくる
固定ページ → 新規追加で2枚作ります。
- トップページ用（スラッグは
topなど） - 新着記事用（スラッグは
archiveなど）
新着記事用は題名だけ入れて、そのまま公開します。
2. トップページ用の表示設定を整える
中身を作る前に、このページ単体の表示設定を変えます。
編集画面の右側、SWELL設定のところです。
| 項目 | どうするか | なぜ |
|---|---|---|
| サイドバー | 非表示 | トップページに記事用のサイドバーは要らない |
| 目次 | 非表示 | 見出しが多いので勝手に目次が出る |
| 目次前の広告 | 非表示 | 同上 |
| コンテンツ下の余白 | 無くす | フッターとの間が空きすぎる場合 |
記事タイトルは消さなくて構いません。
トップページに指定すると自動で表示されなくなります。
3. サイト情報のエリアを作る
フルワイドブロックで土台を作ります。
表示幅は3段階から選べます。
| 幅 | 見え方 |
|---|---|
| 記事と同じ | 本文と同じ幅。まとまって見える |
| サイト幅 | 少し広い。トップページ向き |
| フルワイド | 画面いっぱい。背景色を敷くとき |
その中にカラムブロックを置いて、2分割にします。
この区画のh2見出しの下に、左右それぞれの小見出し（h3）を入れます。上位のh2がない構成なら、左右の見出しをh2にするなど文書全体の階層に合わせてください。
| 場所 | 入れるもの |
|---|---|
| 左 | 投稿リスト（新着記事）と、その下にSWELLボタン |
| 右 | プロフィール |
SWELLボタンのリンク先は、さきほど作った新着記事用のページにします。
投稿リストの見出しタグは div をおすすめします。
すぐ上に h3 があるので、リスト側も見出しにすると階層が崩れます。
4. カテゴリーのエリアを作る
カテゴリーごとに、同じ形を繰り返します。
フルワイドで土台を作り、背景色を変えると区切りが分かりやすくなります。
投稿リストの設定はこうしています。
| 設定 | 値 | なぜ |
|---|---|---|
| 表示する投稿数 | 6 | 2行か3行で収まる |
| レイアウト | カード型 | 画像が出て選びやすい |
| 並び順 | 人気順 | よく読まれている記事が上に来る |
| タイトルのHTMLタグ | h3 | フルワイドの見出しが h2 なので、その下に入る |
| Pickup | カテゴリーを指定 | 忘れると全記事から拾ってしまう |
Pickupの指定忘れが一番多いミスです。
どのカテゴリーの枠にも同じ記事が並んだら、ここを見てください。
投稿リストのタイトルを h3 にすると、見出しの階層がきれいに揃います。
フルワイドの見出しが h2、その中の記事名が h3、という形です。
5. トップページに指定する
最後に、作ったページをトップページとして登録します。
- 設定 → 表示設定を開く
- ホームページの表示を「固定ページ」にする
- ホームページにトップページ用を選ぶ
- 投稿ページに新着記事用を選ぶ
投稿ページの指定を忘れないでください。
ここが空だと、新着記事用のページを開いても中身が出ません。
仕上げ
メインビジュアルは、カスタマイザーから設定します。
外観 → カスタマイズ → トップページです。
固定ページの中身とは別の場所なので、探すと迷います。
プロフィールに点が出るとき
プロフィールのリストに「●」が付くことがあります。
気になる場合は、追加CSSでこれを入れてください。
.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を一緒に変更する必要はありません。実サイトの表示設定や広告設定は今回変更していません。
