-
検索結果
-
Google fonts からCDNで読み込んでも同じくずれちゃいますね。失礼しました！
となるとフォント固有の問題っぽいですね…→デモサイトにweight 100だけCDNで読み込んで実装してみました。
Who liked:
参照サイトを拝見しましたが、おそらくアクションフックで
<section class="p-front_page_slider__block">〜</section>というスライダーセクションを独自に作り、挿入されているように見えます。また、背景の水玉に関しては背景画像を設置されているだけです。ですので、セクションブロックやグループブロック、スライダー関連のブロックを駆使し、独自に CSS を加えることで、近しい形にすることは可能かと思いますが、実現されたい内容や譲れないポイントなどで実現方法を選択してみてはいかがでしょうか。参考になれば幸いです。
Who liked:
拝見しました。追加CSSを削除されて試されているようなのですが、どこか（独自のプラグインなど追加CSSからではなく）から以下のようなCSSを書かれてはいませんでしょうか？
.smb-items--fill>.c-row>.c-row__col .smb-items__item__body.block-editor-block-list__layout>:nth-last-child(2), .smb-items--fill>.c-row>.c-row__col .smb-items__item__body>:last-child { margin-bottom: 0; margin-top: auto; }こちらの
margin-top: auto;が悪さをしているような気がしますので、どこで記述をされているのかを確認された上で、打ち消す等試されると良いかと思います。ご参考までに。Who 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:ブロック間の余白が現れる時の様子です。
https://youtu.be/qIamosYkrooWho liked:
こちら解決しました。ラベルが表示されない原因は
↓
ページ速度最適化→get_template_part() を拡張する
これが無効化されていたことが原因でした。わからず色々やっていたのですが根本的なところが原因でした申し訳ありません。
※キタジマさんがTwitterでもシェアされていました
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:下記のパターンの下の方でコンテンツスライダーを矢印付きで使っているので（表示されていますよね？）
>>頂いたURL先のものは確かに表示されています。
自分のサイトではないので実際にURLが共有できないのですが、以下のような表示になってしまいます。
なお、親ブロックも含めて全幅になっております。
ちなみに、ブラウザの表示を90％にしてみたら、下記のようにズラシで入ったのですが、これは一応ズラシ機能は活きているということになるのでしょうか？相当広いディスプレイじゃないと重なり具合がわからないのかなと思うのですが。
矢印は依然として表示されないので、CSSを見て見ます。
Who liked: No user下記のパターンの下の方でコンテンツスライダーを矢印付きで使っているので（表示されていますよね？）、もし表示されないのであれば中身のコンテンツの
z-indexが影響しているとか、独自に追加されている CSS が影響している可能性があります。「スライダーをずらす」はスライダー自体が全幅か幅広でないとそもそも機能しないのと、ページの端か端までスライドさせる機能であるため、入れこの場合は親ブロックについても全幅状態になっている必要があります。
実際のページを見せてもらえれば、もっと具体的にアドバイスできると思いますので、可能であれば URL を教えてください！
Who liked: No user
