ギャラリーブロックで奇数の画像を並べると場合、サイズが変わってしまうことはないでしょうか?
例、画像数が奇数枚がゆえに、並ぶ画像が不ぞろいになります。
![](https://motoki-design.co.jp/wordpress/wp-content/uploads/gallery_01.jpg)
![](https://motoki-design.co.jp/wordpress/wp-content/uploads/gallery_02.jpg)
![](https://motoki-design.co.jp/wordpress/wp-content/uploads/gallery_03.jpg)
![](https://motoki-design.co.jp/wordpress/wp-content/uploads/gallery_04.jpg)
![](https://motoki-design.co.jp/wordpress/wp-content/uploads/gallery_05.jpg)
本記事ではCSSを使ってギャラリーブロックの表示を改善してみたいと思います。
CSS適応後
![](https://motoki-design.co.jp/wordpress/wp-content/uploads/gallery_01.jpg)
![](https://motoki-design.co.jp/wordpress/wp-content/uploads/gallery_02.jpg)
![](https://motoki-design.co.jp/wordpress/wp-content/uploads/gallery_03.jpg)
![](https://motoki-design.co.jp/wordpress/wp-content/uploads/gallery_04.jpg)
![](https://motoki-design.co.jp/wordpress/wp-content/uploads/gallery_05.jpg)
目次
ギャラリーブロックで画像を同じサイズで並べる方法
やり方としてはギャラリーブロックに空白の画像を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);
}
}
結果、下記のように奇数枚でありながら、均一に画像が並びます。
![](https://motoki-design.co.jp/wordpress/wp-content/uploads/gallery_01.jpg)
![](https://motoki-design.co.jp/wordpress/wp-content/uploads/gallery_02.jpg)
![](https://motoki-design.co.jp/wordpress/wp-content/uploads/gallery_03.jpg)
![](https://motoki-design.co.jp/wordpress/wp-content/uploads/gallery_04.jpg)
![](https://motoki-design.co.jp/wordpress/wp-content/uploads/gallery_05.jpg)
空白の画像を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);
}
}
![](https://motoki-design.co.jp/wordpress/wp-content/uploads/gallery_01.jpg)
![](https://motoki-design.co.jp/wordpress/wp-content/uploads/gallery_02.jpg)
![](https://motoki-design.co.jp/wordpress/wp-content/uploads/gallery_03.jpg)
![](https://motoki-design.co.jp/wordpress/wp-content/uploads/gallery_04.jpg)
空白の画像を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);
}
}
![](https://motoki-design.co.jp/wordpress/wp-content/uploads/gallery_01.jpg)
![](https://motoki-design.co.jp/wordpress/wp-content/uploads/gallery_02.jpg)
![](https://motoki-design.co.jp/wordpress/wp-content/uploads/gallery_03.jpg)
![](https://motoki-design.co.jp/wordpress/wp-content/uploads/gallery_04.jpg)
![](https://motoki-design.co.jp/wordpress/wp-content/uploads/gallery_05.jpg)
まとめ
今回のような数式を知っておくと、ギャラリーブロックの画像の並びが崩れた時に、CSSで修正ができます。
公式のブロックをうまく使いつつ、カスタマイズするのがベターなので是非参考にしてみてください。