- このトピックには17件の返信、2人の参加者があり、最後にTarCoon☆CarToonにより1年、 3ヶ月前に更新されました。
-
投稿者投稿
-
2023年6月22日 6:51 PM #126768
【お使いの 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/のメインビジュアル(一番上のアニメーション部分)をヒーロヘッダーブロックで作っています。ご確認いただければ幸いです。
♥ 0いいねをした人: 居ません2023年6月22日 9:15 PM #1267742023年6月23日 2:47 AM #126777ご回答ありがとうございます。
早速、ヒーローヘッダーブロックを全幅しました。
しかし残念なことに変化が見られませんでした。
他に試す方法はありますでしょうか?ちなみにヒーローヘッダーブロックではなく、セクションブロックで対応していた時はブロック間の余白はありませんでした。
♥ 0いいねをした人: 居ません2023年6月23日 3:36 AM #126781もう一つ発覚したことがあります。
当該サイトhttps://tarcoon.me/の場合はヒーローヘッダーブロックの背景の動画を使用しています。
その影響もあるかもしれません。
ウインドウの大きさに合わせてシームレスに動画のサイズが変更しないことも影響しているかもしれないと思いました。サイズによってはきちんと隙間なく表示されていたので、ブロックとしては、ブロック間の余白は無くなりました!
♥ 0いいねをした人: 居ません2023年6月23日 3:49 AM #126782ブロック間の余白が現れる時の様子です。
https://youtu.be/qIamosYkroo2023年6月23日 9:37 AM #126789なるほど! 理解しました。3つの要因があって、全幅にするのはそのうちの1つです。
1つはヒーローヘッダーブロックのそもそもの考え方の部分になるのですが、ヒーローヘッダーブロックは CSS のグリッドレイアウトというものを使っていて、要は描画エリアをグリッドで区切ってそのグリッドにそって画像やコンテンツを配置するという仕組みになっています。セクション(背景画像/動画)ブロックだと、背景画像・動画は本当の意味で背景で、コンテンツが少ないと縮小されるし、コンテンツが多いと拡大されます。でもヒーローヘッダーの背景画像はグリッドにそって配置されるようになっているので、グリッドの指定や画像のアスペクト比も尊重されるようになっています。なのでコンテンツの量によっては背景画像の大きさが不足して今回のような見た目になってしまいます。
2つ目は背景画像のアスペクト比の設定です。デフォルトだと 16/9になっているので、コンテンツ量が多くて16/9に収まらないと今回のような見た目になってしまいます。
とうことで、セクション(背景画像/動画)ブロックの背景画像・動画みたいにコンテンツ量にあわせて拡大縮小される設定があっても良いかもですね。とりえあずは CSS で対応しておいてもらうのが良いかもです。下記は例ですが、全部のヒーローヘッダーに影響がでちゃうので、実運用では適当な CSS クラスを付与してセレクタを調整してください。
.smb-hero-header__figure { position: absolute; inset: 0; aspect-ratio: auto; }
2023年6月27日 2:41 PM #1269312023年6月28日 6:33 PM #127092なるほど! 理解しました。3つの要因があって、全幅にするのはそのうちの1つです。
ありがとうございます!!
一旦CSSで対応させていただいてたのですが、追って対応方法を教えてくださった
あ、「アスペクト比の設定」が「16 / 9」になっていると思いますが、これ消したらそれだけで背景画像全面になるかもです!
この「アスペクト比の設定」ですが、どこで行うものですか?
♥ 0いいねをした人: 居ません2023年6月28日 10:35 PM #1270942023年6月29日 5:54 PM #127232実はですね。そこで報告できていなかったことがあるのですが、動画を設定すると、
ヒーローヘッダーブロックのインスペクター(設定パネル)が開かなくて、
開くと設定された動画がリセットされてしまってもう一度動画を配置しなくてはいけなくなってしまうんです。
画像ファイルですと、ヒーローヘッダーブロックのインスペクター(設定パネル)の「背景画像」→「画像のアスペクト比」で設定できますね。参考にヒーローヘッダーブロックのインスペクター(設定パネル)の「背景画像」→「画像のアスペクト比」で設定ができない動画を送ります。
♥ 0いいねをした人: 居ません2023年6月29日 6:00 PM #1272342023年6月29日 8:56 PM #1272382023年6月30日 1:42 AM #127254今確認したところ!「背景画像」というラベルの下が何も無いと思ってたらスクロールできました!
ヒーローヘッダーブロックのインスペクター(設定パネル)の「背景画像」→「画像のアスペクト比」で設定できました!
ありがとうございます!♥ 0いいねをした人: 居ません2023年6月30日 1:50 AM #1272562023年7月1日 8:58 AM #127311 -
投稿者投稿
- トピック「ヒーロヘッダーブロックの下部にある白い隙間を無くしたい。」には新しい返信をつけることはできません。