フォーラムへの返信
-
なるほど！ 理解しました。3つの要因があって、全幅にするのはそのうちの1つです。
1つはヒーローヘッダーブロックのそもそもの考え方の部分になるのですが、ヒーローヘッダーブロックは CSS のグリッドレイアウトというものを使っていて、要は描画エリアをグリッドで区切ってそのグリッドにそって画像やコンテンツを配置するという仕組みになっています。セクション（背景画像/動画）ブロックだと、背景画像・動画は本当の意味で背景で、コンテンツが少ないと縮小されるし、コンテンツが多いと拡大されます。でもヒーローヘッダーの背景画像はグリッドにそって配置されるようになっているので、グリッドの指定や画像のアスペクト比も尊重されるようになっています。なのでコンテンツの量によっては背景画像の大きさが不足して今回のような見た目になってしまいます。
2つ目は背景画像のアスペクト比の設定です。デフォルトだと 16/9になっているので、コンテンツ量が多くて16/9に収まらないと今回のような見た目になってしまいます。
とうことで、セクション（背景画像/動画）ブロックの背景画像・動画みたいにコンテンツ量にあわせて拡大縮小される設定があっても良いかもですね。とりえあずは CSS で対応しておいてもらうのが良いかもです。下記は例ですが、全部のヒーローヘッダーに影響がでちゃうので、実運用では適当な CSS クラスを付与してセレクタを調整してください。
.smb-hero-header__figure { position: absolute; inset: 0; aspect-ratio: auto; }Who liked:僕のテスト環境2つで試してみたのですが、どちらも正しく表示されました…。ちょっと原因がわからないのですが、例えばページ速度最適化を全部オフにするとどうでしょうか？ あと、もし他にもページ速度系のプラグインを使っているのであれば、それもオフにしてみてください。
Who liked:Snow Monkey は、ブロック間の余白は後続ブロックの上マージンで実現されています。そして、全幅ブロックに続く全幅ブロックの場合はそのマージンが0になり、ぴったりくっつきます。なのでヒーローヘッダーブロックを全幅にすれば、続くセクションブロックも全幅なので上マージンが0になると思います。試してみてください！
Who liked:なんかこの公式サイトの表示も遅いな？と思っていました。最近のアップデートだと、パターンディレクトリからのパターン情報の取得をおこなうようになったので、そのあたりに原因があるのかもしれません。調査してみます！
Who liked:こんな感じでどうですかね？
add_filter( 'snow_monkey_get_template_part_args', function( $args ) { // 記事一覧カテゴリー以外のテンプレートの場合は無視 if ( 'template-parts/loop/entry-summary/term/term' !== $args['slug'] ) { return $args; } // 投稿以外の場合は無視 if ( 'post' !== $args['name'] ) { return $args; } $new_terms = array(); $terms = get_the_terms( get_the_ID(), 'category' ); foreach ( $terms as $term ) { $term_ids = get_ancestors( $term->term_id, 'category', 'taxonomy' ); krsort( $term_ids ); // チェックしたカテゴリーと先祖のカテゴリー情報をカテゴリーラベルとして使用 foreach ( $term_ids as $term_id ) { $new_terms[ $term_id ] = get_term( $term_id, 'category' ); } $new_terms[ $term->term_id ] = $term; } $args['vars']['_terms'] = $new_terms; return $args; } );Who liked:末端カテゴリーのみにチェックを変える事も可能です。
末端カテゴリーのみにチェックした場合の想定でコードを書いてみました。
add_filter( 'snow_monkey_get_template_part_args', function( $args ) { // 記事一覧カテゴリー以外のテンプレートの場合は無視 if ( 'template-parts/loop/entry-summary/term/term' !== $args['slug'] ) { return $args; } // 投稿以外の場合は無視 if ( 'post' !== $args['name'] ) { return $args; } $terms = get_the_terms( get_the_ID(), 'category' ); if ( $terms ) { // チェックしたカテゴリーを元にその先祖カテゴリーを取得 $term = $terms[0]; $term_ids = get_ancestors( $term->term_id, 'category', 'taxonomy' ); // チェックしたカテゴリーと先祖のカテゴリー情報をカテゴリーラベルとして使用 $new_terms = array(); foreach ( $term_ids as $term_id ) { $new_terms[] = get_term( $term_id, 'category' ); } krsort( $new_terms ); $new_terms[] = $term; $args['vars']['_terms'] = $new_terms; } return $args; } );Who liked:下記のパターンの下の方でコンテンツスライダーを矢印付きで使っているので（表示されていますよね？）、もし表示されないのであれば中身のコンテンツの
z-indexが影響しているとか、独自に追加されている CSS が影響している可能性があります。「スライダーをずらす」はスライダー自体が全幅か幅広でないとそもそも機能しないのと、ページの端か端までスライドさせる機能であるため、入れこの場合は親ブロックについても全幅状態になっている必要があります。
実際のページを見せてもらえれば、もっと具体的にアドバイスできると思いますので、可能であれば URL を教えてください！
Who liked: No user
