旧ピックアップスライダー(非推奨)と同じ表示サイズにしたい。

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

    【お使いの Snow Monkey のバージョン】バージョン: 25.4.2
    【お使いの Snow Monkey Blocks のバージョン】バージョン 20.4.3
    【お使いの Snow Monkey Editor のバージョン】バージョン 9.3.3
    【お使いのブラウザ】Safari バージョン17.4
    【当該サイトのURL】https://tarcoon.me/

    現行のピックアップスライダーと旧ピックアップスライダー(非推奨)では画面の表示サイズが違います。
    PCデスクトップ表示やスマートフォン表示など、ウインドウサイズもそれぞれ大きく違います。
    旧ピックアップスライダーは画面いっぱいにスライダーが表示されてて見栄えがとても良く気に入っていました。
    そこで、ピックアップスライダーの表示サイズのカスタマイズ方法を教えていただきたいと思い、こちらに投稿させていただきました。

    ■現行 PCデスクトップ これから

    ■非推奨 PCデスクトップ これにしたい

    ■現行 スマートフォン これから

    ■非推奨 スマートフォン これにしたい

    現行のピックアップスライダーをなるべく、旧ピックアップスライダー(非推奨)と同じ表示サイズにしたいです。

    表示速度を落とす場合がありますので使用は推奨しないとのことですので、この縦横表示の比率がどの程度、表示速度を落とすことにつながるのかはわかりませんが、もし問題がないようであれば変更したいです。

    旧ピックアップスライダー(非推奨)と同じ表示サイズにカスタマイズするにはどうすればいいでしょうか?

    0
    いいねをした人: 居ません
    #137703
    キタジマ タカシ
    参加者
    2253

    返事遅くなってすみません、明日見てみたいと思います!

    この2つのピックアップスライダーが入ったページって公開されてたりしますか?

    1
    いいねをした人:
    #137728
    TarCoon☆CarToon
    参加者
    54

    ありがとうございます!
    比較用にTESTページを作成していたので、そちらを確認していただければと思います。
    よろしくお願いいたします。

    https://tarcoon.me/test_slider/

    1
    いいねをした人:
    #137737
    キタジマ タカシ
    参加者
    2253

    超助かります!ありがとうございます!

    早速確認してみました。僕も忘れていたのですが、新ピックアップスライダーはスマホでも常に16:9になるようになってしまっているために、タイトルが長いとはみ出したり、矢印に被ったりということが発生してしまっていました。旧ピックアップスライダーはスマホのときは16:9ではなくなるのでスマホでもタイトルがちゃんと読めます。

    これは新ピックアップスライダーの検証が甘いために発生した不具合なので(ほぼ)旧ピックアップスライダーと同じ感じになるように修正を入れようと思います。お急ぎの場合は下記の CSS をコピペしてください。Snow Monkey Blocks のアップデート後、追加した CSS は消していただければと思います。

    @media (min-width: 768px) {
      .smb-spider-pickup-slider__item {
        max-width: 75%;
      }
      
      .smb-spider-pickup-slider .spider__slide:before {
        padding-top: 178%;
      }
    }
    1
    いいねをした人:
    #137751
    TarCoon☆CarToon
    参加者
    54

    なるほど!そういうことでしたか!
    ありがとうございます。

    旧ピックアップスライダーと同じ感じになるように修正していただけるとのことなので、楽しみに対応を待ちたいと思います。

    Snow Monkey Blocks のアップデート後に確認後トピックを閉じさせていただきますね。

    1
    いいねをした人:
    #137821
    TarCoon☆CarToon
    参加者
    54

    早速アップデート対応ありがとうございました。

    確認したところ、PCデスクトップ表示ではいい感じに表示されました。
    ありがとうございます!大変満足しております。

    しかし、
    ウチのサイト(https://tarcoon.me)では、ピックアップスライダーはウィジットのオーバーレイ表示で使っているのですが、
    スマートフォン表示では表示が上下の余白がなくなってしまいます。
    これの調整をするカスタマイズ方法があれば教えていただきたいです。
    ちなみに、 旧ピックアップスライダー(非推奨)ではバランスの良い表示になります。

    ■現行 スマートフォン これから

    ■非推奨 スマートフォン これにしたい

    よろしくお願いいたします。

    0
    いいねをした人: 居ません
    #137827
    キタジマ タカシ
    参加者
    2253

    スマートフォン表示では表示が上下の余白がなくなってしまいます。
    これの調整をするカスタマイズ方法があれば教えていただきたいです。

    あー、今回のアップデートでピックアップスライダーの縦幅が長いので、その分ウィジェットエリアが画面高と同じくらいになり、余白がなくなっている感じだと思います。.l-overlay-widget-area .smb-spider-pickup-slider .spider__slidemin-height を適当な数値で上書きしてみるとどうでしょうか?

    2
    いいねをした人:
    #137828
    キタジマ タカシ
    参加者
    2253

    あ! ピックアップスライダーの中のテキストが見えなくなっちゃってますね。ちょっと修正入れます!

    3
    いいねをした人:
    #137833
    キタジマ タカシ
    参加者
    2253

    Snow Monkey Blocks v20.5.1 にアップデートして、下記の CSS で調整してみてください。

    .l-overlay-widget-area .smb-spider-pickup-slider .spider__canvas {
      min-height: ◯◯px; /* 好きな高さ */
    }
    2
    いいねをした人:
    #137835
    TarCoon☆CarToon
    参加者
    54

    .l-overlay-widget-area .smb-spider-pickup-slider .spider__slide の min-height を適当な数値で上書きしてみるとどうでしょうか?

    すみませんどういうふうに封じを入れればいいのかわかりません。仮の数字を入れてものを教えていただけませんか?

    あ! ピックアップスライダーの中のテキストが見えなくなっちゃってますね。ちょっと修正入れます!

    アップデートは完了しました。テキストも表示されていい感じです。ありがとうございます。

    0
    いいねをした人: 居ません
    #137839
    キタジマ タカシ
    参加者
    2253

    TarCoon☆CarToon さんのサイトのピックアップスライダーが新型になっていたので確認したところ、min-height は関係なくて、

    「ShortSpot☆ SS0 GarageBandで音楽を作ってiPhoneで撮った映像を組み合わせた映像作品!制作に至る経緯や参考にした動画を紹介します。」

    のタイトルが長いために、それが高さを押し広げているという感じのようでした。下記の CSS を追加して文字サイズを少し小さくするのはどうでしょうか?

    .l-overlay-widget-area .smb-spider-pickup-slider__item__title {
      --_font-size-level: 3;
    }
    2
    いいねをした人:
    #137855
    TarCoon☆CarToon
    参加者
    54

    わぁ〜!!!何から何までお手数おかけしました。
    本当にありがとうございます!とてもいい感じに美しく収まって嬉しく思います!

    問題は解決しましたので、トピックは閉じさせていただきますね。
    ありがとうございました。

    1
    いいねをした人:
12件の投稿を表示中 - 1 - 12件目 (全12件中)
  • トピック「旧ピックアップスライダー(非推奨)と同じ表示サイズにしたい。」には新しい返信をつけることはできません。

ドキュメント

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

ドキュメント

フォーラム

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

サポートフォーラム

よくあるご質問

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

よくあるご質問

お問い合わせ

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

お問い合わせ

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