スライダーブロック使用時の画像サイズと配置の変更について(とそれに伴う問題解決)

0
いいねをした人: 居ません
  • このトピックには4件の返信、3人の参加者があり、最後にmegにより3ヶ月、 1週前に更新されました。
6件の投稿を表示中 - 1 - 6件目 (全6件中)
  • 投稿者
    投稿
  • #109939
    meg
    参加者
    15

    【お使いの Snow Monkey のバージョン】
    【お使いの Snow Monkey Blocks のバージョン】16.0.4
    【お使いの Snow Monkey Editor のバージョン】 8.0.1
    【お使いのブラウザ】Google Chrome
    【当該サイトのURL】クライアントサイトにつき非公開

    ### 実現したいこと

    ・Snow Monkey Blocksのボックスを配置
    ・その中にSnow Monkey Blocksのスライダーを使用しスライダーを設置

    ・表示画像を100%ではなく、50%程度に表示したい
    ・画像の表示位置は中央に配置したい
    ・左右の矢印とサムネイルは画像の上ではなく余白上左右幅いっぱいの位置にしたい

    ### 発生している問題

    ・読み込み時、画像は50%で読み込まれるのですが、
    ボックスの枠が100%のサイズで読み込まれてしまう

    ・中央ぞろえをmargin:0 25%;で指定しているためか、
    スライダー下のサムネイルが右へ25%ずれてしまう

    ・サムネイルのサイズ高さが50%に変わってしまう

    ケースもあります。

    ### 試したこと

    当初設定したCSSは以下のとおりです。

    .spider__figure.ls-is-cached{
      width:50%;
      margin:0 25%;
    }

    上記のCSSだと、設置するページによっては横幅50%に「切り取られる」だけのケースや、うまくCSSが効かないこともあり、下記のCSSに書き換えて対応しています。
    (ただしheight:50%;が入ることで、サムネイルにも影響がでてしまいます。)

    img.spider__figure.ls-is-cached.lazyloaded{
      width:50%;
      height:50%;
      margin:0 25%;
    }
    margin:0 auto;
    

    では中央寄せにできませんでした。

    そもそもかなり強引なやり方をしている気もするので、適切な方法があればご教授いただけますと幸いです。

    0
    いいねをした人: 居ません
    #109973
    es
    参加者
    62

    megさん

    ご質問への直接的な回答ではないのですが、私はよくスライダーの入ったボックスをコンテナーやセクションに組み込み、それらのブロック設定でコンテンツの最大幅を指定することで任意の幅にしているのですが、もしそれでも弊害がないようでしたら簡単でオススメです。
    なおセクションだと上下に余白が入るため、コンテナーの方が扱いやすいかもです。もしよければお試しください。

    1
    いいねをした人:
    #109982
    meg
    参加者
    15

    esさん、こんにちは。
    アドバイスありがとうございます。

    スライダーの入ったボックスをコンテナーやセクションに組み込み、それらのブロック設定でコンテンツの最大幅を指定することで任意の幅にしているのですが、

    なるほど!ありがとうございます。

    サムネなしで画像を小さめに表示させたい場合には、コンテナーを使ったこの方法でいけますね!
    もう少しいじってみて厳しそうなら、こちらの方法でやってみようと思います。
    ありがとうございます!

    ※同様の悩みをお持ちの方もいるかもしれないので、もう少しトピック開けておきます。

    1
    いいねをした人:
    #110052
    es
    参加者
    62

    megさん

    私が回答したことで他の方からの回答がなくなってしまったとしたら申し訳ないと思い、CSSも考えてみました。

    私の環境では下記CSSで添付画像のように表示されるのですが、ご要望はこんな感じで合っていますかね。

    .smb-spider-slider .smb-spider-slider__figure-wrapper, .smb-spider-slider .spider__slide {
      flex: 1 0 100% !important;
      flex-wrap: wrap;
      overflow: hidden;
      position: relative;
      text-align: center;
    }
    
    .smb-spider-slider .spider__figure {
      max-width: none;
      width: 50%;
    }
    
    .spider__arrow[data-direction="prev"]::before {
      border-bottom: 1px solid #000;
      border-left: 1px solid #000;
      left: calc(50% - 5px);
      top: calc(50% - 5px);
      transform: rotate(45deg);
    }
    
    .spider__arrow[data-direction="next"]::before {
      border-right: 1px solid #000;
      border-top: 1px solid #000;
      bottom: calc(50% - 5px);
      right: calc(50% - 5px);
      transform: rotate(45deg);
    }

    割愛できるコードもありますが、元コードと比較しやすいよう、そのままにしています。
    お試しいただけたら幸いです。

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

    ちょっと僕もやってみました。

    .spider .spider__canvas .smb-spider-slider__figure-wrapper {
        width: 50%;
        flex: 0 0 auto !important;
    }
    .spider .spider__arrow:before {
        border-color: black;
    }

    だとどうですかね?

    2
    いいねをした人:
    #110086
    meg
    参加者
    15

    es様

    かえって気を使わせてしまったようですみません。
    そしてありがとうございます!

    キタジマ様

    お忙しい中、ご対応いただきありがとうございます。
    いつも丁寧な対応、感謝します。

     

    それぞれのコードで、思っていた形状にすることができました。

    コードを掲載いただいたおかげで、
    どの部分のコードが不足していたのか、
    勘違いをしていたのか理解が深まりました。

    また矢印の装飾に関わる部分までご教授いただきありがとうございます。

     

    いつもこちらを頼りっきりになってしまっているので、
    思うデザインが再現できるよう、もっと努力したいです。

    重ねてありがとうございます。

    2
    いいねをした人:
6件の投稿を表示中 - 1 - 6件目 (全6件中)
  • トピック「スライダーブロック使用時の画像サイズと配置の変更について(とそれに伴う問題解決)」には新しい返信をつけることはできません。

ドキュメント

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

ドキュメント

フォーラム

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

サポートフォーラム

よくあるご質問

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

よくあるご質問

お問い合わせ

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

お問い合わせ