SWELLで記事一覧ページを固定ページで作成＆表示する方法

この記事では、Swellで記事一覧を固定ページで表示・作成する方法をご紹介します。

Swellで固定ページに記事一覧を出したい人のよくある悩み

Swellに変えたら記事一覧がどこかに消えた

いちばん多いのが、テーマをSwellに変えたタイミングで記事一覧が見当たらなくなるパターンです。

例えばこんな状態です。

• トップページを固定ページにしたら、ブログ一覧が出なくなった
• どの固定ページを「投稿ページ（ブログ一覧）」に設定すればいいか分からない
• 固定ページにプロフィールやサービス紹介を書きつつ、その下に新着記事を並べたい

このあたりの悩みは、WordPress本体の設定と、Swellならではのブロックやカスタマイザーの設定が頭の中でごちゃごちゃになっていることが原因です。

落ち着いて順番に見れば難しいことはしていないので、今うまくいっていなくても大丈夫です。

固定ページと投稿ページの違いがよく分からない

WordPressを始めたばかりの人がほぼ確実に迷うのが、「固定ページ」「投稿」「投稿ページ」の違いです。

• 固定ページは何に使うのか
• 投稿はどこまでが1記事なのか
• 投稿ページとは別に何か作らないといけないのか

この3つの言葉がごちゃっとした状態だと、Swellで記事一覧を固定ページに表示しようとしても「そもそも何を触ればいいのか」が分かりません。

次の章で表を使って整理するので、いまは「ここがあいまいだと混乱するんだな」とだけ覚えておけばOKです。

Swellの機能が多くて、どれで記事一覧を作ればいいか迷う

Swellは便利な機能が多いので、記事一覧の作り方も一通りではありません。

• WordPressの設定から「投稿ページ」として記事一覧を出す
• 固定ページの中に「投稿リスト」ブロックを置いて一覧を出す
• 人気記事一覧テンプレートやタブ切り替えで見せ方を工夫する

どれも間違いではなく、それぞれ役割が違います。

この記事では、このあと代表的なパターンを整理していくので、「自分のブログにはどれが合いそうか」をイメージしながら読み進めてみてください。

Swellで記事一覧と固定ページの基本構造をまず理解しよう

投稿・固定ページ・投稿ページの違いを表で整理

まず、WordPressの3つの概念を表にして見てみましょう。

項目	投稿	固定ページ	投稿ページ（ブログページ）
主な用途	ブログ記事・お知らせなど	プロフィール、LP、問い合わせなど	新着記事一覧をまとめて表示
URLの増え方	記事ごとに増える	必要なページ分だけ増える	1ページのみ
時系列	新しい順に並ぶ	時系列の概念は基本なし	投稿を時系列で一覧表示
作り方	「投稿」から追加	「固定ページ」から追加	固定ページを1つ作って「投稿ページ」に指定
Swellでの役割	記事の中身そのもの	トップやサービス紹介などの土台	記事一覧ページの土台

この表をざっと眺めると、「投稿ページ」は実体としては固定ページの1つで、そこに投稿が自動で一覧表示されるイメージだと分かると思います。

Swellで記事一覧を固定ページにどう出すか迷ったときは、この3つの役割を思い出してみてください。

Swellならではの「投稿リスト」や一覧テンプレート

Swellには、記事一覧を表示するための機能がテーマ側に用意されています。

• 投稿リストブロック（GutenbergのSwell専用ブロック）
• 人気記事一覧テンプレート
• 記事一覧リストのタブ切り替え機能

これらを組み合わせることで、例えば次のようなことができます。

• 固定ページの中に、条件を絞った記事一覧を配置する
• 新着記事と人気記事をタブで切り替えられるようにする
• カテゴリ別の一覧をブロックごとに並べる

WordPress標準の「投稿ページ」設定だけではできない細かいレイアウトが、Swellのブロックやテンプレートを使うことで柔軟に作れるようになります。

どのパターンを選ぶかがSwell運用の分かれ道

なんとなく触っていると、たまたま狙った表示になったものの、あとから同じことが再現できない…という状態になりがちです。

逆に、この記事で紹介する3つの代表パターンさえ押さえておけば、あとからレイアウトを変えたくなっても対応しやすくなります。

次の章では、Swellで記事一覧と固定ページを組み合わせる代表的なパターンを比較していきます。

