スライダーの下に余白ができてしまう

0
Who liked: No user
15件の投稿を表示中 - 1 - 15件目 (全18件中)
  • 投稿者
    投稿
  • #50788
    河野武
    参加者
    5

    トピックを新しく立てる方は次の項目も記述してください(要望トピックの場合は不要です)。

    【お使いの Snow Monkey のバージョン】10.3.0
    【お使いのブラウザ】Google Chrome
    【当該サイトのURL】https://corporate.kojodan.jp/

    ===

    トップページにスライダーを使用しているのですが、不定期にスライダーの下に余白ができてしまいます。
    法則性がわからず直せないので助けていただけますでしょうか。
    ログアウトでの閲覧、キャッシュプラグインなどを無効にしても解決しませんでした。

    設定としては、表示するスライド数を
    ラージ、ミディアム→2
    スモール→1
    にしています。

    見た感じ、表示数1のスペース(スライドの4倍)が確保されて、そこに2つ表示しているため、同サイズの余白が生まれているように見えます。

    0
    Who liked: No user
    #50804
    アバター画像キタジマ タカシ
    参加者
    2421

    手持ちの環境(Mac + Chrome、Android + Chrome)で何度かリロードしてみたりスライダー下のドットをクリックしてみたりしたのですが再現できませんでした。

    不定期にスライダーの下に余白ができてしまいます。

    とのことですが、これは画面を表示したとき、画像がスライドしたとき、などどういう操作をしたときに再現されるかも決まりがなく、完全にランダムということでしょうか?

    0
    Who liked: No user
    #50812
    河野武
    参加者
    5

    説明の仕方が悪くて申し訳ありません。

    余白ができるのは表示時です。動作時にできることはありません。

    別のページを表示してトップに戻ったときや、しばらくしてからアクセスすると発生することが多いようですが、余白なく表示されることもあるので原因がわかりません。

    もしかするとこちらの環境に問題があるのかもしれませんね。

    0
    Who liked: No user
    #50855
    アバター画像キタジマ タカシ
    参加者
    2421

    ありがとうございます!いったりきたりしていたら再現できました!

    ただ、確かにどういう条件でなるかがわからず、CSS 的にも異常な値が割り当てられているのも発見できなかったので、これといった解決策がわかりません…。なんとなくこれでいけるかも?というパッチを用意してみたので、カスタマイザー → 追加 CSS に下記の CSS を追加して様子見してみていただけませんか?

    .slick-initialized .slick-slide {
        display: flex;
        justify-content: center; align-items: center;
    }

    もしくは

    .smb-slider .slick-slide {
        display: flex;
        justify-content: center; align-items: center;
    }

    これで解決できそうなら Snow Monkey、Snow Monkey Blocks をアップデートして取り込もうと思います。

    0
    Who liked: No user
    #50856
    河野武
    参加者
    5

    ありがとうございます!
    さっそく追加してみたので、しばらく様子見してみますね。

    0
    Who liked: No user
    #50860
    アバター画像キタジマ タカシ
    参加者
    2421

    よろしくおねがいします!

    0
    Who liked: No user
    #50896
    河野武
    参加者
    5

    何度か時間を起きながらも試してみましたが再現しなくなったので大丈夫そうです!

    迅速なご対応ありがとうございました。

    1
    Who liked: No user
    #50902
    アバター画像キタジマ タカシ
    参加者
    2421

    確認ありがとうございます、たすかります! Snow Monkey、Snow Monkey Blocks の次のアップデートでこの CSS を取り込みます。アップデート後は追加した CSS は消しても大丈夫です。

    0
    Who liked: No user
    #50970
    アバター画像キタジマ タカシ
    参加者
    2421

    Snow Monkey Blocks v8.2.3 で修正しました!

    1
    Who liked: No user
    #51687
    河野武
    参加者
    5

    本件、まだ解決していないようです。たまに起きています。

    プラグイン、テーマは最新版にしています。
    Snow Monkey Blocks 8.4.1
    Snow Monkey 10.5.2

    リロードすれば直るので致命的ではないのですが、はじめて訪問された方にはちょっと情けない印象を与えてしまうので、解決していないということだけご記憶いただければ幸いです。
    優先度が低いことは承知しておりますので、修正自体は後日でけっこうです。

    「解決しました!」と元気よく伝えてしまったので、「ウソでした!」というご報告でした。

    1
    Who liked: No user
    #51697
    アバター画像キタジマ タカシ
    参加者
    2421

    ぐわー、そうですか…
    えっと、autoptimize で js の操作(結合?圧縮?)をされていると思うのですが、それを解除するとどうなりますか?

    0
    Who liked: No user
    #51698
    河野武
    参加者
    5

    たしかに今回はプラグインを停止させて確認してませんでした。

    しばらく停止させて様子を見てみます!

    0
    Who liked: No user
    #51705
    河野武
    参加者
    5

    AutoptimizeとWP Fastest Cacheを停止していますが、起きますね。

    トップページ以外のページを開いたまま、しばらく放置しておいて、トップに戻るとかなりの確率で再現することがわかりました。

    (たとえば企業情報のページを開いたままタブを10分以上放置しておき、またタブに戻ってトップのリンクを選ぶと起きます)

    参考になるのかどうかもわからない情報ですが、ご報告まで。

    繰り返しになりますが、致命的ではないのでいつか解決すればいいなという程度で受け止めていただければ十分です。

    0
    Who liked: No user
    #51726
    アバター画像キタジマ タカシ
    参加者
    2421

    確かに攻城団合同会社のサイトだと再現できるのですが、僕の開発環境だと再現ができないのです。なので画像のサイズがどうとか使っているプラグインとの兼ね合いでどうとか、なにか原因があるのだと思いますが、全く検討がつかない状態です…。

    僕のブラウザからだと「御朱印帳、はじめました」の画像だけが正しい縦横サイズで読み込まれないという現象が起こっています。一度、この画像だけを外してみるとどうなるか見てもらえないでしょうか?

    「正しい縦横サイズで読み込まれない」という現象から可能性を考えると、あとは

    – カスタマイザー → ページ速度最適化 → 画像の非同期読み込み を無効にしてみる
    – スライダーブロックの画像に widthheight が入るように Snow Monkey Blocks を改修してみる

    が考えられるかなと思います。後者は実装が可能か調査してみますので、前者も一度試してみてもらえないでしょうか。
    よろしくおねがいします!

    0
    Who liked: No user
    #51740
    アバター画像キタジマ タカシ
    参加者
    2421

    連投すみません、v8.4.2 で、スライダーブロックに width と height が反映されるようにしてみました。画像の選択時と画像サイズの変更時に反映されるので、アップデート後、スライドを選択 → インスペクターで適当な画像サイズに変更 → もとの画像サイズに変更、してみてください!

    1
    Who liked: No user
15件の投稿を表示中 - 1 - 15件目 (全18件中)
  • トピック「スライダーの下に余白ができてしまう」には新しい返信をつけることはできません。

ドキュメント

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

ドキュメント

フォーラム

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

サポートフォーラム

よくあるご質問

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

よくあるご質問

お問い合わせ

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

お問い合わせ

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