「ギャラリー」ブロックの画像サイズを均一にする方法

はじめに

「ギャラリー」ブロックは、通常3列で画像を表示します。

しかし、以下のCSS設定により、画像数が列数に満たない場合に自動で空きスペースを埋める挙動があります。

.wp-block-gallery.has-nested-images figure.wp-block-image {
  flex-grow: 1;
}

この設定が原因で、次のような現象が起きることがあります（図1参照）

• 画像が左右に引き伸ばされて不均一になる。
• 一部の画像だけが極端に大きく表示される。
• 視覚的なバランスが崩れる。

そこで、画像のサイズを均一に保ち表示するよう変更します。

この記事では、この方法について説明します。

完成イメージ

実装手順

以下のコードをstyle.cssに追加します。

.wp-block-gallery.has-nested-images figure.wp-block-image {
  flex-grow: 0;
}

さいごに

今回紹介した方法を使えば、「ギャラリー」ブロックで列数が揃わない場合でも、画像のサイズを均一に保ちながら表示できます。
視覚的なバランスを崩さず、左右に引き伸ばされる現象や一部画像だけが大きくなる問題を防げます。
CSSを追加するだけで簡単に改善できるので、ギャラリー表示の品質を安定させたいときに便利です。