ヒーロヘッダーブロックの下部にある白い隙間を無くしたい。

Snow Monkey は、ブロック間の余白は後続ブロックの上マージンで実現されています。そして、全幅ブロックに続く全幅ブロックの場合はそのマージンが0になり、ぴったりくっつきます。なのでヒーローヘッダーブロックを全幅にすれば、続くセクションブロックも全幅なので上マージンが0になると思います。試してみてください！

♥ 1

いいねをした人:

なるほど！ 理解しました。3つの要因があって、全幅にするのはそのうちの1つです。

1つはヒーローヘッダーブロックのそもそもの考え方の部分になるのですが、ヒーローヘッダーブロックは CSS のグリッドレイアウトというものを使っていて、要は描画エリアをグリッドで区切ってそのグリッドにそって画像やコンテンツを配置するという仕組みになっています。セクション（背景画像/動画）ブロックだと、背景画像・動画は本当の意味で背景で、コンテンツが少ないと縮小されるし、コンテンツが多いと拡大されます。でもヒーローヘッダーの背景画像はグリッドにそって配置されるようになっているので、グリッドの指定や画像のアスペクト比も尊重されるようになっています。なのでコンテンツの量によっては背景画像の大きさが不足して今回のような見た目になってしまいます。

2つ目は背景画像のアスペクト比の設定です。デフォルトだと 16/9になっているので、コンテンツ量が多くて16/9に収まらないと今回のような見た目になってしまいます。

とうことで、セクション（背景画像/動画）ブロックの背景画像・動画みたいにコンテンツ量にあわせて拡大縮小される設定があっても良いかもですね。とりえあずは CSS で対応しておいてもらうのが良いかもです。下記は例ですが、全部のヒーローヘッダーに影響がでちゃうので、実運用では適当な CSS クラスを付与してセレクタを調整してください。

.smb-hero-header__figure {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
}

♥ 1

いいねをした人:

ちょっと確認してみてほしいのですが、動画を設定すると「背景画像」というラベルの下が何もなくなりますよね。ここ、スクロールできません？

僕の環境だとそこがめっちゃ長くなってて、スクロールすると下の方に設定項目が表示されます…。これもバグなので直しますが、多分設定自体はできると思うので見てみてください…！

♥ 1

いいねをした人: