【WordPress】ギャラリーを2列・3列にすると最後の画像が大きくなる問題をCSSだけで解決する方法

WordPressの標準機能にある「ギャラリーブロック」。

画像を並べるだけで綺麗に整列してくれるので便利ですよね。

しかし、「2列（または3列）に設定しているとき、画像の枚数が奇数だと、最後の1枚だけがドカンと巨大化してしまう」という現象に悩まされたことはありませんか？

表彰実績やポートフォリオなど、定期的に画像を追加していくページでこれが起きると、見た目のバランスが悪くなってしまいます。

「カラムブロックを使えば解決するのでは？」と思うかもしれませんが、定期的に更新するページでカラムブロックを使うと、「間に1つ画像を挿入したいときに、それ以降のブロックを1マスずつ手動でズラさなければいけない」という地獄の作業が発生します。

これでは、画像をあらたに追加する時に、1段ずつ画像をズラすという面倒な作業が発生する可能性があります。

そこで今回は、「ギャラリーブロックをそのまま使いつつ、画像を追加するだけで、最後の1枚も他の画像と同じサイズを保ったまま綺麗に真ん中寄せにするCSS」をご紹介します。

PCだけでなく、スマホ表示にも完全対応しています。

1 2列（2カラム）表示の場合の解決CSS
2 3列（3カラム）表示の場合の解決CSS
3 CSSの設定手順
4 【まとめ】この方法が現場で最強の理由

2列（2カラム）表示の場合の解決CSS

まずは2列表示のギャラリーで、最後の1枚が広がってしまうのを防ぐCSSです。

CSS

/* ギャラリーの最後の奇数画像が大きくなるのを防ぎ、中央に寄せる */
.wp-block-gallery.columns-2, 
.wp-block-gallery.has-nested-images.columns-2 {
    justify-content: center;
}

.wp-block-gallery.columns-2 .wp-block-image:last-child:nth-child(odd),
.wp-block-gallery.has-nested-images.columns-2 .wp-block-image:last-child:nth-child(odd) {
    width: calc(50% - var(--wp--style--block-gap, 16px) / 2);
    flex-grow: 0;
}

3列（3カラム）表示の場合の解決CSS

3列表示の場合は、余る枚数が「1枚」のパターンと「2枚」のパターンがあるため、以下のコードを適用します。

CSS

/* 3列ギャラリー全体の配置を中央寄せにする */
.wp-block-gallery.columns-3, 
.wp-block-gallery.has-nested-images.columns-3 {
    justify-content: center;
}

/* 3列ギャラリーで、最後の段の画像が広がらないように固定する */
.wp-block-gallery.columns-3 .wp-block-image,
.wp-block-gallery.has-nested-images.columns-3 .wp-block-image {
    flex-grow: 0;
}

/* 最後の段の幅を、上の段（3列）と同じ幅（約33.3%）に固定する */
.wp-block-gallery.columns-3 .wp-block-image:last-child,
.wp-block-gallery.has-nested-images.columns-3 .wp-block-image:last-child,
.wp-block-gallery.columns-3 .wp-block-image:nth-last-child(2):nth-child(3n+1),
.wp-block-gallery.has-nested-images.columns-3 .wp-block-image:nth-last-child(2):nth-child(3n+1) {
    width: calc(33.333% - var(--wp--style--block-gap, 16px) * 2 / 3);
}

CSSの設定手順

WordPressの管理画面から、以下の手順でコピペするだけで適用されます。

管理画面の左メニューから 「外観」＞「カスタマイズ」 を開きます。（※テーマによってカスタマイズメニューがない場合は、「外観」＞「テーマエディター」、またはブロックテーマなら「サイトエディター」内の追加CSSを開いてください）
メニューにある 「追加CSS」 をクリックします。
上記のCSSコードをコピーして貼り付けます。（2列用と3列用、両方貼っておいても競合しません。）
「公開」 ボタンを押して保存します。

【まとめ】この方法が現場で最強の理由

このCSSを一度仕込んでおけば、更新担当にはメリットしかありません。

パソコンが苦手な人でも迷わない 　引き継いだ担当者は、固定ページを開いて「ギャラリーに画像をポンと追加するだけ」で完結します。
メンテナンスコストがゼロ 　途中に新しい画像を挿入しても、ギャラリーブロックの機能で勝手に全体が後ろにズレてくれます。カラムブロックのように「1つずつ手動で横に移動させる」という不毛な作業は一切不要です。

Webサイトは「作った後の運用のしやすさ」が命です。

ギャラリーを使って、投稿したり、サイトを運営する際は、ぜひこの「ギャラリー＋CSS制御」を試してみてください！