【SWELL】「投稿リスト」を4列表示にするカスタマイズ方法

ハシビィー君

SWELLで作ってるサイトの「投稿リスト」を4列にして表示コンテンツのボリュームを増やしたいっす！

カピーさん

SWELLではデフォルトでは3列が最大だからな。簡単なカスタマイズでできるから早速行くぞ。

「投稿リスト」を4列表示にする方法

SWELLを利用されているサイトの多くがトップページに利用されている「投稿リスト」機能。

今回はサイト型のトップページで「新着記事」などを表示する際に活用されている方がターゲットになります。

SWELLの「投稿リスト」「カード型」「サムネイル型」の最大カラム数は3列表示となっています。

スマホでは端末のサイズによる制限で用意されている「1 or 2列」で問題ないかと思います。

しかしパソコン表示の時だけ4列にしたい時に、今回紹介する方法が必要になってくるということです。

SWELLでのカスタマイズ方法

基本的な手順は以下の通りです。

/* 投稿リストのカード型とサムネイル型を4列表示にする */
@media (min-width: 960px) {
  .post-col4 .-type-card.-pc-col3 .p-postList__item, .-col4 .-type-thumb.-pc-col3 .p-postList__item{
    width: calc(100% / 4);
  }
}

まとめ：4列表示で視覚的な変化を！

最後に『【SWELL】「投稿リスト」を4列表示にするカスタマイズ方法』に関する結論を。