SWELLの投稿リストをカスタマイズする方法【初心者向け】

この記事ではSWELLの投稿リストをカスタマイズする方法を初心者向けに分かりやすく解説します。

この記事のゴールは、「自分のサイトに合ったSwellの投稿リストを、迷わずカスタマイズできるようになること」です。

1. Swell投稿リストカスタマイズでできることを整理しよう

1-1. Swellの投稿リストとは？基本機能のおさらい

Swellには、ざっくり分けて次の2種類の「投稿リスト」があります。

項目	記事一覧リスト（アーカイブ）	投稿リストブロック
表示される場所	トップページ・ブログ一覧・カテゴリページなど	固定ページ・投稿・ウィジェットエリアなど好きな場所
主な設定場所	テーマカスタマイザー	ブロックエディター（Gutenberg）の設定欄
向いている使い方	サイト全体の基本的な記事一覧	特集記事、カテゴリ別おすすめ、人気記事一覧など
カスタマイズの自由度	中（全体に一括で反映）	高（ブロックごとに別の設定ができる）

イメージとしては、「記事一覧リスト」はサイトの標準的な一覧表示、「投稿リストブロック」は見せたい場所にスポットで置ける一覧表示という感じです。どちらも大事な機能なので、Swellの投稿リストをカスタマイズするときは、この2種類をセットで考えると迷いにくくなります。

1-2. Swellで投稿リストをカスタマイズするメリット

投稿リストの見た目や中身をきちんと整えてあげると、次のようなメリットがあります。

• アイキャッチとタイトルの見せ方がそろい、サイト全体が一気に「ちゃんとしたサイト」に見える
• 新着・人気・カテゴリ別など、読者が知りたい情報にすぐ手が届くようになる
• 内部リンクが自然に増え、関連する記事も連続して読んでもらいやすくなる
• 押したい記事や収益記事を目立つ位置に並べやすくなり、誘導しやすくなる

同じ記事でも、どのような投稿リストで見せるかによって、「なんとなく読みたくなるかどうか」が大きく変わります。だからこそ、Swellでの投稿リストカスタマイズは、デザインだけでなく売上やPVにも影響する大事なポイントです。

1-3. カスタマイズ前に準備しておきたいこと

いきなり細かい設定をいじる前に、次の3つだけ決めておくと作業がかなりラクになります。

• サイトの主役は「新着記事」なのか「カテゴリ別の特集」なのか
• PCでは何列くらいで見せたいか（1〜3列、必要なら4列も視野に入れる）
• スマホでスクロールしたとき、1〜2画面で何記事くらい見えていてほしいか

このイメージをざっくりでも持っておくと、「どのレイアウトを選ぶか」「どの情報を消すか」といった判断がスムーズになります。逆にここが曖昧だと、設定画面を開いたまま手が止まりがちなので、少しだけ時間をとって考えてみてください。

 

【深呼吸タイム】

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

1. 稼げる広告
2. 稼げるキーワード
3. 稼げるライティング

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

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

 

2. テーマカスタマイザーでSwellの投稿リストをカスタマイズする

2-1. 記事一覧リストのレイアウトとカラム数を決める

まず手を付けたいのが、記事一覧リストのレイアウトとカラム数です。代表的なレイアウトと向いている用途を表にまとめると、こんな感じになります。

レイアウト種類	特徴	向いているケース
カード型	画像・タイトル・抜粋がカード状に並ぶ	個人ブログ、雑記ブログ、特化ブログ全般
リスト型	テキスト中心で縦にシンプルに並ぶ	お知らせ、更新履歴、システム情報など
サムネイル型	小さめのサムネイル＋タイトルが中心	とにかく多くの記事を一覧で見せたいとき
左右交互型	画像とテキストが左右交互に配置される	デザイン重視のメディア、ポートフォリオ系サイト

カラム数は、PCでは2〜3列、スマホは1列が基本です。写真をしっかり見せたいならPC2列、情報量を増やしたいなら3列というイメージで選ぶと、大きく失敗することはありません。

2-2. 日付・カテゴリー・抜粋など表示項目を調整する

次に、投稿リストに「どの情報まで載せるか」を決めていきます。よく使う項目は次のようなものです。