Swellで固定ページに記事一覧を作る3つのパターン

Swellで記事一覧と固定ページを組み合わせる3パターン比較

よく使われるのは、次の3パターンです。

パターン	構成イメージ	メリット	デメリット	向いている人
① トップ＝固定ページ ＋ 投稿ページ＝記事一覧	固定ページをホーム、別の固定ページを投稿ページに設定	設定がシンプルで、記事一覧も自動で新着表示	記事一覧ページの上部レイアウトの自由度はそこまで高くない	まずは迷わずブログ一覧を作りたい人
② 固定ページ内に投稿リストブロック	固定ページの本文に投稿リストを配置	上に説明文やバナー、下に記事一覧など自由なレイアウトが可能	自分でブロックを配置するひと手間がある	LP風のトップやサービスページを作りたい人
③ 人気記事テンプレ＋タブ切り替え	固定ページにテンプレを読み込み、タブで新着・人気などを切り替え	回遊性が高く、見た目もリッチにできる	設定項目が多く、慣れるまで少し時間がかかる	PVや収益を意識してブログ運営している人

Swellで記事一覧を固定ページに出したい人の多くは、まず①か②を実現したいはずです。

③は応用編なので、基本の形ができてから挑戦するぐらいのイメージで大丈夫です。

まずは「どのページを記事一覧にするか」を決める

パターンを選ぶ前に、次のような点をざっくり決めておくと方針がブレにくくなります。

• トップページを「ブログ一覧型」にするか「サイト型（固定ページ中心）」にするか
• 記事一覧ページに、説明文やプロフィール、バナーなどを載せたいかどうか
• カテゴリごとに記事一覧を分けたいか、それとも1つの一覧で完結させたいか

このあたりのイメージが固まっていると、「じゃあパターン②で固定ページに投稿リストを2つ並べよう」など、設計が具体的になります。

私のおすすめは「基本は①＋必要に応じて②を追加」

私個人のおすすめとしては、次のような順番で進める方法です。

• まず①（トップ＝固定ページ、投稿ページ＝記事一覧）で土台を作る
• そのあと②の投稿リストブロックで、カテゴリ別や人気記事の一覧を固定ページに足していく

この流れなら、WordPress標準のしくみも押さえつつ、Swellならではの柔軟さも後から取り入れやすくなります。

次の章では、パターン①と②の具体的な操作手順を、Swellの管理画面ベースでお話ししていきます。

Swellの投稿リストで固定ページ記事一覧を作る手順

パターン①：投稿ページとして記事一覧を固定ページに出す

最初に、もっともシンプルな記事一覧の作り方です。

WordPress標準の機能を使うので、Swell以外のテーマでも基本は同じ考え方になります。

1. 固定ページで「ブログ」や「記事一覧」ページを作る

   • タイトルを「ブログ」や「記事一覧」など分かりやすい名前にする
   • 本文は空のままでもOK（あとで説明文を足しても大丈夫）

2. 「設定」→「表示設定」を開く

   • ホームページの表示を「固定ページ」にする
   • ホームページ：トップにしたい固定ページを選ぶ
   • 投稿ページ：さきほど作った「ブログ」や「記事一覧」の固定ページを選ぶ

3. メニューに記事一覧ページを追加

   • 「外観」→「メニュー」から、「記事一覧」固定ページをメニューに追加する
   • グローバルメニューやフッターメニューに入れておくと、読者が探しやすくなる

この方法は、Swellで記事一覧を固定ページと別に用意したいときの基本形です。

「とりあえずブログ一覧ページを作りたい」という段階なら、この設定だけでも十分実用的に使えます。

パターン②：固定ページに投稿リストブロックで記事一覧を出す

次に、Swellらしい柔軟な方法です。

固定ページの本文の中に投稿リストブロックを置くことで、好きな位置に記事一覧を挿し込めます。

1. 記事一覧を表示したい固定ページを開き、ブロックエディタで編集する

2. 記事一覧を出したい位置で「＋」ボタンを押し、「Swellブロック」を選ぶ

3. 「投稿リスト」ブロックを選択する

4. 右側の設定パネルで、次のような項目を調整する

   • 表示件数
   • レイアウト（カード型、リスト型など）
   • カラム数
   • 並び順（新着順、古い順など）
   • 絞り込み（カテゴリ、タグ、カスタム投稿タイプなど）

