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

[gundam]

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

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

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

こちらは、仕様ですか？

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

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

[DRILL LANCER]

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

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

[gundam]

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

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

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

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

[DRILL LANCER]

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

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

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

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

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

[gundam]

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

[DRILL LANCER]

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

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

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

タイトルの部分はは部分部分で大きさが異なるのでなんとも言えませんが、
（上記質問をした意図はここにあります。）
記事本文は一律で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/

[gundam]

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

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

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

[DRILL LANCER]

先述のコードはあくまで「外観」→「カスタマイズ」→「追加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;
}

[gundam]

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

[投稿者]

投稿