モバイル表示 トップ画像の文字の大きさ

質問一覧対象テーマ: Landscapeモバイル表示 トップ画像の文字の大きさ
MaimaixMaimaix asked 5年 前

Landscapeを利用していますが、 モバイル表示にした際、トップの文字がかなり大きい&白枠が切れてしまいます。 対処法を教えてください。   また、画像サイズはpcのように自動でトリミングされないんですかね?自分でトリミングしないと、大きさにかなりのズレが出てしまうということでしょうか? スライドを3枚にしたい場合のHTMLの書き方も教えていただきたいです。   よろしくお願いします。   サイトは https://maisonmarble.official.ec です。

1 Answers
baseadminBaseDesignInfo Staff answered 5年 前

ご質問ありがとうございます。

トップ画像、モバイルでの表示ですがスマホ縦表示では意図的に文字を大きくしています。またスマホ縦は文字を最重要とし、装飾枠があるかどうかでは変わらないようになっています。そのため白枠を設定した際には四角ではなく上下線のデザインのようになります。

個々の好みによるカスタマイズはHTML編集によって自由にできますので、一度お試しください。
今回の、スマホ時の文字サイズを小さくする場合、

@media only screen and (max-width: 480px){
.hero h2 { font-size: 3em; }
}

などを追加してみてください。初期値が「4em」なので、3や3.5などにしてみると良いかもしれません。

(独自のCSSを追加する方法についてはごく一般的なものですのでここでは省略し、分かりやすく解説されているサイトをいくつか紹介させていただきます。
http://css.uka-p.com/basic/header.html
https://techacademy.jp/magazine/4872


このフォントサイズ調整機能について、ご意見として今後の改善として検討しますね。

> スライドを3つにしていただけると嬉しいです!

HTML編集すれば無限に増やすことは可能ですので、一度お試しください。
https://basedesign.info/landscape/customize.html