【Cocoon】 投稿一覧のカードを立体的にカスタマイズする方法

投稿一覧のカードタイプを変更する

Cocoon設定でカードタイプを変更

「Cocoon設定」→「インデックス」をクリックします。

下記の2点の設定を変更します。

• カードタイプ: 縦型カード3列にチェック
• スニペット（抜粋）の表示: チェック外す

これらの設定にすることで、投稿一覧のデザインが縦型カードの3列になります。

追加CSSでカスタマイズ

続いて縦型のカードタイプになった投稿一覧をカスタマイズします。

カードに枠線を追加して少し立体的にしてみます。

「外観」→「カスタマイズ」→「追加CSS」をクリックします。

CSSに下記のコードを追加します。

/* 投稿一覧 カード */ 
.ect-vertical-card .entry-card-wrap {
  max-width: 30%;
  box-shadow: 0 2px 4px rgb(0 0 0 / 25%);
  border-radius: 3px;
}
/* 投稿一覧 スマホ画面では2列 */
@media screen and (max-width:480px) {
  .ect-vertical-card .entry-card-wrap {
    max-width: 46%;
  }
}