右のグリッド画像にリンク設定をしたいと思っておりまして、、
なるほど…。
カスタマイズで右と左の枠をheightで設定すれば良いものなのでしょうか・・？
画面が広くなったら画像も広くならないとですよね？ 画像のトリミングは NG で画角は維持しないといけないとすると、 height で高さを固定したら width も固定しないとなので、それだと画面に合わせて画像が大きくならなくなってしまいますよね。
なのでやるとすれば画像のサイズとカラムのサイズをびっちり計算して合わせるしかないのかなと…。ちょっとこちらでやってみました。共有していただいた URL に現在使用されている画像からサイズを計算して適用してみました。エディターをコードエディターに切り替えて下記のコードを貼り付け、ビジュアルエディターに戻すと表示されます。
<!-- wp:group {"align":"full","layout":{"type":"default"}} -->
<div class="wp-block-group alignfull">
<!-- wp:snow-monkey-blocks/flex {"layout":{"orientation":"horizontal","type":"flex","flexWrap":"wrap"}} -->
<div class="wp-block-snow-monkey-blocks-flex smb-flex">
<!-- wp:image {"sizeSlug":"large","smb":{"flexBasis":"73%"}} -->
<figure class="wp-block-image size-large"><img src="https://placehold.jp/2173x1100.jpg" alt=""/></figure>
<!-- /wp:image -->
<!-- wp:snow-monkey-blocks/grid {"columnsOption":"columns","columns":2,"rows":2,"smb":{"flexBasis":"27%"}} -->
<div class="wp-block-snow-monkey-blocks-grid smb-grid smb-grid--columns:columns smb-grid--rows:rows" style="--smb-grid--gap:0;--smb-grid--columns:2;--smb-grid--rows:2">
<!-- wp:image {"lightbox":{"enabled":false},"sizeSlug":"large","linkDestination":"custom"} -->
<figure class="wp-block-image size-large"><a href="#"><img src="https://placehold.jp/400x550.jpg" alt=""/></a></figure>
<!-- /wp:image -->
<!-- wp:image {"lightbox":{"enabled":false},"sizeSlug":"large","linkDestination":"custom"} -->
<figure class="wp-block-image size-large"><a href="#"><img src="https://placehold.jp/400x550.jpg" alt=""/></a></figure>
<!-- /wp:image -->
<!-- wp:image {"lightbox":{"enabled":false},"sizeSlug":"large","linkDestination":"custom"} -->
<figure class="wp-block-image size-large"><a href="#"><img src="https://placehold.jp/400x550.jpg" alt=""/></a></figure>
<!-- /wp:image -->
<!-- wp:image {"lightbox":{"enabled":false},"sizeSlug":"large","linkDestination":"custom"} -->
<figure class="wp-block-image size-large"><a href="#"><img src="https://placehold.jp/400x550.jpg" alt=""/></a></figure>
<!-- /wp:image -->
</div>
<!-- /wp:snow-monkey-blocks/grid -->
</div>
<!-- /wp:snow-monkey-blocks/flex -->
</div>
<!-- /wp:group -->
とりあえず全幅にするために全体を全幅のグループブロックで囲って、左右のカラム分割のためにフレックスブロックを入れました。で、左側は普通に画像ブロック、右側は4個を並べるためにグリッドブロックを使いました。
そして、左の画像ブロックのサイズ→基本サイズを 73%、右側のグリッドブロックのサイズ→基本サイズを 27% にしました。ただ、ページに掲載されていた画像に基づいて計算すると、本当は 73% ピッタリではなくて 0.73091153716… のように小数になってしまったので、若干ずれて上下に余白が入ってしまいます。ぴったり整数になるような画像サイズにすれば余白がなくなるはずです。
問題点としては、スマホでもこのレイアウトを維持してしまうので、スマホではカラム落ちさせたいという場合は CSS を追加するか、Snow Monkey Editor プラグインの「表示設定（ウインドウサイズ）」の設定でスマホでは非表示にするようにして、スマホはスマホ用で別につくる、みたいなことが必要になります…。
ここまで書いてあれですが、このレイアウトが必須であるなら、僕なら「カスタム HTML ブロック」で HTML を書いちゃうかなぁと思います。既存ブロック + CSS で無理やり実装すると後々メンテナンスが面倒になる可能性があるので…。
