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

ギャラリーブロックで奇数の画像を並べると場合、サイズが変わってしまうことはないでしょうか?

例、画像数が奇数枚がゆえに、並ぶ画像が不ぞろいになります。

本記事ではCSSを使ってギャラリーブロックの表示を改善してみたいと思います。

CSS適応後

目次

著者

WEB制作をしているデジタルノマド
WordPressのカスタマイズが好きで、色々と自作しています。

WordPressのカスタマイズに困ったらご相談ください!

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

やり方としてはギャラリーブロックに空白の画像をCSSで生成して、結果的に偶数枚にしてあげます。

空白は疑似要素を使います。

例えば3カラムの場合は、100/3=33.33 ※1/3の幅ですが、

width :33.3%と単純に画像の幅を割り当てる訳にはいきません。

ギャラリーブロックの隙間分を考慮する必要があります。

カラム数コード隙間の係数
2calc(50% – var(–wp–style–unstable-gallery-gap, 16px)*0.5)1/2*1
3calc(33.33333% – var(–wp–style–unstable-gallery-gap, 16px)*0.66667)1/3*2
4calc(25% – var(–wp–style–unstable-gallery-gap, 16px)*0.75)1/4*3
5calc(20% – var(–wp–style–unstable-gallery-gap, 16px)*0.8)1/5*4
6calc(16.66667% – var(–wp–style–unstable-gallery-gap, 16px)*0.83333)1/6*5
7calc(14.28571% – var(–wp–style–unstable-gallery-gap, 16px)*0.85714)1/7*6
8calc(12.5% – var(–wp–style–unstable-gallery-gap, 16px)*0.875)1/8*7

上記の表を見るとわかるのですが、ギャラリーブロックの隙間の数式は下記になります。

100/カラム数[%]-(16px-((1/カラム数)× 隙間の数))

ですので、カラム数3の場合は下記のCSSを挿入します。

.wp-block-gallery::after{
    width: calc(33.33% - var(--wp--style--unstable-gallery-gap, 16px)*0.66667);
}

最終的には下記のコードで調整しています。

  • モバイル表示は2カラムになるので値を変更
  • 600px以上の時は3カラムの条件に
.wp-block-gallery::after {
    content: "";
    width: calc(50% - var(--wp--style--unstable-gallery-gap, 16px)*0.5);
}
@media (min-width: 600px) {
    .wp-block-gallery::after {
       content: "";
       width: calc(33.33% - var(--wp--style--unstable-gallery-gap, 16px)*0.66667);
    }
}  

結果、下記のように奇数枚でありながら、均一に画像が並びます。

空白の画像を2個追加したい場合

2つ分の空白を疑似要素で追加してあげます。

疑似画像:33.33%*2

隙間:0.66667/2

という数式で計算しています。

@media (min-width: 600px) {
    .wp-block-gallery::after {
       content: "";
       width: calc(33.33%*2 - var(--wp--style--unstable-gallery-gap, 16px)*0.66667/2);
    }
}  

空白の画像を3個追加したい場合

3個の場合も同様の数式で対応できます。

疑似画像:25%*3

隙間:0.75/3

@media (min-width: 600px) {
    .wp-block-gallery::after {
       content: "";
       width: calc(25%*3 - var(--wp--style--unstable-gallery-gap, 16px)*0.75/3);
    }
}  

まとめ

今回のような数式を知っておくと、ギャラリーブロックの画像の並びが崩れた時に、CSSで修正ができます。

公式のブロックをうまく使いつつ、カスタマイズするのがベターなので是非参考にしてみてください。

目次