【Cocoonカスタマイズ】おすすめカードの幅を調整して折り返して表示する方法

はじめに
完成イメージ
実装手順
さいごに

はじめに

以下の記事では、おすすめカードを折り返し表示させる方法を紹介しています。

【Cocoon】おすすめカードを折り返しさせるカスタマイズ

WordPressテーマ Cocoonで「おすすめカードを折り返しさせる」カスタマイズについてまとめてみました。今回のカスタマイズでは「おすすめカード」を表示数8個に設定した場合、PC表示で折り返しさせてサイズを維持させます。

しかし、余白や画面幅の調整が複雑で、記述や設定が少し分かり難い印象があります。

そこで、画面幅やカード数に応じてカード幅を自動調整しながら綺麗に折り返されるよう改善します。

この記事では、この方法について説明します。

完成イメージ

実装手順

以下のコードをstyle.cssに追加します。

/* カード幅のデフォルト設定（最大5列基準） */
.recommended {
  --column: 5;
  --gap: 0px;

  /* おすすめカード毎の余白 */
  &.rcs-card-margin {
    --gap: 15px;
  }

  .navi-entry-cards {
    /* カードが4枚以下 */
    &:has(> :last-child:nth-child(-n+4)) {
      --column: 4;
    }

    /* カードが3枚以下 */
    &:has(> :last-child:nth-child(-n+3)) {
      --column: 3;
    }

    a {
      margin: 0;
      width: calc((100% - var(--gap) * (var(--column) - 1)) / var(--column));
    }
  }
}

.body .recommended .navi-entry-cards {
  flex-wrap: wrap;
  gap: var(--gap);

  @media (width <= 1023px) {
    --column: 3 !important;
  }

  @media (width <= 834px) {
    --column: 2 !important;
  }
}