表示項目	意味	使うときのポイント
投稿日	記事が公開された日	時事性のある内容を扱うブログなら出しておきたい
更新日	記事を更新した日	リライトをアピールしたいときに便利
カテゴリー	記事が属しているカテゴリ名	色やデザインを変えるとパッと見で内容が分かりやすい
抜粋文	記事の簡単な要約	30〜60文字くらいで「読んでみたくなる一言」を入れると効果的
MOREボタン	「続きを読む」などのボタン	ボタンの文言を変えるとクリックされやすくなる
アイキャッチ	記事のメイン画像	比率をそろえると、一覧全体がきれいに整う

全部を盛り込みすぎると、特にスマホでは窮屈になってしまいます。最初は「アイキャッチ＋カテゴリ＋タイトル＋投稿日」くらいのシンプルな構成から試して、必要に応じて抜粋やボタンを追加していく流れが扱いやすいです。

2-3. 人気記事タブや除外設定で見せたい投稿だけを出す

Swellの投稿リストまわりには、「タブ切り替え」や「除外カテゴリ・除外タグ」といった便利な設定も用意されています。

こうした少しの工夫で、「必要な記事だけが出てくる、気持ちの良い一覧」になります。投稿自体の内容を変えなくても、一覧の見せ方だけで読者のストレスはかなり減らせます。

 

【ちょっと一息♪】

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

⇒今すぐその秘密を見る

3. ブロックエディターの投稿リストブロックで柔軟にカスタマイズ

3-1. 投稿リストブロックSettingsタブの主な項目

投稿リストブロックを追加すると、「Settings」と「Pickup」の2つのタブが表示されます。まずはSettingsタブから主な項目をざっと見ておきましょう。

項目	ざっくり説明	おすすめの考え方
表示件数	一覧に出す記事の数	スマホで2〜3画面くらいで収まる件数を目安にする
レイアウト	カード・リスト・テキストなどの配置パターン	ページの目的に合うものを選ぶ（読み物か一覧かなど）
カラム数	PC・タブレット・スマホごとの列数	PC2〜3列、スマホ1列が基本ライン
並び順	新着・更新日・人気・ランダムなど	通常は新着、特集やランキングでは人気順が使いやすい
表示する投稿情報	日付・著者・カテゴリーなどのON/OFF	情報を詰め込みすぎず、最低限に絞る意識を持つ
タイトルタグ	h2〜h4またはdivなど	ページ全体の見出し構造を崩さないタグを選ぶ
抜粋文の文字数	抜粋部分の最大文字数	短めにして「続きは本文で読んでもらう」感覚で調整する
MOREリンクの文言	ボタンに表示するテキスト	「詳しく見る」「チェックする」など、サイトの雰囲気に合う言葉を使う

投稿リストブロックは、同じページ内に複数置くこともできます。例えば「新着記事一覧」「カテゴリAのおすすめ」「カテゴリBのおすすめ」と3つ並べる使い方も簡単にできます。

3-2. Pickupタブでカテゴリ別やおすすめ記事だけを表示

Pickupタブでは、「どの記事を対象にするか」を細かく指定できます。代表的な設定項目と使い方の例をまとめておきます。

設定項目	できること	使い方の例
投稿IDで指定	特定の記事だけをピンポイントで表示	収益記事だけを集めた「おすすめ記事」一覧を作る
投稿IDで除外	特定の記事だけを一覧から外す	すでに別の投稿リストで紹介している記事を重複させない
投稿タイプ	投稿・固定ページなどを切り替える	固定ページだけの一覧や、特定の投稿タイプだけを出す
カテゴリーで絞り込み	指定カテゴリの記事だけを表示	「ブログ運営」「ライフハック」などカテゴリ別の特集を作る
タグで絞り込み	指定タグの記事だけを表示	「おすすめ」「初心者向け」などのタグ付き記事だけを一覧にする
条件（AND / OR）	複数条件の組み合わせ方を決める	「カテゴリAかつタグB」「カテゴリAまたはカテゴリB」などを制御する

私の場合、「収益につながりやすい記事」には専用タグを付けておき、そのタグをPickupタブで指定して投稿リストを作っています。そうすると、手動で並び替えなくても、投稿リストの一覧自体が収益用のショーケースとして機能してくれます。

