2026年5月20日

WordPressでMasonryレイアウトを実装する方法

テーマ・デザイン

はじめに

Masonryレイアウトは、高さの異なるカードを隙間なく並べるPinterest風のグリッドです。WordPressではCSS column-count で最もシンプルに実装でき、フィルター機能が必要な場合はIsotope.jsを使います。

症状・原因

高さの違うカードを隙間なく並べたい
Pinterest風のグリッドレイアウトを作りたい
カテゴリ別フィルターを付きのMasonryを作りたい
WordPressのギャラリーをMasonryで表示したい

解決手順

ステップ1：CSSのcolumn-countで最もシンプルに実装

/* style.css — column-count（JS不要） */
.masonry-grid {
    column-count: 3;
    column-gap: 16px;
}

.masonry-item {
    break-inside: avoid; /* カラム内で分割されないように */
    margin-bottom: 16px;
}

@media (max-width: 768px) {
    .masonry-grid { column-count: 2; }
}

@media (max-width: 480px) {
    .masonry-grid { column-count: 1; }
}

<div class="masonry-grid">
    <?php while (have_posts()): the_post(); ?>
    <article class="masonry-item">
        <?php the_post_thumbnail('medium'); ?>
        <h2><?php the_title(); ?></h2>
        <?php the_excerpt(); ?>
    </article>
    <?php endwhile; ?>
</div>

ステップ2：CSS Grid の masonry（実験的機能）

/* Chrome flagsで有効化が必要（将来的に標準化予定） */
.masonry-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: masonry; /* 実験的 */
    gap: 16px;
}

ステップ3：Masonry.jsで確実なMasonryレイアウト

// functions.php — Masonry.jsはWordPressに同梱済み
add_action('wp_enqueue_scripts', function(): void {
    // WordPressにバンドルされているmasonry
    wp_enqueue_script('masonry');

    wp_enqueue_script(
        'my-masonry',
        get_template_directory_uri() . '/js/masonry-init.js',
        ['masonry', 'imagesloaded'], // 画像読み込み後に初期化
        filemtime(get_template_directory() . '/js/masonry-init.js'),
        true
    );
});

// js/masonry-init.js
document.addEventListener('DOMContentLoaded', function() {
    const grid = document.querySelector('.masonry-grid');
    if (!grid) return;

    // 画像の読み込みが完了してから初期化
    imagesLoaded(grid, function() {
        new Masonry(grid, {
            itemSelector: '.masonry-item',
            columnWidth:  '.masonry-sizer',
            percentPosition: true,
            gutter: 16,
        });
    });
});

<!-- sizer要素でカラム幅を指定 -->
<div class="masonry-grid">
    <div class="masonry-sizer"></div> <!-- 幅指定用 -->
    <?php while (have_posts()): the_post(); ?>
    <article class="masonry-item">
        <?php the_post_thumbnail(); ?>
        <h2><?php the_title(); ?></h2>
    </article>
    <?php endwhile; ?>
</div>

.masonry-sizer,
.masonry-item {
    width: calc((100% - 32px) / 3); /* 3カラム + gap2つ分 */
}

ステップ4：Isotope.jsでフィルター機能付きMasonry

// functions.php
add_action('wp_enqueue_scripts', function(): void {
    wp_enqueue_script(
        'isotope',
        'https://cdn.jsdelivr.net/npm/isotope-layout@3/dist/isotope.pkgd.min.js',
        [],
        '3.0.6',
        true
    );
});

// js/isotope-init.js
const iso = new Isotope('.masonry-grid', {
    itemSelector:    '.masonry-item',
    layoutMode:      'masonry',
    masonry:         { columnWidth: '.masonry-sizer' },
});

// カテゴリフィルター
document.querySelectorAll('.filter-btn').forEach(function(btn) {
    btn.addEventListener('click', function() {
        iso.arrange({ filter: this.dataset.filter });
    });
});

注意事項

column-count は最もシンプルですが、横スクロール順（左→右→左→右）ではなく縦優先（上→下）で並ぶ点に注意してください。記事の時系列順に横並びしたい場合はMasonry.jsやIsotopeが必要です
Masonry.jsはWordPressに同梱されているため（ハンドル名: masonry）、CDNから別途読み込む必要はありません。wp_enqueue_script('masonry') のみで使えます
画像を含むMasonryは imagesLoaded との組み合わせが必須です。画像の読み込み完了前に初期化するとレイアウトが崩れます

まとめ

最もシンプルなMasonryは column-count: 3; column-gap: 16px のCSSのみ（JS不要）です。動的フィルターが必要な場合はIsotope.jsを使います。Masonry.jsはWordPressに同梱済みなので wp_enqueue_script('masonry') で読み込めます。

Post Views: 10