WordPressのギャラリー 最後の画像が大きくなるのを防ぐ

ブロックギャラリーを使うと、最後の画像のカラム数が合わないと大きな画像になる。
これは、CSSで簡単に修正することができる。

CSSの追加で flex-grow: 0; を適用する、またはグリッドレイアウト（CSS Grid）に変更するのが最も確実な解決策です。

WordPressの仕様上、ギャラリーはFlexboxという仕組みで並べられており、余ったスペースを最後の画像が自動で埋めてしまうため巨大化してしまいます。

サイト全体、もしくは特定のギャラリーだけに適用する2つの解決策を紹介。

方法1：サイト内のすべてのギャラリーに適用する（推奨）

テーマの「追加CSS」や子テーマの style.css に以下のコードを貼り付けるだけで、何列（何カラム）の設定であっても最後の画像が広がらず、他の画像と同じサイズに統一される。

/* ギャラリーブロックの最後の画像が巨大化するのを防ぐ */
.wp-block-gallery .wp-block-image {
    flex-grow: 0 !important;
}

方法2：特定のギャラリーだけに対応させる（プラグイン等との競合を防ぐ）

他のページへの影響を避けたい場合は、特定のギャラリーだけに専用のクラス（名前）をつけてCSSを適用することができる。

1. 記事編集画面での設定

1. 編集画面で対象の「ギャラリーブロック」を選択します。
2. 右側の設定サイドバーにある 「高度な設定」（または「追加 CSS クラス」）を開きます。
3. そこに waza-equal-gallery と入力します。

2. CSSの追加

その後、以下のCSSをサイトの「追加CSS」などに記述します。

/* 指定したクラスのギャラリーだけサイズを均等にする */
.wp-block-gallery.waza-equal-gallery .wp-block-image {
    flex-grow: 0 !important;
}

最後の画像を、中央寄せにしたい場合

もし「最後の1枚を大きくせず、かつ中央に配置したい」という場合は、以下のように記述を調整すると良い。

/* 最後の画像を拡大させず、中央に寄せる */
.wp-block-gallery {
    justify-content: center;
}
.wp-block-gallery .wp-block-image {
    flex-grow: 0 !important;
}