3-3. タブブロックと組み合わせて「新着｜人気」を切り替え

Swellには「タブブロック」もあるので、投稿リストブロックと組み合わせると、次のような構成が簡単に作れます。

• タブ1：新着記事（並び順：新着）
• タブ2：人気記事（並び順：人気・アクセス数順）
• タブ3：カテゴリ別特集（Pickupタブでカテゴリを指定）

1つの画面の中で情報を切り替えられるので、トップページやカテゴリトップが一気にリッチな印象になります。ただし、タブの中に投稿リストを詰め込みすぎると読み込みが重く感じられることもあるので、表示件数は少し控えめにして、必要に応じて「もっと見る」リンクでカテゴリページに誘導するのがおすすめです。

 

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

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

1. センスが必要
2. 文章力が要る

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

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

4. CSSでSwell投稿リストの見た目をカスタマイズする

4-1. PCだけ3〜4列にする簡単カスタマイズ

標準の設定だけでもカラム数は変えられますが、「PCだけ4列にしたい」「タブレットでは2列にしたい」など、もう少し細かく調整したい場面も出てきます。

ざっくりとした流れは次の通りです。

• 対象の投稿リストブロックに「追加CSSクラス」を付ける（例：postlist-4col）
• 外観 > カスタマイズ > 追加CSSから、そのクラスに対してPCサイズだけ4列にするスタイルを書く
• スマホでは1列になるように、メディアクエリで画面幅ごとの指定を分ける

このとき、1記事あたりのタイトルの文字数や抜粋量も合わせて見直しておくと、4列レイアウトでもゴチャゴチャせずに読みやすくなります。

4-2. 「お知らせ一覧」っぽいテキスト型投稿リストにする

会社サイトや店舗サイトでは、「画像はいらないので、シンプルにお知らせだけ並べたい」というパターンも多いです。そんなときは、テキスト型の投稿リストに少しCSSを足してあげるだけで、「お知らせ一覧」らしい見た目にできます。

• レイアウトは「テキスト型」を選択する
• 投稿日を左側、タイトルを右側に寄せるようにCSSで余白や配置を調整する
• 重要なお知らせには、カテゴリー名を「重要」などにしてラベル代わりに使う

これだけでも、一般的なブログの「記事一覧」から、ビジネスサイトの「インフォメーション」にかなり近づきます。写真を見せる必要がないサイトでは、あえてテキスト型を選ぶのも十分アリです。

4-3. 投稿リストにタグやラベルを追加表示したいときの考え方

慣れてくると、「投稿リストにタグ名も出したい」「カスタムフィールドの値（価格など）も出したい」といった、もう少し高度なことをしたくなるかもしれません。

このレベルのカスタマイズになると、子テーマ側のテンプレートやfunctions.phpに手を入れる必要が出てきます。無理に全て自力でやろうとせず、次の順番で考えてみるのがおすすめです。

自分で手を入れる範囲と、外部に頼る範囲を分けておくと、Swellのアップデート時にも安心して投稿リストのカスタマイズを続けられます。

5. サイト別に見るSwell投稿リストカスタマイズ例

5-1. ブログ型サイト向けおすすめ投稿リスト設定

まずは、いわゆるブログ型サイトのケースです。私がよく使っている設定をまとめると、こんなイメージになります。

設定項目	おすすめ設定例	ねらい
トップの一覧	カード型・PC2〜3列・スマホ1列	アイキャッチをしっかり見せて興味を引く
並び順	新着順	新しく書いた記事から順に読んでもらえる
表示件数	8〜12件程度	スマホで2〜3画面に収まり、疲れずに眺められる
表示情報	カテゴリー・投稿日・タイトル・抜粋	情報量と見やすさのバランスが取りやすい
サイドバー一覧	リスト型＋人気順	「よく読まれている記事」から回遊してもらう

この構成にしておくだけでも、読者は「まずは新着をざっと眺めて、気になったら人気記事を見る」という自然な動線でサイト内を回ってくれます。投稿リストのカスタマイズに迷ったら、ここを起点に微調整していくのがおすすめです。

