VWSとは フォーラム Lightning Lightning トップページスライドショーウィジェットについて

Lightning トップページスライドショーウィジェットについて

このトピックには8件の返信が含まれ、2人の参加者がいます。1 ヶ月、 3 週間前 gundam さんが最後の更新を行いました。

9件の投稿を表示中 - 1 - 9件目 (全9件中)
  • 投稿者
    投稿
  • #19281

    gundam
    参加者

    Lightning Pro
    JPNSTYLE
    を、使用させていただいてます

    Lightning トップページスライドショーウィジェットについてなのですが、
    スマホで見た場合、文字、ボタンも小さくなってしまいます。

    できれば、トップページの他の文字の大きさと合わせたいのですが・・・。

    こちらは、仕様ですか?

    トップページの他の文字と合わせる場合はどの辺りをどの値にすれば、同じ大きさで表示されますでしょうか?

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

    #19284

    RICK
    参加者

    デバイス幅によって画像の幅が変化します。画像の幅によって文字の大きさが変化します。
    つまりは、画像と文字のレイアウトをほぼ画一に保つための処置だと思われます。

    画像と文字のレイアウトやバランスが崩れても構わないという前提での質問でしょうか?

    #19297

    gundam
    参加者

    RICKさん、いつもありがとうございます。

    確かに、いい感じでかっこいいのですが、
    ユーザビリティを考えると、特にボタンは小さくて・・・。

    試しに、通常の大きさ(スマホ用)に変えて検証したいなと、思いました。

    画像は現状で、フォントだけ(ボタンも含む)スマホ用の時の大きさにできればと思います。

    #19318

    RICK
    参加者

    スライドショーの文章の文字の大きさは

    • タイトル
    • 説明文
    • ボタン

    の3種類ありますが、それをどこと合わせたいということでしょうか?

    P.S.
    検証するだけなら、開発者ツールを使っていろいろいじってみれば済む話です。
    Google Chrome の開発者ツールでは、下記のことができます。

    • 要素に効いているCSSコードを1つ1つ着脱可能(左側のチェックボックス)
    • 各々のCSSコードの要素や値の変更(クリックすると編集可能に)
    • CSSコードの追加(最終要素の少し下をクリックすると表示。慣れないと操作が難しいかも)
    #19409

    gundam
    参加者

    お返事遅くなりすみません。
    どこと合わせるというのは、
    スライドショーの下に、コンテンツを表示させると思いますが、
    タイトル、本文など。
    こちらと合わせられれば良いかなと思いました。

    #19420

    RICK
    参加者
    • タイトル
    • 説明文
    • ボタン

    上記のそれぞれをそれぞれどこに対応させるか訪ねたつもりですが、
    期待した回答が得られなかったので対応を変えさせていただきます。

    下記がスマホでの表示時のそれぞれの部分の文字サイズのデフォルトです。

    タイトルの部分はは部分部分で大きさが異なるのでなんとも言えませんが、
    (上記質問をした意図はここにあります。)
    記事本文は一律で16pxが指定されているようです。

    /*スライドのタイトル*/
    .slide-text-title {
        font-size: 3vw;
    }
    
    /*スライドの文章*/
    .slide-text-caption {
        font-size: 10px;
    }
    
    /*スライドのボタン*/
    .slide .btn-ghost {
        font-size: 1.3vw;
    }

    上記コードを「外観」→「カスタマイズ」→「追加CSS」 に 追記し、
    その値を納得がいくまで変更してみてください。

    vwはデバイスの幅の何%かを示す値で、デバイスの幅に応じて値が変化していくものです。
    詳しくは下記ページを熟読してみてください。
    https://dev.classmethod.jp/ria/html5/css-length-viewport/

    #19435

    gundam
    参加者

    おはようございます。
    すみませんでした。
    うまく回答ができずに・・・。

    上記のCSSで、納得いく大きさに調整したいと思います。

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

    #19438

    RICK
    参加者

    先述のコードはあくまで「外観」→「カスタマイズ」→「追加CSS」用のコードです。
    (↑インラインCSSなので優先度が !important の次に高いです。)

    最終的に子テーマの style.css に記述する場合は下記のようにしてください。
    (↑優先度負けを回避するためです。)

    /*スライドのタイトル*/
    .slide-text-set .slide-text-title {
        font-size: 3vw;
    }
    
    /*スライドの文章*/
    .slide-text-set .slide-text-caption {
        font-size: 10px;
    }
    
    /*スライドのボタン*/
    .slide-text-set .slide .btn-ghost {
        font-size: 1.3vw;
    }
    #19439

    gundam
    参加者

    ありがとうございます。
    ご丁寧に。
    子テーマCSSでやってみたいと思います。
    本当にありがとうございました。

9件の投稿を表示中 - 1 - 9件目 (全9件中)

このトピックに返信するにはログインが必要です。