【SWELLテーマ】記事一覧の作り方を完全攻略！おすすめ設定と実例8選

Swellを使っているのに、思い描いたとおりの「記事一覧ページ」が作れなくてモヤっとしていませんか。

この記事では、Swellの記事一覧まわりをまとめて整理しながら、「とりあえずこれだけ押さえれば困らない」という実用的なポイントをお伝えします。

この記事を読むと分かること

Swellで作れる記事一覧の種類とそれぞれの違い
投稿ページ・固定ページ・投稿リストブロックの使い分け
新着・人気・カテゴリ別など、目的別の一覧パターン
おしゃれで読みやすい一覧デザインのコツと設定例
記事一覧が表示されない・崩れるときのチェックポイント

結論から言うと、Swellの記事一覧は「WordPressの基本設定」＋「投稿リストブロック」＋「少しのデザイン調整」を押さえればかなり自由に作れます。肩の力を抜いて、順番に一緒に見ていきましょう。

Swell 記事一覧の種類を整理しよう
基本設定で作るSwellの記事一覧ページ
投稿リストブロックで自由なSwellの記事一覧を作る
新着・人気・タブ切り替えで回遊性の高いSwell記事一覧にする
デザインとカスタマイザーでSwell記事一覧をおしゃれに整える
トラブルシューティング：Swell 記事一覧が表示されない・崩れるとき
よくある質問（FAQ）
まとめ：Swellの記事一覧で「探しやすいサイト」を作ろう

Swell 記事一覧の種類を整理しよう

ごとう

最初に、Swellで用意できる記事一覧のパターンをざっくり整理しておきます。ここを押さえておくと、「自分のサイトはどの作り方を選べばいいか」が見えやすくなります。

Swellの記事一覧でよく使うパターン一覧

まずは、Swellでよく使われている記事一覧パターンを表にまとめてみます。「自分のサイトはどれに近いかな」と考えながら眺めてみてください。

パターン名	主に使う機能	主な用途	難易度の目安
基本のブログ記事一覧	投稿ページ設定	シンプルなブログ型サイト	かんたん
固定ページのブログ記事一覧	固定ページ＋投稿ページ設定	サイト型トップ＋別にブログ一覧	ふつう
トップページの新着記事一覧	投稿リストブロック	フロントに新着を少しだけ表示	かんたん
カテゴリ別記事一覧	投稿リストブロックの絞り込み	カテゴリーページや特集ページ	ふつう
人気記事一覧	人気記事ウィジェットや専用ページ	よく読まれている記事のまとめ	ふつう
タブ切り替え記事一覧	タブ系ブロック＋投稿リスト	新着・人気・カテゴリを一画面で表示	ややむずかしい
カスタム投稿タイプ記事一覧	カスタム投稿＋投稿リスト	事例紹介・商品紹介など	ややむずかしい

同じ「Swellの記事一覧」でも、やりたいことによって使う機能が少しずつ違います。すべてを一気に触ろうとすると混乱しやすいので、最初は「基本のブログ記事一覧」か「固定ページを使った記事一覧」から始めるのがおすすめです。

どのSwellの記事一覧パターンを選べばいい？

自分のサイトがどんなスタイルかで、選ぶべき記事一覧の作り方も変わってきます。ざっくり分けると次のようなイメージです。

日記や雑記ブログ中心 → 基本のブログ記事一覧メインでOK
特化ブログ＋解説ページが多い → サイト型トップ＋固定ページの一覧ページ
商品レビューや事例紹介が多い → カテゴリ別一覧やカスタム投稿タイプの一覧
PVや収益を重視している → 新着＋人気記事一覧＋タブ切り替えで回遊性アップ

この記事では、できるだけ多くのパターンをカバーしつつ、「まずはここから触ると迷いにくい」という順番で説明していきます。

【深呼吸タイム】

稼ぐために必要な3つのポイントを知っていますか？

稼げる広告
稼げるキーワード
稼げるライティング

これら全部を暴露します。

⇒まずはあっさり10万稼ぐためのメルマガ

基本設定で作るSwellの記事一覧ページ

ごとう

ここからは、WordPressとSwellの基本機能だけで作れる、一番ベーシックな記事一覧ページを見ていきます。つまずきやすい「投稿ページ」「固定ページ」の違いも、ここで一度整理してしまいましょう。

投稿ページを使った基本のブログ記事一覧

もっともシンプルな記事一覧は、「投稿ページ」にブログ記事を自動で並べるやり方です。WordPress標準の機能なので、特別なブロックを置かなくても一覧が作れます。

大まかな流れはこんな感じです。