5-2. 会社・店舗サイト向け「お知らせ」投稿リスト例

会社や店舗のサイトでは、「ブログ記事」よりも「お知らせ」「営業情報」のほうが重要なケースも多いです。その場合は、次のような設定が扱いやすいです。

設定項目	設定例	ポイント
レイアウト	テキスト型	ビジネスサイトに合うシンプルな見た目になる
表示項目	投稿日・タイトルのみ	余計な情報を削って大事な情報だけに絞れる
並び順	新着順	新しいお知らせから順に表示されて分かりやすい
カテゴリー運用	「重要」「キャンペーン」などカテゴリ分け	一覧でもラベルとして意味を持たせられる
詳細ページ	本文は簡潔＋問い合わせ導線を目立たせる	投稿から問い合わせや予約につながりやすくなる

このパターンでは、トップページの目立つ位置に「お知らせ用の投稿リストブロック」を設置しておくと、訪問者が知りたい情報にすぐアクセスできるようになります。

5-3. カテゴリが多いメディアでの投稿リスト設計

オウンドメディアや情報サイトのように、カテゴリがたくさんあるサイトでは、投稿リストの設計がとても重要です。ざっくりとした構成の例を挙げると、次のようなイメージです。

こうしておくと、「情報は多いのに、何から読めばいいか分からない」という状態を避けつつ、サイト全体の回遊性も高めることができます。Swellの投稿リストカスタマイズは、こうした情報設計とセットで考えると力を発揮してくれます。

 

---

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

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

例えば、

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

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

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

---

 

6. よくある質問｜Swell投稿リストカスタマイズQ&A

Q1. 投稿リストに何も表示されないのですが、何から確認すればいいですか？

A. まずは「Pickupタブで絞り込みしすぎていないか」「非公開・下書きの記事だけを対象にしていないか」を確認してみてください。特に、カテゴリやタグを複数指定している場合、条件がANDになっていると該当記事がゼロになることがあります。

一度、条件をすべて外して「とりあえず全記事を表示」させ、それで表示されるかどうかを見ると原因を切り分けやすいです。そのあとで、Swellの投稿リストカスタマイズとして必要な条件を一つずつ戻していくと、問題になっている設定を見つけやすくなります。

Q2. 人気順にしても、思ったような記事が上に来ません

A. 人気順は、アクセス数などのデータをもとに並び替えているため、記事数やアクセス数が少ないうちは差が出にくいことがあります。また、自分が「推したい記事」と、データ上の人気記事がそろわないこともよくあります。

思い通りにコントロールしたい場合は、投稿リストブロックのPickupタブで投稿IDを指定し、「自分で選んだおすすめ記事一覧」として運用してしまうのも一つの手です。Swellの投稿リストカスタマイズでは、「人気順に完全に頼りきらない」という考え方も大事だと感じています。

Q3. CSSでカスタマイズしたらスマホだけ崩れてしまいました

A. PC向けに書いた幅やカラム数の指定が、スマホにもそのまま効いてしまっている可能性が高いです。Swellの投稿リストをCSSでカスタマイズするときは、「どの画面サイズに対して効かせるのか」をメディアクエリできちんと分けるのがポイントです。

スマホだけ崩れてしまったときは、一度カスタムCSSをコメントアウトして元の状態に戻し、少しずつ必要な部分だけを復活させていきましょう。どの指定を外したときに崩れが直るのかを確認しながら進めると、原因となっているCSSを特定しやすくなります。

7. まとめ｜Swell投稿リストカスタマイズのポイント整理

ここまでの内容をまとめておきます

読み終えたタイミングで、いきなり全部を完璧にやろうとしなくて大丈夫です。今日やることはひとつだけ、「メインで使う投稿リスト」を決めて軽く整えることです。

具体的には、トップページかブログ一覧のどちらかを開き、レイアウト・カラム数・表示項目を見直して「自分のサイトらしい形」に寄せてみてください。それができたら、少しずつカテゴリ別の投稿リストブロックやタブ切り替え、CSSによる装飾を追加していけば、Swellの投稿リストはどんどんあなたのサイトにフィットしていきます。

 

---

★初心者さん必見★

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

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

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

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