2022.7.4 追記
WordPress 5.9 でギャラリーブロックの仕様(構造)が変わりました。そのため、レイアウト調整の CSS が 5.8 までと違いますので、このページには両方の CSS を掲載してあります。
3カラムのギャラリー (デフォルト状態)
![](https://lightning.uonuma-js.com/wp-content/uploads/2021/02/Canon-PowerShot-SX160-IS_125510.jpg)
![](https://lightning.uonuma-js.com/wp-content/uploads/2021/02/Canon-PowerShot-A2400-IS_074456-1024x768.jpg)
![](https://lightning.uonuma-js.com/wp-content/uploads/2021/02/Canon-PowerShot-SX160-IS_130613.jpg)
![](https://lightning.uonuma-js.com/wp-content/uploads/2021/02/Canon-PowerShot-A2400-IS_074505-1024x768.jpg)
![](https://lightning.uonuma-js.com/wp-content/uploads/2021/02/Canon-PowerShot-SX160-IS_131100.jpg)
画像の大きさを揃える
WordPress 5.9 以降
.wp-block-gallery.has-nested-images figure.wp-block-image {
flex-grow: 0;
}
WordPress 5.8 以前
.wp-block-gallery .blocks-gallery-item {
flex-grow:0;
}
![](https://lightning.uonuma-js.com/wp-content/uploads/2021/02/Canon-PowerShot-SX160-IS_125510.jpg)
![](https://lightning.uonuma-js.com/wp-content/uploads/2021/02/Canon-PowerShot-A2400-IS_074456-1024x768.jpg)
![](https://lightning.uonuma-js.com/wp-content/uploads/2021/02/Canon-PowerShot-SX160-IS_130613.jpg)
![](https://lightning.uonuma-js.com/wp-content/uploads/2021/02/Canon-PowerShot-A2400-IS_074505-1024x768.jpg)
![](https://lightning.uonuma-js.com/wp-content/uploads/2021/02/Canon-PowerShot-SX160-IS_131100.jpg)
大きい画像を最初に表示する
WordPress 5.9 以降
.wp-block-gallery.has-nested-images {
flex-flow: row wrap-reverse;
}
WordPress 5.8 以前
.blocks-gallery-grid {
flex-flow: row wrap-reverse;
}
![](https://lightning.uonuma-js.com/wp-content/uploads/2021/02/Canon-PowerShot-SX160-IS_125510.jpg)
![](https://lightning.uonuma-js.com/wp-content/uploads/2021/02/Canon-PowerShot-A2400-IS_074456-1024x768.jpg)
![](https://lightning.uonuma-js.com/wp-content/uploads/2021/02/Canon-PowerShot-SX160-IS_130613.jpg)
![](https://lightning.uonuma-js.com/wp-content/uploads/2021/02/Canon-PowerShot-A2400-IS_074505-1024x768.jpg)
![](https://lightning.uonuma-js.com/wp-content/uploads/2021/02/Canon-PowerShot-SX160-IS_131100.jpg)