egk asked 5年 前
メインタイトルに全角文字を使用しています。
６文字
７文字
７文字
の構成です。
スマホでの表示が、画面幅に合わせて３文字で改行されてしまいます。
幅比に合わせて文字サイズを調整する手段はありますか？
また、文字サイズを小さくする方法がありましたら教えてください。
https://sgh.base.shop/
メイン画像2です。
メインタイトルのサイズ調整
egk asked 5年 前
egk asked 5年 前
egk asked 5年 前
ご相談ありがとうございます。
英語の場合は単語の途中では改行されないのですが、日本語の場合は難しいですね。
方法としては、スマホ縦サイズ（480px）で文字サイズを小さくし、自動改行されないようにする（brタグを入れた部分以外は改行しない）という指定をすることです。
HTML編集Appで、HTMLヘッダーに次のようなCSSを追加してみてください。
@media only screen and (max-width: 480px) {
.hero h2 { font-size: 2.8em; }
white-space: nowrap;
}
文字サイズはデフォルトで「4em」となっているのを、「2.8em」としていますが、お好みで変更してください。
完全に現状のメインタイトルの状態に合わせたカスタマイズですので、もし今後メインタイトルを変更するのであればそれに合わせた調整が必要だと思います。white-spaceというのは自動改行をしないようにする指定です。
よろしくお願いいたします。
HTMLの中にCSSを記述する方法というのはごく一般的なものですので分かりやすく解説されているサイトをいくつか紹介させていただきます。
http://css.uka-p.com/basic/header.html
https://techacademy.jp/magazine/4872