SWELLのカード型の投稿リストをPCで4カラムにするCSSカスタマイズ方法

これも調べたら意外に記事がなかったSWELLのカスタマイズ方法です。

申し訳ありませんが、メモなので自己責任でお願いいたします。display:grid；どうも苦手です・・・。

記事一覧のカード型リストのPCでの表示を４カラムにする方法です。

固定ページじゃなくて、ブログのデフォルトのトップページの記事一覧で４カラムにする方法です。簡単な方法を書いてみます。

やり方は色々あるのですが、ヤモヲさんの記事が一番確実かと思われます。

https://point-of-view.blog/swell-customize-post-list-four-column/

以下は当サイトで利用している一例です。

@media (min-width: 960px) {
  .-type-card.p-postList .p-postList {
    display: grid;
    gap: 20px;
  }
  .-type-card.p-postList .p-postList__item {
    flex-basis: 23%;
  }
}

間隔を広げたい場合は、gap:20px;のところを大きくしてください。以上です、よろしく〜。

hiro

TwitterInstagram

小１娘を育児中の主婦。娘の不登校と向き合っています。ブログカスタマイズが趣味。