スライダーブロックで作成したスライダーの大きさが意図せず小さくなる

0
いいねをした人: 居ません
9件の投稿を表示中 - 1 - 9件目 (全9件中)
  • 投稿者
    投稿
  • #124194
    MATSUMOTO
    閲覧者
    1

    【WordPressバージョン】6.2.2

    【お使いの Snow Monkey のバージョン】 20.1.0
    【お使いの Snow Monkey Blocks のバージョン】 19.3.2
    【お使いの Snow Monkey Editor のバージョン】 9.2.5
    【お使いのブラウザ】Chrome(PC利用時)、safari(iphone利用時)

    【当該サイトのURL】

    ※テストサイトで再現しています。

     

    ### 発生している問題

    スライダーブロックで作成したスライダーの大きさ(幅と高さ)の挙動が不安定になる。

    Snow Monkey Blocksのスライダーブロックを作成してスライドショーを作成しています。

    該当ページを表示した際に、スライダーの大きさが意図せず非常に小さくなることがあります。

    ブラウザのサイズを縮めて再度大きくしたりなど変更すると、スライダーが通常のサイズに戻るようになります。再度ブラウザを読み込むとスライダーのサイズが元に戻っていることもあれば、スーパーリロードで読み込むと再度スライダーが小さくなっていたりすることもあり、不安定な感じです。

    画像の大きさをちゃんと取得できていない感じ?。不具合かもしれないと思い投稿させていただきました。

     

    ■サイズが意図せず小さく表示されている例。幅がなぜか248pxなど小さい値が設定されている。

    ■本来はこう表示されて欲しい。幅が1000pxになっている。

     

    ■固定ページ編集画面では通常通り表示されている

     

    ###やりたいこと

    本来の大きさでスライダーを表示させたい。

    仕様制限的な感じであれば不具合回避するための注意点など教えて欲しい。

     

    ### 試したこと

    とりえあず追加CSSで下記のように設定したら直ったので本番サイトでは暫定的に下記の設定をしています。

    .spider__canvas {
    width: auto!important;
    }

     

    お手数をおかけ致しますがどうぞよろしくお願いいたします。

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

    確認します!

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

    ちょっと下記の2点を試してみてください!

    – スライダーブロックの親のセクションブロックにおいて、ブロックツールバーで「中央揃え」の設定をしていると思うのでそれを外してみる
    – スライダーブロックの親のセクションブロックにおいて、「コンテナーの配置」が「全幅」になっていると思うので「デフォルト」にしてみる

    0
    いいねをした人: 居ません
    #124272
    MATSUMOTO
    閲覧者
    1

    早速のご連絡ありがとうございます。

    試したところ以下のようになりました。セクションの中央揃えが悪さしていた感じでしょうか。

    (1)全幅&中央揃え共に外した→通常のサイズで表示された

    (2)全幅のみ外した(中央揃え設定あり)→小さいサイズで表示されたまま

    (3)中央揃えのみはずした(全幅設定あり)→通常のサイズで表示された

    ご確認どうぞよろしくお願いいたします。

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

    確認ありがとうございます!

    こちらでは再現しないのでなにか違いはないかなと探していたのですが、ご提示いただいたサンプルのスライダーブロック内の画像には loading="lazy" がついているようでした。

    セクションの中央揃えの設定は display: flex + justify-content: center で実現しているのですが、これと loading="lazy" &スライダーの幅の計算処理の相性がわるいようです。

    – 中央揃えを外しても問題のないレイアウトであれば中央揃えを外す
    – スライダー内の画像からは loading="lazy" を外せるのなら外す

    という対処が考えられるかなと思いました。

    0
    いいねをした人: 居ません
    #124528
    MATSUMOTO
    閲覧者
    1

    ご返信ありがとうございます。

    原因と対策について承知いたしました。

    今回特にセクションの中央寄せする必要はなさそうなので、中央寄せを外す形で対処しようかなと思います。

    ありがとうございました。

     

    ===

    こちらでは再現しないのでなにか違いはないかなと探していたのですが、ご提示いただいたサンプルのスライダーブロック内の画像には loading=”lazy” がついているようでした。

    ===

    ちなみに、上記が何かのプラグインの影響なのか気になって試しにWordPressインストール初期状態の直後にSnow MonkeyおよびSnow Monkey Blocks/Editorをインストールして同じように試してみたら、やはり再現しました。

    該当スライダー箇所をだいぶスクロールしないと見えないようにページ下部の方に配置しないと、遅延読み込みのタイミングの問題で再現しなかったのかもです(上の方に配置したら再現しなかった)。

    imgタグにloading=”lazy”は特に何もプラグインいれてない状態でも付与されていました(これはたぶんWordPress標準っぽい?)。

    ご参考までに。

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

    imgタグにloading=”lazy”は特に何もプラグインいれてない状態でも付与されていました(これはたぶんWordPress標準っぽい?)。

    あ、ほんとですね!失礼しました。

    その後も調査していたのですが、もしかしたらスライダーブロック側で実行タイミングを調整してなんとかできるかも?しれません。一応キャッシュ無効化した僕の環境では、縮んで読み込まれていたのが正しい大きさで読み込まれるようになりました。ただ、レイアウトとかにもよるのかもで、確実に絶対大丈夫とはいえないので、無理だったらすみません。一応次の Blocks のアップデートで反映はさせておきます。

    1
    いいねをした人:
    #124686
    MATSUMOTO
    閲覧者
    1

    ご返信ありがとうございます!

    もしかしたら今後セクション中央寄せするケースも出てくるかもですので、アップデートで調整されていると助かります!

    トピックは閉じさせていただきますね。ありがとうございました。

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

    Snow Monkey Blocks v19.4.0 で変更を入れてみました。

    1
    いいねをした人:
9件の投稿を表示中 - 1 - 9件目 (全9件中)
  • トピック「スライダーブロックで作成したスライダーの大きさが意図せず小さくなる」には新しい返信をつけることはできません。

ドキュメント

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

ドキュメント

フォーラム

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

サポートフォーラム

よくあるご質問

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

よくあるご質問

お問い合わせ

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

お問い合わせ

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