ギャラリーブロックで奇数の画像を並べると場合、サイズが変わってしまうことはないでしょうか？
例、画像数が奇数枚がゆえに、並ぶ画像が不ぞろいになります。
本記事では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);
}
} まとめ
今回のような数式を知っておくと、ギャラリーブロックの画像の並びが崩れた時に、CSSで修正ができます。
公式のブロックをうまく使いつつ、カスタマイズするのがベターなので是非参考にしてみてください。