固定ページ内のカバー画像・段落内テキストがモバイル表示時のみ大きすぎる

VWSとは フォーラム Lightning 固定ページ内のカバー画像・段落内テキストがモバイル表示時のみ大きすぎる

固定ページ内のカバー画像・段落内テキストがモバイル表示時のみ大きすぎる

  • このトピックには7件の返信、3人の参加者があり、最後に中村誠により2年、 7ヶ月前に更新されました。
8件の投稿を表示中 - 1 - 8件目 (全8件中)
  • 投稿者
    投稿
  • #54514

    中村誠
    参加者

    ■ 利用テーマとバージョン :Lightning Proバージョン: 8.11.0

    ■ 質問内容:固定ページ内上部のカバー画像・段落内テキストですが、PC表示では問題なく表示されますが、モバイルで表示するとカバー画像・段落内テキストの表示が両方とも大きすぎてしまいます。

    具体的な希望サイズは特にないのですが、比較的簡単に最適化できる方法はありますでしょうか。


    該当URL : https://*********

    ※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます

    #54540

    モバイルで表示するとカバー画像・段落内テキストの表示が両方とも大きすぎてしまいます。

    カバーブロックについて以下のようにするのがよいと思います。

    1. フォントサイズを小さくする
    現在設定されている 60px が大き過ぎるので、小さくした方がいいと思います。
    単位は px より EM の方がわずかですがメリットがあります。(スマホでフォントがちょっと小さめになるみたいです)

    2. 画像を作り直す
    女性の手元まで画像に含めようとすると、バランス的にフォントサイズを大きくしたくなります。
    ヘッドセットだけでもオンラインミーティングの雰囲気が伝わるので、肩から上だけの画像にすればフォントサイズを小さくしてもバランスが悪くならないと思います。

    3. 焦点ピッカーを使う
    焦点ピッカーで女性の顔の位置を指定すれば、どの画面幅の端末でも女性の顔が画面の外に隠れないです。添付画像をご覧ください。

    4. カバー画像の最小の高さを小さくする
    いま、1132px になっていますが、2. で画像を作り直したら、半分くらいの高さにすればでよいのではないかと思います。添付画像をご覧ください。

    Attachments:
    You must be logged in to view attached files.
    #54550

    中村誠
    参加者

    詳細な解説、どうもありがとうございます。

    ご教示いただいた設定をやってみたのですが、PC表示時の見た目も変わってしまいました。
    PC表示時は今の設定をなるべく変えたくはないので、PC表示は今の設定を保ちつつモバイル時の設定だけを変えることは可能でしょうか。

    また、トップページのPC表示時も、Web商談のPC表示時と同じような見た目にしてありますが、トップページだけモバイル表示時もサイズが自動的に最適化されています。
    この自動最適化はトップページだけにしかできないのでしょうか。

    #54551

    細かいカスタマイズは下記など参照してみてください。

    できる!CSSカスタマイズ

    #54552

    この自動最適化はトップページだけにしかできないのでしょうか。

    トップページのスライドショーはそのようなしくみを持っていますが、Web商談ページでお使いのカバーブロックにはその機能がありません。

    トップページのような見た目を実現するためには、以下のページを参考に CSS でカスタマイズする必要があると思います。

    できる!WordPressカスタマイズ #01 簡単なデザイン(CSS)カスタマイズ方法徹底解説

    【追記】
    ゆっくり書いてたら回答が石川さんと被ってしまいましたが、石川さんが提示されたのが最新の教材ですので、そちらをご利用になった方がよいのではないかと思います。

    • この返信は2年、 7ヶ月前に対馬 俊彦が編集しました。
    #54555

    中村誠
    参加者

    カバーブロックにはその機能が無いとの事で、承知しました。

    お教えいただいたCSSカスタマイズ方法を参照したいと思います、どうもありがとうございました。

    #54556

    カバー画像内の文字サイズを px ではなく rem 指定にしてみてください。
    モバイルの時は少し小さくなると思います。

    #54582

    中村誠
    参加者

    remにしましたら、モバイル時も少し体裁が良くなりました。
    大変ありがとうございました。

8件の投稿を表示中 - 1 - 8件目 (全8件中)
  • このトピックに返信するにはログインが必要です。