WordPress│ギャラリーブロックで画像を同じサイズで並べる方法

2022.12.122026.10.04

ギャラリーの最終行だけ画像が大きくなる場合は、列の幅を固定すると揃えられます。

原因は単に奇数枚だからではなく、行の余った幅を画像が分け合うレイアウトにあります。

本例は5枚をPCで3列、幅600px未満で2列に並べます。

5枚の動く表示例

次のギャラリーには掲載コードと同じCSSを適用しています。

画像は配置を確認するためのサンプルです。

リンク先は設定していません。

このサイトではSWELLのu-lb-offクラスを追加して自動の拡大表示を停止しています。

対象ギャラリーだけに適用する

画像ブロックを内包する現在のギャラリーブロックが対象です。

ギャラリー全体を選び、「高度な設定」の追加CSSクラスに waza-equal-gallery を入力します。

SWELLで拡大表示を使わない場合は、半角スペースで区切って u-lb-off も加えます。

冒頭の5枚の配置見本に合わせる場合は、画像のリンクを「なし」にします。

後半の見本では解説記事への通常リンクを設定しています。

旧式のul/liギャラリーと拡大表示を使う構成はこの例の検証対象外です。

個別キャプションは、下の見本のように画像の外側へ表示します。

変更前の追加CSSとギャラリーブロックの内容を保存してから、下のCSSを追加CSS欄へ貼り付けます。

旧記事の .wp-block-gallery::after に空白を足すCSSを使っている場合は、バックアップしてその旧指定を取り除いてください。

新しい指定は専用クラスを付けたギャラリーに限って適用されます。

.wp-block-gallery.has-nested-images.waza-equal-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.wp-block-gallery.waza-equal-gallery::before,
.wp-block-gallery.waza-equal-gallery::after { content: none; }
.wp-block-gallery.has-nested-images.waza-equal-gallery > figure.wp-block-image {
  width: auto !important;
  margin: 0;
  min-width: 0;
}
.wp-block-gallery.has-nested-images.waza-equal-gallery > figure.wp-block-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
@media (min-width: 600px) {
  .wp-block-gallery.has-nested-images.waza-equal-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.wp-block-gallery.has-nested-images.waza-equal-gallery > figure.wp-block-image { display: block; }
.wp-block-gallery.waza-equal-gallery > figure.wp-block-image > figcaption {
  position: static; max-height: none; overflow: visible;
  background: none; color: inherit; padding: 0.5em 0 0; font-size: 0.875em;
}
.wp-block-gallery.waza-equal-gallery > figure.wp-block-image > a { display: block; }
.wp-block-gallery.has-nested-images.waza-equal-gallery > figure.wp-block-image { height: auto !important; align-self: start; }
.wp-block-gallery.has-nested-images.waza-equal-gallery > figure.wp-block-image > a { display: block !important; height: auto !important; }
.wp-block-gallery.has-nested-images.waza-equal-gallery > figure.wp-block-image img { display: block; flex: none; height: auto !important; }

画像の比率と列数を変える

画像枠は4:3です。

object-fit: cover で枠に収めるため、元画像の縦横比が違うと端が切れます。

文字や図版を切りたくない場合は cover を contain に変えると余白付きで全体を表示できます。

このCSSの列数はブロックの列数設定より優先されます。

画像リンクとキャプションを保ったまま編集する

変更したい内容	編集する対象
列幅を揃える	ギャラリー全体のwaza-equal-galleryクラスとCSS
写真の説明を変える	個々の画像のキャプション
移動先を変える	個々の画像リンク。ギャラリー全体の列数とは別に確認
図版の文字を切らずに見せる	object-fitのcoverをcontainへ変更し、余白を確認

説明文を変えるためにギャラリー全体を作り直す必要はありません。

画像ごとのキャプションとリンク先を編集し、更新後に説明の文末まで見えるか、画像リンクが目的のページへ進むかを確認します。

説明が長くなっても、画像の下の文章を固定高さで切らないようにします。

コードエディターで既存のブロック構文を編集する場合は、galleryと各imageの開始・終了コメントを残します。

画像ごとのa要素やfigcaptionを削らずに保存し、再編集時にもwaza-equal-gallery、リンク先、キャプションが残っていることを確認します。

現在のコードはGridで列幅を揃える方式なので、旧方式の空白画像や疑似要素を追加する必要はありません。

2026年10月3日の隔離環境では、コードエディターでキャプションを編集・保存して再度開き、3つの画像リンクと専用クラスが残ることを確認しました。

ビジュアル編集画面でギャラリーを選択して再保存する操作は未検証です。