設定のイメージを表にまとめると、次のような感じです。

設定項目	よく使うおすすめ値	説明
表示件数	6〜12件	多すぎるとスクロールが大変なので、まずは10件前後から試す
レイアウト	カード型	サムネイルが大きく、直感的に内容が伝わりやすい
カラム数	PC：3カラム前後、スマホ：1カラム	スマホで文字が読みにくくならないように注意
並び順	新着順	最新の記事から見せたいときの定番設定
絞り込み	カテゴリ・タグ・投稿タイプ	「初心者向けだけ」「実績だけ」など、目的に合わせて調整

このパターンを使うと、例えば次のような使い方ができます。

• トップページの途中に「新着記事」の一覧を出す
• サービス紹介ページの下に「お客様の声」や「事例記事」の一覧を並べる
• プロフィールページの下に「この人の人気記事」をまとめる

固定ページの好きな場所に記事一覧を挿し込めるので、「見せたい情報の流れ」を自分で組み立てやすくなるのが大きなメリットです。

応用：人気記事一覧テンプレートやタブ付き一覧の使い方

Swellには、人気記事一覧やタブ切り替え付き一覧を簡単に作れるテンプレートも用意されています。

• 人気記事一覧テンプレートを固定ページに読み込む
• タブで「新着」「人気」「カテゴリ別」などを切り替えられるパーツを配置する

これらは、PVの多い記事をまとめたいときや、読者にいろいろな入口を用意したいときに便利です。

最初から全部使おうとすると混乱しやすいので、まずは投稿ページや投稿リストブロックで基本の一覧を作り、そのあと余裕が出てきたら人気記事テンプレートなども試してみる、という流れがおすすめです。

Swellの記事一覧が固定ページに表示されないときのチェック

よくあるエラーと原因を一覧で確認

Swellで記事一覧や固定ページまわりの設定をしていると、よくあるトラブルはだいたい次のようなものです。

症状	想定される原因	確認ポイント
真っ白で何も出ない	投稿ページの設定ミス、そもそも投稿が1件もない	「表示設定」の投稿ページの指定、公開済み投稿の有無
一覧が別のページに出てしまう	ホームページと投稿ページの指定が逆	ホームと投稿ページの組み合わせが正しいか
固定ページに投稿リストが出ない	絞り込み条件が厳しすぎる	カテゴリ・タグの指定、非公開・下書き記事の有無
人気記事が0件のまま	アクセスデータが十分にたまっていない	PV集計の設定、キャッシュプラグインとの相性
スマホだけレイアウトが崩れる	カラム数や画像サイズの設定	スマホ時のカラム数、サムネイルの比率やサイズ

上から順番にチェックしていくだけでも、多くのトラブルは解決できます。

「表示設定」でホームと投稿ページを再チェック

Swellに限らず、WordPress標準の「設定」→「表示設定」は一度きちんと見直しておくと安心です。

Swellで記事一覧を固定ページと組み合わせているときは、とくにこの3つの組み合わせが重要です。

設定を変更したあとは、キャッシュ系プラグインを使っている場合、キャッシュを削除してから画面を確認するようにしてください。

投稿リストブロックの絞り込み条件を疑う

固定ページの投稿リストだけがうまく表示されない場合は、ブロック側の絞り込み条件が厳しすぎるケースが多いです。

• 特定のカテゴリだけに絞っている
• タグで絞り込んでいるが、該当の記事がない
• カスタム投稿タイプを指定しているが、まだ投稿していない

一度、絞り込みをすべて解除してみて、何件か記事が表示されるか確認してみましょう。

そこから少しずつ条件を足していくと、どこで表示されなくなるかが分かりやすくなります。

固定ページのSwell記事一覧を見やすくするデザインのコツ

レイアウトとカラム数は「スマホ基準」で決める

今は、多くの読者がスマホからブログにアクセスしています。

そのため、Swellで記事一覧と固定ページのレイアウトを考えるときは、PCではなくスマホでの見え方を基準にするのがおすすめです。

代表的な設定イメージを表にまとめます。

デバイス	レイアウト	カラム数の目安	ポイント
スマホ	カード型	1カラム	1記事ずつ縦に並べると読みやすく、タップもしやすい
タブレット	カード型 or リスト型	2カラム	文字が小さくなりすぎないよう、プレビューで確認する
PC	カード型	3カラム前後	一覧性と読みやすさのバランスが良い