固定ページで「ブログ」や「記事一覧」といったページを新規作成する
管理画面の「設定」→「表示設定」を開く
「投稿ページ」で、先ほど作ったページを選ぶ
変更を保存すると、そのページが自動的にブログ記事一覧になる

この方法で作った一覧は、基本的に「新しい投稿から順番に」並びます。まずは普通のブログ型にしたいだけなら、この設定だけでも十分です。

一方で、投稿ページに任せた一覧は、中身を細かくカスタマイズしにくいという弱点もあります。ヘッダーのすぐ下からいきなり記事一覧が並ぶ形になりやすく、「一覧の上に説明文を入れたい」「カテゴリ別の一覧も一緒に載せたい」といった細かいレイアウトには向きません。

固定ページで「記事一覧ページ」を作る手順

もう少し柔軟に作りたい場合は、固定ページの中に自分で記事一覧を配置する方法がおすすめです。投稿ページではなく、固定ページ側に一覧を置くイメージですね。

流れは次のようになります。

固定ページで「記事一覧」などのページを新規作成する
本文に、あとで説明する「投稿リストブロック」を挿入する
必要に応じて、ページ上部に説明文やアイキャッチ画像を置く
メニューに「記事一覧」ページを追加して、ナビから飛べるようにする

投稿ページで作る一覧との大きな違いは、「固定ページの中身を好きなように組み立てられる」ことです。例えば、ページ上部に自己紹介やサイトの説明、その下に新着記事一覧、さらにその下にカテゴリ別の記事一覧…といったサイト型のレイアウトも作りやすくなります。

どちらの作り方を選ぶか迷った場合は、次の表を参考にしてみてください。

サイトのイメージ	向いている記事一覧の作り方
シンプルなブログ型	投稿ページを使った基本のブログ記事一覧
トップページをサイト型にしたい	固定ページ＋投稿リストブロックで一覧を作る
解説ページやLPも多いサイト	固定ページで専用の記事一覧ページを作る

自分のサイトのゴールに近い方を一つ決めて、次の章に進んでみてください。

【ちょっと一息♪】

私の妻がどうやって7日で初報酬を得て5万円の不労所得を得られるようになったか？
その全貌を知りたくありませんか？

⇒今すぐその秘密を見る

投稿リストブロックで自由なSwellの記事一覧を作る

ごとう

ここからは、多くのSwellユーザーがお世話になる「投稿リストブロック」を使って、自由度の高い記事一覧を作る方法を紹介します。トップページやカテゴリーページをおしゃれに見せたいときは、このブロックを避けて通れません。

投稿リストブロックの基本設定を押さえよう

投稿リストブロックは、Swell専用のブロックで、条件に合う記事をまとめて表示できます。ブロックを設置したあと、右側の設定パネルから細かい調整ができるようになっています。

よく触る設定項目をざっくりまとめると次のようなイメージです。

項目	内容のイメージ	よく使う設定例
表示レイアウト	カード型 / リスト型 / サムネイル型など	ブログならカード型が使いやすい
表示カラム数	1〜4列など、何列で並べるか	PCは2〜3列、スマホは1列にする
表示件数	何記事分を一覧として出すか	4〜8件くらいがバランス良い
並び順	新着順 / 更新日順 / ランダムなど	基本は新着順、人気記事は別の一覧で作る
絞り込み条件	カテゴリ・タグ・投稿タイプなどでの絞り込み	特集ページやカテゴリ別一覧に便利
表示情報	日付・カテゴリ・抜粋・アイキャッチなど	日付＋カテゴリ＋短めの抜粋が定番
MOREボタン	「もっと見る」ボタンの有無とテキスト	「もっと見る」「全ての記事を見る」など

記事一覧を作るときは、「どんな読者に、どんな記事を見てほしいか」をイメージしながら、表示件数や並び順を決めていくのがコツです。

例えば、トップページの新着一覧なら、件数を少なめにしてカードを大きめに見せた方が「お、更新されているな」と伝わりやすくなります。

カテゴリ・タグ別の記事一覧を作る

投稿リストブロックを使えば、「カテゴリ別」「タグ別」といった絞り込み一覧も簡単に作れます。

カテゴリ「レビュー」だけを並べた一覧ページ
タグ「初心者向け」だけを集めた特集ページ
あるカテゴリの記事＋固定ページを組み合わせたまとめページ

こういったページを用意しておくと、読者は自分に合いそうな記事を探しやすくなり、自然とサイト内を回ってくれるようになります。

実際の作業の流れは次のとおりです。

固定ページを新規作成し、「レビュー記事一覧」などのタイトルを付ける
本文に投稿リストブロックを追加する
絞り込み設定で、該当カテゴリ（またはタグ）を指定する
必要に応じて、ページ上部に説明文やランキングなどを追加する
メニューやトップページから、そのページにリンクを貼る

