- このトピックには17件の返信、2人の参加者があり、最後に
により1年、 4ヶ月前に更新されました。
-
投稿
-
【お使いの Snow Monkey のバージョン】バージョン: 20.3.4
【お使いの Snow Monkey Blocks のバージョン】バージョン 19.8.0
【お使いの Snow Monkey Editor のバージョン】バージョン 9.2.5
【お使いの PHP のバージョン】7.4.33
【お使いのブラウザ】macOS Ventura 13.4.1（22F82）Safariバージョン16.5.1 、Chromeバージョン: 114.0.5735.133
【当該サイトのURL】https://tarcoon.me/### 発生している問題
ヒーロヘッダーブロックの下部に白い隙間ができます。
セクションブロックのように隙間がない状態でブロック同士を敷き詰めたいです。
隙間をなくす方法があればよろしくお願いいたします。何らかの不具合であればご対応お願いいたします。
当該サイトhttps://tarcoon.me/のメインビジュアル（一番上のアニメーション部分）をヒーロヘッダーブロックで作っています。ご確認いただければ幸いです。
Who liked: No userSnow Monkey は、ブロック間の余白は後続ブロックの上マージンで実現されています。そして、全幅ブロックに続く全幅ブロックの場合はそのマージンが0になり、ぴったりくっつきます。なのでヒーローヘッダーブロックを全幅にすれば、続くセクションブロックも全幅なので上マージンが0になると思います。試してみてください！
Who liked:ご回答ありがとうございます。
早速、ヒーローヘッダーブロックを全幅しました。
しかし残念なことに変化が見られませんでした。
他に試す方法はありますでしょうか？ちなみにヒーローヘッダーブロックではなく、セクションブロックで対応していた時はブロック間の余白はありませんでした。
Who liked: No userもう一つ発覚したことがあります。
当該サイトhttps://tarcoon.me/の場合はヒーローヘッダーブロックの背景の動画を使用しています。
その影響もあるかもしれません。
ウインドウの大きさに合わせてシームレスに動画のサイズが変更しないことも影響しているかもしれないと思いました。サイズによってはきちんと隙間なく表示されていたので、ブロックとしては、ブロック間の余白は無くなりました！
Who liked: No userブロック間の余白が現れる時の様子です。
https://youtu.be/qIamosYkrooWho liked:
なるほど！ 理解しました。3つの要因があって、全幅にするのはそのうちの1つです。
1つはヒーローヘッダーブロックのそもそもの考え方の部分になるのですが、ヒーローヘッダーブロックは CSS のグリッドレイアウトというものを使っていて、要は描画エリアをグリッドで区切ってそのグリッドにそって画像やコンテンツを配置するという仕組みになっています。セクション（背景画像/動画）ブロックだと、背景画像・動画は本当の意味で背景で、コンテンツが少ないと縮小されるし、コンテンツが多いと拡大されます。でもヒーローヘッダーの背景画像はグリッドにそって配置されるようになっているので、グリッドの指定や画像のアスペクト比も尊重されるようになっています。なのでコンテンツの量によっては背景画像の大きさが不足して今回のような見た目になってしまいます。
2つ目は背景画像のアスペクト比の設定です。デフォルトだと 16/9になっているので、コンテンツ量が多くて16/9に収まらないと今回のような見た目になってしまいます。
とうことで、セクション（背景画像/動画）ブロックの背景画像・動画みたいにコンテンツ量にあわせて拡大縮小される設定があっても良いかもですね。とりえあずは CSS で対応しておいてもらうのが良いかもです。下記は例ですが、全部のヒーローヘッダーに影響がでちゃうので、実運用では適当な CSS クラスを付与してセレクタを調整してください。
.smb-hero-header__figure { position: absolute; inset: 0; aspect-ratio: auto; }Who liked:なるほど！ 理解しました。3つの要因があって、全幅にするのはそのうちの1つです。
ありがとうございます！！
一旦CSSで対応させていただいてたのですが、追って対応方法を教えてくださった
あ、「アスペクト比の設定」が「16 / 9」になっていると思いますが、これ消したらそれだけで背景画像全面になるかもです！
この「アスペクト比の設定」ですが、どこで行うものですか？
Who liked: No user実はですね。そこで報告できていなかったことがあるのですが、動画を設定すると、
ヒーローヘッダーブロックのインスペクター（設定パネル）が開かなくて、
開くと設定された動画がリセットされてしまってもう一度動画を配置しなくてはいけなくなってしまうんです。
画像ファイルですと、ヒーローヘッダーブロックのインスペクター（設定パネル）の「背景画像」→「画像のアスペクト比」で設定できますね。参考にヒーローヘッダーブロックのインスペクター（設定パネル）の「背景画像」→「画像のアスペクト比」で設定ができない動画を送ります。
Who liked: No userちょっと確認してみてほしいのですが、動画を設定すると「背景画像」というラベルの下が何もなくなりますよね。ここ、スクロールできません？
僕の環境だとそこがめっちゃ長くなってて、スクロールすると下の方に設定項目が表示されます…。これもバグなので直しますが、多分設定自体はできると思うので見てみてください…！
Who liked:今確認したところ！「背景画像」というラベルの下が何も無いと思ってたらスクロールできました！
ヒーローヘッダーブロックのインスペクター（設定パネル）の「背景画像」→「画像のアスペクト比」で設定できました！
ありがとうございます！Who liked: No userアスペクト比の設定部分を削除して試したところ、結局背景に使っている動画のアスペクト比似合わせられたりしちゃって、コンテンツ量に合わせたサイズ調整が難しいので一旦は、教えていただいたCSSで対応することにしました。
Who liked:
- トピック「ヒーロヘッダーブロックの下部にある白い隙間を無くしたい。」には新しい返信をつけることはできません。