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

0
いいねをした人: 居ません
15件の投稿を表示中 - 1 - 15件目 (全18件中)
  • 投稿者
    投稿
  • #126768
    TarCoon☆CarToon
    参加者
    56

    【お使いの 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
    いいねをした人: 居ません
    #126774
    アバター画像キタジマ タカシ
    参加者
    2369

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

    1
    いいねをした人:
    #126777
    TarCoon☆CarToon
    参加者
    56

    ご回答ありがとうございます。

    早速、ヒーローヘッダーブロックを全幅しました。
    しかし残念なことに変化が見られませんでした。
    他に試す方法はありますでしょうか?

    ちなみにヒーローヘッダーブロックではなく、セクションブロックで対応していた時はブロック間の余白はありませんでした。

    0
    いいねをした人: 居ません
    #126781
    TarCoon☆CarToon
    参加者
    56

    もう一つ発覚したことがあります。
    当該サイトhttps://tarcoon.me/の場合はヒーローヘッダーブロックの背景の動画を使用しています。
    その影響もあるかもしれません。
    ウインドウの大きさに合わせてシームレスに動画のサイズが変更しないことも影響しているかもしれないと思いました。

    サイズによってはきちんと隙間なく表示されていたので、ブロックとしては、ブロック間の余白は無くなりました!

    0
    いいねをした人: 居ません
    #126782
    TarCoon☆CarToon
    参加者
    56

    ブロック間の余白が現れる時の様子です。
    https://youtu.be/qIamosYkroo

    1
    いいねをした人:
    #126789
    アバター画像キタジマ タカシ
    参加者
    2369

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

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

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

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

    .smb-hero-header__figure {
      position: absolute;
      inset: 0;
      aspect-ratio: auto;
    }
    1
    いいねをした人:
    #126931
    アバター画像キタジマ タカシ
    参加者
    2369

    あ、「アスペクト比の設定」が「16 / 9」になっていると思いますが、これ消したらそれだけで背景画像全面になるかもです!

    1
    いいねをした人:
    #127092
    TarCoon☆CarToon
    参加者
    56

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

    ありがとうございます!!
    一旦CSSで対応させていただいてたのですが、

    追って対応方法を教えてくださった

    あ、「アスペクト比の設定」が「16 / 9」になっていると思いますが、これ消したらそれだけで背景画像全面になるかもです!

    この「アスペクト比の設定」ですが、どこで行うものですか?

    0
    いいねをした人: 居ません
    #127094
    アバター画像キタジマ タカシ
    参加者
    2369

    ヒーローヘッダーブロックのインスペクター(設定パネル)の「背景画像」→「画像のアスペクト比」で設定できます!

    1
    いいねをした人:
    #127232
    TarCoon☆CarToon
    参加者
    56

    実はですね。そこで報告できていなかったことがあるのですが、動画を設定すると、
    ヒーローヘッダーブロックのインスペクター(設定パネル)が開かなくて、
    開くと設定された動画がリセットされてしまってもう一度動画を配置しなくてはいけなくなってしまうんです。
    画像ファイルですと、ヒーローヘッダーブロックのインスペクター(設定パネル)の「背景画像」→「画像のアスペクト比」で設定できますね。

    参考にヒーローヘッダーブロックのインスペクター(設定パネル)の「背景画像」→「画像のアスペクト比」で設定ができない動画を送ります。

    https://youtu.be/CGcPNN_8HBc

    0
    いいねをした人: 居ません
    #127234
    アバター画像キタジマ タカシ
    参加者
    2369

    なんと!!確認します!!

    1
    いいねをした人:
    #127238
    アバター画像キタジマ タカシ
    参加者
    2369

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

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

    1
    いいねをした人:
    #127254
    TarCoon☆CarToon
    参加者
    56

    今確認したところ!「背景画像」というラベルの下が何も無いと思ってたらスクロールできました!
    ヒーローヘッダーブロックのインスペクター(設定パネル)の「背景画像」→「画像のアスペクト比」で設定できました!
    ありがとうございます!

    0
    いいねをした人: 居ません
    #127256
    TarCoon☆CarToon
    参加者
    56

    アスペクト比の設定部分を削除して試したところ、結局背景に使っている動画のアスペクト比似合わせられたりしちゃって、コンテンツ量に合わせたサイズ調整が難しいので一旦は、教えていただいたCSSで対応することにしました。

    1
    いいねをした人:
    #127311
    アバター画像キタジマ タカシ
    参加者
    2369

    あ、そうか、「画像のアスペクト比」空だと本来のその動画の画角で表示されるってだけでした…。次のアップデートでコンテンツに合わせてる設定を追加します!

    1
    いいねをした人:
15件の投稿を表示中 - 1 - 15件目 (全18件中)
  • トピック「ヒーロヘッダーブロックの下部にある白い隙間を無くしたい。」には新しい返信をつけることはできません。

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ

Snow Monkey は Gutenberg ブロックエディターに対応した 100%GPL の WordPress テーマです。拡張性を意識した開発をおこなっており、カスタマイザーとブロックでスピーディーにサイトを立ち上げるだけでなく、CSS やフックを駆使した高度なカスタマイズにも柔軟に対応できます。