賢威８限定！iPhoneSE等のスマートフォンでサイト名が折り返してしまった際に改行をなくす方法

先日、サイト名を「WP研究室」から「WPホームページ研究所」へ置き換えたら手持ちのiPhoneSEで「サイト名」が折り返されてしまいました。

上記の通り、研究室の「室」が下側へ回り込んでしまっています。また、その影響からファーストビューの範囲も狭くなっているのが確認できます。このままだと閲覧者に読んで欲しい記事があっても「ワードプレスでサイト名を変更後」までしか見えませんので機会を逃してしまいかねませんよね。

そこで本日はこの回り込みを解決していきましょう。

ちなみにiPhoneSEや5系は解像度が640pxとなります。そこで解像度640px以下の端末にのみサイト名のフォントサイズをCSSで一回り下げて回り込みを防ぎたいと思います。

iPhoneSE等のスマートフォンでサイト名が折り返した際に改行をなくす方法

まずは、サイト名にかかっているCSSを確認していきましょう。サイト名の上で右クリックをして「検証」から「デベロッパー（開発者）モード」へ切り替えてCSSチェック。

デベロッパーモードが立ち上がったら「Elements」タブからhtmlの状況を確認していきましょう。htmlとCSSのソースを見ると、h1タグに「site-title」というclassが指定されていました。

では実際にブラウザの表示幅を縮めていって『解像度640px以下』になった時に「h1.site-title」にどういったCSSがかかっているのかをチェックしていきましょう。

640pxになった時点でのCSSは以下が適用されていました。

font-sizeに適用されている値が「2.3rem」なので「2.2rem」で上書きすれば解決できそうです。そこで解像度640px以下の時にだけCSSを上書き処理するスタイルシートを準備いたしました。

なお、下層ページ以降では「.site-title」が付与されているタグがh1からpへ変更されていましたので両方に適用されるよう作成しています↓

@media screen and (max-width: 640px) {
	h1.site-title,
	p.site-title	{
		font-size: 2.2rem;
	}
}

上記の書き方はmax-widthで指定しているため最大値640pxまでに適用されるCSSとして動きます。このようにCSSを書いておけば解像度が641px以上の端末ではスルーされますので影響を与えません。

- 新コースでワードプレスを学ぶ【AD】-

では管理画面からCSSを追記していきましょう。管理画面の「外観 > カスタマイズ」をクリック。

次に「追加CSS」を開きます。

そして、最下部へ上記CSSを追記。

入力が完了したら上部にある「公開」ボタンをクリック。

そして、最後に「×」マークをクリックして終了です。

ではiPhoneSEで表示状態をチェックしてみましょう。

無事、サイトタイトルが回り込まらなくなりました。また、１つ目の記事に表示されているタイトル箇所もファーストビューで３行目まで視認できる状態に改善されていますね。

もし文字量が長くなってサイト名が折り返してしまっていた場合はぜひ一度お試しくださいませ。