WordPress標準のギャラリーブロックを、縦長・横長の写真が隙間なく積み重なるレイアウトにしたい場合は、WordPress本体に同梱されているMasonryを読み込み、ギャラリーに付けた独自クラスに対して適用するのが手軽です。大きさの違う画像を混ぜて隙間を詰めたい場合はPackeryを使います。この記事では、両者の違いと選び方、ギャラリーブロック側の準備、CSSとJavaScriptの実装、表示崩れやレイアウトのずれ（CLS）への対策、CSSだけで作る場合の注意点までを説明します。
ここではMasonryレイアウトの一般論ではなく、ブロックエディターのギャラリーブロックに組み込む手順に絞っています。コードは子テーマに置く前提です。親テーマを直接編集すると更新で消えるため、子テーマを用意してから作業し、ステージング環境で表示を確認してから本番に反映してください。
MasonryとPackeryの違い
どちらもMetafizzyが公開しているJavaScriptのレイアウトライブラリで、使い方もよく似ています。
- Masonry：同じ幅の列を用意し、各画像を「いちばん高さの低い列」に順に積んでいきます。幅がそろった写真ギャラリーに向いています。WordPress本体に同梱されており、スクリプトのハンドル名
masonryで読み込めます（依存関係としてimagesloadedも読み込まれます）。ライセンスはMITです。 - Packery：空いている隙間を探して要素を詰める方式で、2列分の幅を持つ画像など、大きさの違う要素を混ぜても隙間が出にくいのが特徴です。WordPressには同梱されていないため、公式サイトから入手して子テーマに置きます。ライセンスは、オープンソースのプロジェクト向けにGPLv3、商用の利用向けに有償の商用ライセンスが用意されています。条件は変わる可能性があるため、採用前に公式サイトのライセンス説明を確認してください。
同じ幅の写真を並べるだけならMasonryで十分です。「この1枚だけ大きく見せたい」といった要件があるときにPackeryを検討します。なお、どちらのライブラリも近年は大きな更新が行われていません（2026年10月現在）。今の用途で問題なく動きますが、長く使う前提なら、後述のCSSでの実装の動向も合わせて見ておくとよいでしょう。
手順1：ギャラリーブロックを準備する
まず、Masonryを適用したいギャラリーに目印となるクラスを付けます。
- 投稿の編集画面でギャラリーブロックを選択する
- 右側の設定パネルの「高度な設定」を開き、「追加CSSクラス」に
is-masonryと入力する - ギャラリーの設定にある、画像を同じ大きさに切り抜く設定（「画像の切り抜き」などの名称）をオフにする
3つ目が重要です。切り抜きがオンのままだと、画像が同じ高さにそろえて切り取られるため、高さの違いを活かすMasonryの意味がなくなります。設定の名称や位置はWordPressのバージョンによって異なることがあります。
ギャラリーブロックは、WordPress 5.9以降、中の画像が一つずつ独立した画像ブロック（figure.wp-block-image）として出力されます。この後のコードはこの構造を前提にしています。
手順2：CSSで列の幅を決める
Masonryでは、列の幅と列の間隔をCSSで決め、その大きさを測るための空の要素（サイザー）をJavaScriptから参照させる方法が扱いやすくなります。子テーマに css/masonry-gallery.css を作ります。
/* 3列：列幅32%＋間隔2% */
.wp-block-gallery.is-masonry {
display: block;
}
.wp-block-gallery.is-masonry > .masonry-sizer,
.wp-block-gallery.is-masonry > figure.wp-block-image:not(#individual-image) {
width: 32%;
margin: 0 0 2% 0;
}
.wp-block-gallery.is-masonry > .masonry-gutter {
width: 2%;
}
.wp-block-gallery.is-masonry figure.wp-block-image img {
width: 100%;
height: auto;
}
/* 狭い画面では2列 */
@media (max-width: 600px) {
.wp-block-gallery.is-masonry > .masonry-sizer,
.wp-block-gallery.is-masonry > figure.wp-block-image:not(#individual-image) {
width: 49%;
}
}
/* ギャラリー全体のキャプションを最下部に置く */
.wp-block-gallery.is-masonry > .blocks-gallery-caption {
position: absolute;
top: 100%;
left: 0;
right: 0;
}
.wp-block-gallery.is-masonry:has(> .blocks-gallery-caption) {
margin-bottom: 3em;
}WordPress本体のギャラリー用CSSは、テーマのCSSに負けないよう詳細度を高めに書かれています。そのため、上の例でも本体と同じ :not(#individual-image) を付けて詳細度を合わせています。それでも幅が効かない場合は、ブラウザーの開発者ツールで画像の figure 要素を選び、どのCSSが勝っているかを確認してください。
列の幅をJavaScriptの実行前から指定しておくのは、レイアウトのずれを小さくするためです。この点は後で説明します。
手順3：JavaScriptでMasonryを適用する
子テーマに js/masonry-gallery.js を作ります。jQueryは不要です。
( function () {
const reduceMotion = window.matchMedia( '(prefers-reduced-motion: reduce)' ).matches;
function init() {
document.querySelectorAll( '.wp-block-gallery.is-masonry' ).forEach( function ( gallery ) {
const sizer = document.createElement( 'div' );
sizer.className = 'masonry-sizer';
sizer.setAttribute( 'aria-hidden', 'true' );
const gutter = document.createElement( 'div' );
gutter.className = 'masonry-gutter';
gutter.setAttribute( 'aria-hidden', 'true' );
gallery.prepend( sizer, gutter );
const msnry = new Masonry( gallery, {
itemSelector: '.wp-block-image',
columnWidth: '.masonry-sizer',
gutter: '.masonry-gutter',
percentPosition: true,
transitionDuration: reduceMotion ? 0 : '0.2s'
} );
// 画像の読み込みが進むたびに配置をやり直す
imagesLoaded( gallery ).on( 'progress', function () {
msnry.layout();
} );
} );
}
if ( document.readyState === 'loading' ) {
document.addEventListener( 'DOMContentLoaded', init );
} else {
init();
}
} )();transitionDuration は、画像が移動するときのアニメーション時間です。OSの設定で「視差効果を減らす」などを選んでいる利用者（prefers-reduced-motion: reduce）には、アニメーションなしで配置します。
手順4：functions.phpで読み込む
子テーマの functions.php に、ギャラリーブロックを含むページだけでファイルを読み込む処理を書きます。
add_action( 'wp_enqueue_scripts', function () {
if ( ! is_singular() || ! has_block( 'core/gallery' ) ) {
return;
}
$dir = get_stylesheet_directory();
$uri = get_stylesheet_directory_uri();
wp_enqueue_style(
'my-masonry-gallery',
$uri . '/css/masonry-gallery.css',
array(),
filemtime( $dir . '/css/masonry-gallery.css' )
);
wp_enqueue_script(
'my-masonry-gallery',
$uri . '/js/masonry-gallery.js',
array( 'masonry', 'imagesloaded' ),
filemtime( $dir . '/js/masonry-gallery.js' ),
array(
'in_footer' => true,
'strategy' => 'defer',
)
);
} );wp_enqueue_script() の5つ目の引数に配列で strategy を渡す書き方は、WordPress 6.3以降で使えます。バージョンの数値に filemtime() を使うと、ファイルを更新したときにブラウザーのキャッシュが自動で切り替わります。
has_block() は記事本文の中のブロックを調べる関数です。テンプレートパーツやウィジェット、再利用ブロック（パターン）の中に置いたギャラリーは検出できないことがあるため、そうした場所で使う場合は条件を外すか、別の条件で読み込みます。
Packeryに切り替える場合
Packeryを使うときは、公式サイトから入手した packery.pkgd.min.js を子テーマの js/ に置き、独自のハンドル名で登録します。
wp_register_script(
'packery',
get_stylesheet_directory_uri() . '/js/packery.pkgd.min.js',
array( 'imagesloaded' ),
'2.1.2',
array( 'in_footer' => true )
);手順4の依存関係の masonry を packery に置き換え、JavaScriptの new Masonry( を new Packery( に変えます。itemSelector、columnWidth、gutter、percentPosition、transitionDuration の各オプションは同じ名前で使えます。バージョン番号の 2.1.2 は例なので、入手したファイルのものに合わせてください。
大きく見せたい画像には、その画像ブロックの「追加CSSクラス」に is-wide と入れ、2列分の幅を指定します。
.wp-block-gallery.is-masonry > figure.wp-block-image.is-wide:not(#individual-image) {
width: 66%;
}3列（32%＋間隔2%）の場合、2列分は32%×2＋2%＝66%です。この計算が合っていないと、Packeryでも隙間が残ります。
レイアウトのずれ（CLS）と表示の確認
MasonryやPackeryは、JavaScriptが動いてから画像の位置を一つずつ指定して並べ直すため、読み込みの途中で画像の位置が動きます。これはCore Web VitalsのCLS（Cumulative Layout Shift）が悪化する原因になります。次の工夫でずれを小さくできます。
- 列の幅を最初からCSSで決めておく：手順2のように、JavaScriptの実行前から同じ幅にしておけば、変わるのは縦の位置だけになります。
- 画像に幅と高さの属性を持たせる：WordPressは通常、本文の画像に
widthとheightの属性を付けて出力します。CSSでheight: autoにしておくと、画像の読み込み前から縦横比に合った領域が確保されるため、遅延読み込み（loading="lazy"）の画像でも配置が大きく崩れません。 - ページの最上部に置かない：ファーストビューに大きなギャラリーがあると、ずれが目に入りやすく、CLSにも影響しやすくなります。
確認は、PageSpeed InsightsやChromeの開発者ツールのPerformanceパネルで行います。キーボードの操作順序はHTMLの並び順のままなので、Tabキーで画像のリンクを順にたどり、極端に飛ぶ箇所がないかも見ておきます。
CSSだけで作る場合
JavaScriptを使わずに、CSSの段組み（columns）で似た見た目を作ることもできます。
.wp-block-gallery.is-masonry-css {
display: block;
columns: 3;
column-gap: 1rem;
}
.wp-block-gallery.is-masonry-css > figure.wp-block-image:not(#individual-image) {
width: auto;
margin: 0 0 1rem;
break-inside: avoid;
}この方法はずれが起きない反面、画像が「左の列を上から下へ、次に隣の列へ」という順に並ぶため、見た目の順序が横方向になりません。時系列に並べたい写真には向きません。CSS Gridを使ったMasonry形式のレイアウトは仕様の検討とブラウザーへの実装が進んでいる段階で、対応状況はブラウザーによって異なります。採用する場合は、MDNやCan I useで最新の対応状況を確認し、未対応のブラウザーでも通常のグリッドとして読める形にしておきます。
まとめ
- 同じ幅の写真を積むならWordPress同梱のMasonry、大きさの違う画像を混ぜるならPackeryを使う
- Packeryは同梱されておらず、商用利用ではライセンスの確認が必要
- ギャラリーブロックに
is-masonryクラスを付け、画像の切り抜き設定をオフにする - 列の幅と間隔はCSSで決め、本体CSSの詳細度に合わせて上書きする
- スクリプトはギャラリーのあるページだけで
strategy付きで読み込み、prefers-reduced-motionに配慮する - 幅を先に決めておくこと、画像の幅・高さ属性を活かすことでCLSを抑える