カテゴリごとに記事一覧ページを用意しておくと、「このジャンルの記事がしっかり揃っているな」と感じてもらいやすくなります。特化ブログを育てたい人は、少しずつ増やしていくと効果を実感しやすいと思います。

★ちょっとだけ宣伝させてください★

「ブログで10万」と聞くと、

センスが必要
文章力が要る

と思われがちですが、実は「勝ちパターン」を知っているかどうかだけなんです。

⇒ブログで10万稼ぐ勝ちパターンとは

一覧の種類	主な目的	向いている配置場所
新着記事一覧	新しい記事の存在に気付いてもらう	トップページ上部、記事下、サイドバー
人気記事一覧	よく読まれる定番記事を押し出す	サイドバー、記事下、プロフィール付近

設定項目	説明のイメージ	デザインへの影響
レイアウト	カード型 / ブログ型 / リスト型など	サイト全体の印象が大きく変わる
PC・SPのカラム数	PCとスマホで何列にするか	スマホを1列にすると読みやすさアップ
サムネイルの比率	16:9 / 4:3 / 正方形など	写真メインなら16:9が無難
表示するメタ情報	日付・更新日・カテゴリ・著者など	入れすぎるとゴチャつく原因になる
抜粋文の表示	抜粋の有無・文字数	クリック前にどんな記事か伝えられる
READ MOREボタン	ボタンの有無とテキスト	行動を促すひと言を入れられる
ホバー時の演出	画像の暗転やズームなど	おしゃれさと読みやすさのバランスが大切

一覧のデザインを整えるときに大事なのは、「欲張って情報を盛り込みすぎない」ことです。日付、カテゴリ、タグ、コメント数、長い抜粋文、ボタン…と全部見せようとすると、特にスマホでは一気に窮屈になります。

まずは、サムネイル、タイトル、日付かカテゴリのどちらか、短めの抜粋（1〜2行）くらいに絞って、余白をしっかりとるのがおすすめです。そのうえで、必要なら少しずつ情報を足してみるとバランスが取りやすくなります。

スマホで読みやすい記事一覧レイアウトのポイント

記事一覧のデザインを考えるときは、最終的にスマホでどう見えるかを基準にした方がうまくいきます。PCで整っていても、スマホで窮屈だと読まれにくいからです。

スマホ時のカラム数は1列を基本にする
サムネイルは縦長にしすぎない
タイトルは2〜3行で収まる長さを意識する
抜粋文は欲張らず2〜3行までにする
ボタンを増やしすぎず、1画面に選択肢を詰め込みすぎない

PCで3カラムにしている場合でも、スマホでは自動で1カラム表示になることが多いです。そのとき各カードの情報量が多すぎると、1記事ごとの塊が縦に長くなりすぎて、スクロールしてもなかなか終わらない一覧になってしまいます。

私の感覚では、スマホの1画面にタイトルが3〜4件ほど見えていると、「上から順に読むか」「気になるところだけつまむか」を読み手がすぐ判断しやすくなります。実機で表示を確認してみるだけでも、改善ポイントがかなり見えてくるはずです。

★ブログでは公開できない裏情報★

私の発行するメルマガではブログでは公開できない秘匿性が高い特別な情報を発信しております。

例えば、

実際に10万稼いだキーワード
今やるべきおススメ広告

などをこっそり暴露しています。ぜひ公開停止する前に受け取ってください。

⇒あっさり10万稼ぐためのメルマガ

トラブルシューティング：Swell 記事一覧が表示されない・崩れるとき

ごとう

最後のほうでよく相談されるのが、「設定したはずなのに一覧が出ない」「なぜか別カテゴリの記事が混ざる」といったトラブルです。ここでは、Swellで記事一覧を作るときによくあるつまずきと、そのチェックポイントを整理しておきます。

よくあるミスとチェックリスト

まずは、記事一覧が思ったように表示されないときにありがちなミスを、表にまとめてみます。

症状	よくある原因	チェックポイント
記事一覧ページが真っ白になる	投稿ページの設定がされていない	「設定」→「表示設定」で投稿ページを確認する
投稿リストブロックが何も出さない	絞り込み条件が厳しすぎる	カテゴリやタグの指定が合っているか見直す
カテゴリ別一覧に別カテゴリが混ざる	複数カテゴリを指定してしまっている	絞り込み条件の「含める／除外する」を確認する
スマホだけレイアウトが崩れる	カラム数やサムネイル比率の設定が極端	カスタマイザーのPC/SP別設定を見直す
人気記事一覧が更新されない	キャッシュの影響や計測設定の抜け	キャッシュクリアや計測プラグインの設定を確認する

