「ギャラリー」ウィジェットを綺麗なMasonryレイウトにする方法

はじめに
ブロックとウィジェットの違いについて
完成イメージ
実装手順
さいごに

はじめに

「ギャラリー」ウィジェットは、縦横の向きや大きさが異なる画像が混在していると、無駄な余白が発生して見栄えが悪くなってしまいます（図1参照）。

そこで、CSSのマルチカラムレイアウトを用いてギャラリーを Masonry（石積み）レイアウトに変更し、隙間なく綺麗に整列させるカスタマイズを行います。

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

ブロックとウィジェットの違いについて

Gutenbergエディターの「ギャラリー」ブロックであれば、設定パネルで「画像を切り抜いて調整」をオンにすることで画像を同じ大きさに調整し、綺麗に整列させることが可能です。
しかし、ウィジェットの場合はこうした標準機能がないため、工夫が必要になります。

完成イメージ

実装手順

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

.widget_media_gallery {
  .gallery {
    columns: 2;
    column-gap: 8px;

    .gallery-item {
		  break-inside: avoid;
      display: inline-block !important;
      float: none !important;
      margin: 0 !important;
      width: 100% !important;
    }

    .gallery-icon img {
      display: block;
      width: 100%;
    }

    br {
      display: none;
    }
  }
}

columnsによる多段組化
要素を複数に分割して上から下へ順番に流し込み、ブラウザ側が自動的にレイアウトを調整することで Masonryレイアウトを実現しています。

さいごに

今回紹介した方法を使えば、ウィジェットのギャラリーでも画像のサイズや向きがバラバラな状態を解消し、無駄な余白をなくして美しくすっきりと整列させることができます。