先日、サイト名を「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以上の端末ではスルーされますので影響を与えません。
では管理画面からCSSを追記していきましょう。管理画面の「外観 > カスタマイズ」をクリック。
次に「追加CSS」を開きます。
そして、最下部へ上記CSSを追記。
入力が完了したら上部にある「公開」ボタンをクリック。
そして、最後に「×」マークをクリックして終了です。
ではiPhoneSEで表示状態をチェックしてみましょう。
無事、サイトタイトルが回り込まらなくなりました。また、１つ目の記事に表示されているタイトル箇所もファーストビューで３行目まで視認できる状態に改善されていますね。
もし文字量が長くなってサイト名が折り返してしまっていた場合はぜひ一度お試しくださいませ。
最新式の無料プラグインを事前公開
WordPressは公式サイトに登録済みのプラグインだけで全機能を補足しきれません。当サイトでは使いやすさを追求した魅惑的なプラグインを無料でダウンロードいただけます。運営ホームページのマーケティング力をさらに高めるチャンスです。まずは無料でDLしてお試しくださいませ。
→ 改良されたプラグインを確認する
