【Cocoonカスタマイズ】カードタイプ「タイル」をCSSだけでMasonryレイアウトにする方法

はじめに
実装手順
- 注意点
さいごに

はじめに

Cocoon設定→インデックス→カードタイプ「タイル」を選択すると、エントリーカードのサムネイル画像が元画像の縦横比を維持して表示されます。

しかし、画像ごとに高さが異なるため、カードを隙間なく整列させるには、JavaScriptライブラリ「Masonry.js」を使用しています。

タイルのように投稿カードをみっちりと一覧に敷き詰めるインデックスリスト機能です。

JavaScriptによるレイアウト制御には、要素の配置計算や再配置に伴う処理負荷が発生するという課題があります。また、要素のleft、topなどのCSSプロパティがJavaScriptによって繰り返し計算・書き換えられます。
そのため、ブラウザーの開発者ツールでCSSを直接入力しても、JavaScriptによって上書きされてしまいます。

近年、CSSだけで同様のレイアウトが実現可能となったため、こうした課題のあるJSによる制御を止め、CSSのみでタイルカードのMasonryレイアウトを実現します。

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

実装手順

以下の手順で実装します。

ラベル

PHPを追加

以下のコードをfunctions.phpに追加します。

add_action('wp_enqueue_scripts', function () {
  wp_dequeue_script('jquery-masonry');
  wp_deregister_script('jquery-masonry');
}, 999);

ラベル

CSSを追加

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

.ect-tile-card-2-wrap {
  --column: 2;
}

.ect-tile-card-3-wrap {
  --column: 3;
}

.ect-tile-card {
  display: block;
  column-count: var(--column);
  column-gap: 0;

  .entry-card-wrap {
    break-inside: avoid;
    display: inline-block;
    margin: 0;
    width: 100%;
  }
}

@media (width <= 480px) {
  .ect-vertical-card.sp-entry-card-1-column {
    --column: 1;
  }
}

注意点

Masonry.jsのレイアウトと、CSSのcolumn-countによるマルチカラムレイアウトでは、カードの配置アルゴリズムが異なります。

CSSでは、カードが列ごとに上から下へ配置されます。
そのため、同じカードを表示しても、画面上の並び順は変わります。

さいごに

今回紹介した方法を使えば、カードタイプ「タイル」をCSSだけで配置できます。
Masonry.jsによるレイアウト制御を停止することで、JavaScriptによる配置計算やCSSプロパティの書き換えを避けられます。

ただし、CSSのcolumn-countではカードの並び順が変わります。
表示順の違いを理解したうえで、タイルカードのレイアウトをカスタマイズしてみてください。