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

2022.12.122024.03.05

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

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

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

CSS適応後

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

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

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

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

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

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

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