画像配置について

右の枠と左の枠の大きさが違うので、画像を普通に配置したら大きさが合わずに余白が生まれてしまいます。ブロックを使うのであれば、中の画像を枠の大きさに合わせて広げて、画像をトリミングする形で表示する必要があると思います。

ちなみに、僕の環境で見ると右側の画像は潰れてしまっています。

画像だけのレイアウトなので、ブロックを組み合わせて CSS を書いて…とやってメンテナンス性を落とすよりも、1枚の画像で作ってしまったほうが簡単かもしれません（地下鉄今里駅から…等の文章が画像ではなくてテキスト必須、のような要件であれば無理ですが…）。

♥ 1

いいねをした人:

右のグリッド画像にリンク設定をしたいと思っておりまして、、

なるほど…。

カスタマイズで右と左の枠を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 で無理やり実装すると後々メンテナンスが面倒になる可能性があるので…。