メインタイトルのサイズ調整

質問一覧Category: Landscapeメインタイトルのサイズ調整
Egkegk asked 4日 ago

メインタイトルに全角文字を使用しています。
6文字
7文字
7文字
の構成です。

スマホでの表示が、画面幅に合わせて3文字で改行されてしまいます。
幅比に合わせて文字サイズを調整する手段はありますか?

また、文字サイズを小さくする方法がありましたら教えてください。

https://sgh.base.shop/
メイン画像2です。

BaseDesignInfoBaseDesignInfo Staff replied 4日 ago

ご相談ありがとうございます。

英語の場合は単語の途中では改行されないのですが、日本語の場合は難しいですね。

方法としては、スマホ縦サイズ(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というのは自動改行をしないようにする指定です。

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

BaseDesignInfoBaseDesignInfo Staff replied 4日 ago

HTMLの中にCSSを記述する方法というのはごく一般的なものですので分かりやすく解説されているサイトをいくつか紹介させていただきます。
http://css.uka-p.com/basic/header.html
https://techacademy.jp/magazine/4872