ギャラリーブロックの画像の大きさを揃える - WordPress 7.0 対応最新版

WordPress のギャラリーは画像の大きさが揃わない

WordPress のギャラリーブロックを使って5枚の画像を3カラムで並べると、↓このような見た目になります。

3で割った余りの4枚目と5枚目が上の段の画像より大きく表示されます。

空きスペースがなくていい、という考え方もありますが、5枚の画像を同じ大きさで表示したいこともあります。
割合としては同じ大きさにしたい場合の方が多いんじゃないかと個人的には思っています。

このケースでは6枚の画像を使えば大きさが揃いますが、画像が増減するようなケースを考えると根本的な解決にはなりません。

画像の大きさを揃えるやり方 - WordPress 7.0 対応最新版

WordPress 7.0 ではブロックの設定画面に CSS を記述してスタイルを設定できるようになりましたので、カスタム HTML ブロックなどを使わなくてもカスタマイズできるようになっています。

ギャラリーブロックの設定画面の 高度な設定 → 追加 CSS に以下のコードを書きます。

& figure.wp-block-image {
    flex-grow: 0 !important;
}

このコードを書くことにより画像の大きさが揃います。
編集画面でも同じ大きさで表示されるようになるので、気持ちよく作業ができます。

ギャラリーブロックの設定に 画像の大きさを揃える ってオプションがあるとうれしい人は多いと思います。

画像の大きさを揃えるやり方 - 改良版 [2026.7.30 追記]

上記の CSS を書くことによって5つの画像は同じ大きさになったのですが、まだ気になることがあります。

画面幅を変えると（3カラム⇔2カラムが切り替わるブレイクポイントのあたりで）、画像がかなり小さくなったり、急に大きくなったりします。

そこで、どの画面幅で見てもあまり違いを感じないようにするためのやり方を紹介します。

ギャラリーブロックの設定画面の 高度な設定 → 追加 CSS に以下のコードを書きます。
このコードを使う場合、上記で紹介した CSS は不要ですので、削除します。

& {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 30vw), 1fr));
}
& figure.wp-block-image:not(#individual-image) {
    width: 100% !important;
}

280px, 30vw の部分はご自身のサイトに合わせて調整する必要があるかもしれません。
こちら↓が改良版のギャラリーです。画面幅を変えて上にあるギャラリーとの動きの違いをご確認ください。