Swellの投稿リストブロックでは、デバイス別にカラム数を変えられるので、必ずスマホ表示も確認しながら調整してみてください。

固定ページの上部に「誰向けの記事一覧か」を一言入れる

記事一覧を固定ページに出すとき、いきなり一覧だけが並んでいると、読者が少し迷いやすくなります。

そこで、記事一覧の上に簡単な説明を入れてあげると、ページのねらいが伝わりやすくなります。

例えば、こんな一文です。

• 「このページでは、Swellの使い方に関する記事を新しい順にまとめています。」
• 「ブログ初心者向けの記事を集めた一覧です。まずは上から順に読んでみてください。」

たった1〜2行でも、「誰に向けたどんな記事一覧なのか」が伝わるだけで、読者の離脱を防ぎやすくなります。

カテゴリ別に記事一覧を分けてあげる

記事数が増えてくると、1つの長い記事一覧だけでは、読者が目的の記事にたどり着きにくくなってきます。

そんなときは、カテゴリ別に記事一覧を分けてあげると親切です。

Swellでは、投稿リストブロックを複数配置すれば、カテゴリごとの一覧を簡単に作れます。

例えば、こんな構成が考えられます。

• 見出し「ブログ運営の基本」→ カテゴリ「ブログ運営」で絞った投稿リスト
• 見出し「Swellの使い方」→ カテゴリ「Swellの使い方」で絞った投稿リスト
• 見出し「収益化ノウハウ」→ カテゴリ「アフィリエイト」などで絞った投稿リスト

こうしてあげると、読者は自分の興味のある分野に直接アクセスしやすくなり、滞在時間やPVアップにもつながりやすくなります。

よくある質問｜Swellの固定ページ記事一覧

Q1. 投稿ページと固定ページ＋投稿リスト、どっちで記事一覧を作るべき？

A. 迷っているうちは、まず投稿ページで記事一覧を作るのをおすすめします。

Swellで記事一覧を固定ページと組み合わせる前に、WordPress標準の投稿ページのしくみを一度体験しておくと、その後の応用もしやすくなります。

そのうえで、「記事一覧の上に説明文を入れたい」「カテゴリ別に分けたい」と感じてきたら、固定ページの中に投稿リストブロックを追加していく、という順番で進めると迷いにくいです。

Q2. 固定ページに記事一覧を出したら、SEO的に不利になりますか？

A. 一般的な運用であれば、固定ページに記事一覧を出してもSEO的に不利になることはありません。

大事なのは、個別の投稿ページがしっかりインデックスされているかどうかです。

むしろ、カテゴリやテーマごとに記事一覧を整理することで、「このサイトはこの分野に詳しい」と検索エンジンにも伝えやすくなります。

ただし、まったく同じ内容の一覧ページを量産すると重複コンテンツのように見える場合があるので、Swellで記事一覧を固定ページに複数作るときは、役割や絞り込みを少し変えるように意識してみてください。

Q3. Swellの人気記事一覧テンプレートと、普通の投稿リストの違いは？

A. 人気記事一覧テンプレートは、アクセス数などのデータをもとに「よく読まれている記事」をまとめて表示するためのパーツです。

一方、投稿リストブロックは、カテゴリやタグなどの条件で記事を絞り込んで一覧にするためのブロックです。

ざっくり言うと、「アクセス数ベースで人気記事を見せたいときは人気記事テンプレート」、「テーマ別やレベル別などで記事一覧を整理したいときは投稿リスト」と覚えておくと、Swell記事一覧と固定ページの使い分けがしやすくなります。

まとめ｜Swellで記事一覧を固定ページから整えていこう

この記事のポイントを振り返ります

今日からできる最初の一歩としては、「自分のブログでどのパターンのSwell記事一覧と固定ページの組み合わせを作りたいか」をメモに書き出してみてください。

• トップはブログ一覧型にするか、サイト型にするか
• 記事一覧ページに自己紹介やサービス案内を入れたいかどうか
• カテゴリ別や人気記事の一覧も用意したいか

この3つが決まれば、あとはこの記事の手順に沿って、固定ページや投稿リストブロックを少しずつ整えていくだけです。

Swellの機能をうまく使って、自分も読者も気持ちよく使える記事一覧ページを育てていきましょう。