トラブルが起きたときは、いきなり細かいブロック設定だけを見つめるのではなく、「WordPressの基本設定」→「テーマのカスタマイザー」→「ブロック個別の設定」という順番で上から確認していくのがポイントです。一つずつ潰していけば、ほとんどの問題は解決できます。

表示されるけれど読みにくいときの改善ポイント

「記事一覧は出ているけれど、なんとなく読みにくい」というケースもよくあります。その場合は、次のような点を順番に見直してみてください。

記事タイトルが長すぎて、1行が詰め込まれていないか
サムネイル画像の色味がバラバラで、全体がうるさく見えていないか
抜粋文が長すぎて、1カードあたりの情報量が多くなっていないか
カテゴリ名が長く、2行になって圧迫感が出ていないか
1ページに出している件数が多すぎて、スクロールが大変になっていないか

Swellはテーマ側のデザインがリッチなので、やろうと思えばいくらでも情報を盛り込めます。ただ、その分「見せすぎ」になるリスクもあります。初めて訪れた人がパッと見て「これを読めばいいんだな」と分かるかどうかを基準に、少し削る感覚で調整してみてください。

★初心者さん必見★

「あと3ヶ月早くこの情報を知りたかった…」

そうならないために、今すぐ実践したいノウハウをギュッと一つのメルマガに詰め込みました。

無料で読めるうちに受け取っておいてください。

⇒あっさり10万稼ぐためのメルマガ

よくある質問（FAQ）

ごとう

記事一覧まわりでよく聞かれる質問をQ&A形式でまとめておきます。細かいところで迷ったときの参考にしてみてください。

Q1. 記事一覧ページはいくつ作っても大丈夫ですか？

A. 基本的には、用途が分かれていれば複数作っても問題ありません。トップページ用の新着一覧、カテゴリ別の一覧ページ、タグ別の特集ページなど、Swellの記事一覧を役割ごとに分けた方が、読む人にとっても分かりやすくなります。

ただし、似たような一覧を量産しすぎると、どこを見ればいいか分からなくなります。「このページは何のための一覧か」を自分で説明できるものだけ作る、くらいの感覚で数を絞ると良いと思います。

Q2. 記事一覧に表示する件数は何件くらいがちょうどいいですか？

A. サイトの構成にもよりますが、トップページの一覧であれば4〜8件くらいにしておくと、スッキリ見せやすいです。カテゴリ別の一覧ページのように「一覧をじっくり見てもらう」のが目的なら、もう少し多くても構いません。

「もっと見る」ボタンやページネーションを用意しておけば、無理に1画面に押し込まなくても大丈夫です。まずは見やすさを優先して、件数を決めてみてください。

Q3. 記事一覧に固定ページも混ぜて表示できますか？

A. テーマ標準の機能では、ブログ記事（投稿）と固定ページが分かれて扱われていることが多く、同じ一覧にそのまま混ぜるのは少し工夫が必要です。

どうしても一緒に見せたい場合は、固定ページから個別にブログカードでリンクしたり、カスタム投稿タイプを用意してそちらにまとめるなどの方法があります。Swellの記事一覧は、基本的にはブログ記事や特定の投稿タイプをまとめる場所、と割り切って設計すると管理しやすくなります。

まとめ：Swellの記事一覧で「探しやすいサイト」を作ろう

ごとう

最後に、この記事の要点と、今日からできる最初の一歩を整理しておきます。

記事の要点まとめ

Swellの記事一覧には、投稿ページ・固定ページ・投稿リストブロックなど複数の作り方がある
投稿ページは「シンプルなブログ一覧」、固定ページ＋投稿リストは「サイト型トップ＋一覧ページ」に向いている
投稿リストブロックを使うと、新着・人気・カテゴリ別など用途に合わせた一覧を柔軟に作れる
カスタマイザーの一覧設定を整えると、一気に見やすくおしゃれな印象になる
トラブルが起きたときは「WordPress設定→テーマ設定→ブロック設定」の順に見直すと原因を絞りやすい

今日から取るべき最初の一歩

私がおすすめしたい最初の一歩は、次の3つだけです。

固定ページで「記事一覧」ページを1つ作る
その中に投稿リストブロックを1つだけ入れて、新着記事一覧を表示してみる
カスタマイザーの一覧設定で、PCとスマホのカラム数・表示情報・抜粋文の長さをざっくり整える

ここまでできれば、「とりあえず見やすいSwellの記事一覧」はもう形になっています。そのあとで、人気記事一覧やカテゴリ別の一覧、タブ切り替えなどを少しずつ足していけば、あなたのサイトはどんどん「探しやすくて、読まれるサイト」に育っていきます。

焦らず、一つずつ試しながら、自分らしいSwellの一覧デザインを見つけていきましょう。