【Cocoon】固定ページで新着記事（縦型3列カード）がズレる原因と修正CSS

Contents

1. 発生する問題（現象の共有）
2. 解決コード（コピペ用CSS）
3.修正後
4. なぜ効かないケースがあるのか？（ハマりポイントの解説）

1. 発生する問題（現象の共有）

症状：固定ページにCocoonの新着記事（縦型3列）を置くと、1段目のタイトルの長さによってカードの高さがバラバラになってしまう。
原因：CSS Flexbox / Grid において、要素の高さが異なると段折り返しの基準位置が変わってしまうため。

2. 解決コード（コピペ用CSS）

WordPressの「外観」＞「カスタマイズ」＞「追加CSS」に貼るだけのCSSコードを提示します。

※今回は固定ページのカスタムCSSに追加しました。

CSS

/* 画像の高さを統一 */
.new-entry-card-thumb {
  height: 180px;
  overflow: hidden;
}

.new-entry-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* カード全体の高さを揃える */
.new-entry-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* タイトル部分の高さを揃える（2行まで） */
.new-entry-card-title {
  min-height: 3.2em;
  line-height: 1.6em;
  overflow: hidden;
}