固定ページ内のカバー画像・段落内テキストがモバイル表示時のみ大きすぎる
固定ページ内のカバー画像・段落内テキストがモバイル表示時のみ大きすぎる
- このトピックには7件の返信、3人の参加者があり、最後に
により3年、 3ヶ月前に更新されました。
-
投稿
-
■ 利用テーマとバージョン :Lightning Proバージョン: 8.11.0
■ 質問内容：固定ページ内上部のカバー画像・段落内テキストですが、PC表示では問題なく表示されますが、モバイルで表示するとカバー画像・段落内テキストの表示が両方とも大きすぎてしまいます。
具体的な希望サイズは特にないのですが、比較的簡単に最適化できる方法はありますでしょうか。
該当URL : https://*********※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます
モバイルで表示するとカバー画像・段落内テキストの表示が両方とも大きすぎてしまいます。
カバーブロックについて以下のようにするのがよいと思います。
1. フォントサイズを小さくする
現在設定されている 60px が大き過ぎるので、小さくした方がいいと思います。
単位は px より EM の方がわずかですがメリットがあります。(スマホでフォントがちょっと小さめになるみたいです)2. 画像を作り直す
女性の手元まで画像に含めようとすると、バランス的にフォントサイズを大きくしたくなります。
ヘッドセットだけでもオンラインミーティングの雰囲気が伝わるので、肩から上だけの画像にすればフォントサイズを小さくしてもバランスが悪くならないと思います。3. 焦点ピッカーを使う
焦点ピッカーで女性の顔の位置を指定すれば、どの画面幅の端末でも女性の顔が画面の外に隠れないです。添付画像をご覧ください。4. カバー画像の最小の高さを小さくする
いま、1132px になっていますが、2. で画像を作り直したら、半分くらいの高さにすればでよいのではないかと思います。添付画像をご覧ください。詳細な解説、どうもありがとうございます。
ご教示いただいた設定をやってみたのですが、PC表示時の見た目も変わってしまいました。
PC表示時は今の設定をなるべく変えたくはないので、PC表示は今の設定を保ちつつモバイル時の設定だけを変えることは可能でしょうか。また、トップページのPC表示時も、Web商談のPC表示時と同じような見た目にしてありますが、トップページだけモバイル表示時もサイズが自動的に最適化されています。
この自動最適化はトップページだけにしかできないのでしょうか。細かいカスタマイズは下記など参照してみてください。
この自動最適化はトップページだけにしかできないのでしょうか。
トップページのスライドショーはそのようなしくみを持っていますが、Web商談ページでお使いのカバーブロックにはその機能がありません。
トップページのような見た目を実現するためには、以下のページを参考に CSS でカスタマイズする必要があると思います。
【追記】
ゆっくり書いてたら回答が石川さんと被ってしまいましたが、石川さんが提示されたのが最新の教材ですので、そちらをご利用になった方がよいのではないかと思います。カバー画像内の文字サイズを px ではなく rem 指定にしてみてください。
モバイルの時は少し小さくなると思います。
- このトピックに返信するにはログインが必要です。
