SWELLの投稿リストを3列・4列にする方法｜サイドバーありでも崩れない設定とCSS

投稿リストブロックをカスタマイズしたい方向けに、CSSを使った編集方法をまとめました。

SWELLではCSSで投稿リストを強制的に3列・4列にすることが可能です。
PC表示でフル幅のブロックを使っている場合や、サイトデザインによってはカード型が大きすぎたり、バランスが悪く見えたりすることがあります。この記事では、そんなときに役立つカスタマイズ方法を紹介します。

まず確認したいポイント

SWELLの投稿リストがPCで3列（3カラム）にならない場合、投稿リストブロックの設定でカラム数が適切に指定されていないか、親要素の幅が狭い可能性があります。

投稿リストブロックを選択し、サイドバー設定で「PCでのカラム数」を「3」に設定し、デザインが「カード型」になっているか確認してください。

1. ブロック設定の確認

• 投稿リストブロックを選択
  編集画面で該当の投稿リストをクリック。
• サイドバー設定
  右側のパネルで「投稿リスト」の設定を開く。
• デザイン
  「カード型」または「サムネイル型」を選択。
• レイアウト（カラム数）
  「PCサイズ」の項目を「3」に設定する。

2. コンテンツ幅の確認

投稿リストがサイドバーありの2カラムレイアウト内にある場合、 幅が足りず3列にならないことがあります。

全幅、または1カラムの広いエリアに配置すると解決します。

3. カード型（4列）にしたい場合（CSSで可能）

SWELL標準設定ではPC最大3列ですが、CSSを追加すれば4列表示も可能です。

サイドバーがあっても３～４列にしたい場合の方法

1. 「リッチカラム」を使う方法（CSS不要）

CSSを使わずに3〜4列に見せたい場合に便利です。

1. 投稿リストを配置したい場所に「リッチカラム」ブロックを挿入。
2. リッチカラムの設定で、PCの列数を「2」または「3」に設定
3. 各カラムの中に「投稿リスト」ブロックを入れ、表示数やカラム数を調整

例：2列のリッチカラム → 左右に1列ずつ投稿リスト → 実質2列の分割表示が可能。

2. 特定の投稿リストだけ4列にするCSS

手順

/* サイドバーありでも投稿リストを4列にする(PC幅) */
@media (min-width: 960px) {
    .-col4 .-type-card.-pc-col3 .p-postList__item {
        width: calc(100% / 4); /* 4列に分割 */
    }
}

3. 注意点：カードが細くなりすぎる問題

サイドバーありで4列にすると、カードが細長くなり視認性が落ちます。

 コンテンツ幅を広げる設定を検討してください。

設定場所： [外観] → [カスタマイズ] → [サイト全体設定] → [基本デザイン] → 「コンテンツ幅」

1200px → 1400px前後にすると見やすくなります。

特定のタグだけを表示したい場合（Pickupが最適）

タグごとに投稿リストを分けたい場合は、

この方法であれば、1つの投稿リストブロックだけで、指定タグの記事を自動抽出できます。

2カラム使用中でもすべて3列にしたい場合

CSSを1つ追加するだけで解決

以下のCSSを追加すると、 サイドバーありでも、すべての投稿リスト（カード型・PC3列設定）が3列で表示されます。

/* サイドバーがあっても投稿リスト(カード型)を3列にする */
@media (min-width: 960px) {
    .l-mainContent .-type-card.-pc-col3 .p-postList__item {
        width: calc(100% / 3) !important;
    }
}

サイドバーのあるブログでも上記CSSで以下の画像のように3列表示が可能でした。
ＣＳＳコードを入れても適用されてない…という方はキャッシュクリアを試してみてください。