目次
ブロックエディターで、ギャラリーを実装
画像を準備する
このいろいろなサイズの6枚の画像を使って、ギャラリーを実装していきます。
ブロックエディターで、ギャラリーを選択
ギャラリーを選択します。
メディアライブラリを選択
メディアライブラリを選択します。
ギャラリーを作成を選択
使用したい画像を選択し、ギャラリーを作成をクリックします。
ギャラリーを挿入を選択
ギャラリーを挿入をクリックします。
使用した画像の中に縦画像があると、それが優先されて、縦になる。
この様になって、横並びにならない……
縦画像にクラスv-imgを加えて、縦長になるのを防ぐ
クラス名は、なんでもいいんです。各自好きな名前にして下さい。
今回はvertical image（縦画像）をイメージして、v-imgにしてみました。
.wp-block-image.v-img {
aspect-ratio: 3 / 2;
box-shadow: 0 0 0.3rem rgba(0,0,0,0.2);
}
.wp-block-image.v-img img {
height: 100%;
object-fit: contain !important;
}これを追加CSSに書いておいて下さい。
aspect-ratio: 3 / 2;は、横3に対して縦2の比率という意味です。
横画像の状況によって、各自好きなように設定して下さい。
<figure class="wp-block-image v-img size-large"><img src="https://poncode.com/wp-content/uploads/2024/04/gallery-02.jpg" alt="" class="wp-image-7093" /></figure>この様に、ギャラリーの縦画像にクラス名v-imgを書き足して下さい。
これで完了です。
次は、カラムを変更してみよう！
ギャラリーのカラムの変更方法
ギャラリーの詳細について
ブロックエディターで、画像と画像の間の部分をクリックすると、右側にギャラリーの詳細が表示されます。
カラムのデフォルトは3です。これを4に変更します。
これだと、端数の分の画像が大きめになってしまうんですね。
ギャラリーの最後の画像のサイズ変化を防ぐ
.wp-block-gallery.has-nested-images figure.wp-block-image {
flex-grow: 0;
}これを追加CSSに書いておいて下さい。
これで完了ですね。
今日はありがとうございました。では、また！