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

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

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

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

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

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

国内最大級の広告サービスでエンジニア職

⇒ 今すぐ募集内容をチェック - 株式会社ファンコミュニケーションズ【AD】 -

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で表示状態をチェックしてみましょう。

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

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

【今すぐ無料プラグインを手に入れる】
無料ダウンロードはこちら

ワードプレス専門家に丸投げする

WPホームページ研究所はワードプレスを中心としたブログ作成・ホームページ制作・オウンドメディア構築・プラグイン設定・調整など幅広いカスタマイズに対応しております。 記事の掲載情報はもちろんお好みの機能をいただければ専属スタッフが心を込めて対応させていただきます。まずはお気軽にお問い合わせくださいませ。

お問い合わせの種類をお選びください(もっとも近い項目)

法人の場合は法人名とご担当者のお名前をご入力ください

返信時のご連絡に利用するメールアドレスをご入力ください

運営中のウェブサイトURLがあればご入力ください

お困りの内容があれば詳しい内容をお聞かせください

SEOに強い最新版の「賢威」を手に入れる

こんなお悩みはありませんか?

・ワードプレスサイトが検索エンジンにひっかからない
・Googleが推奨するレスポンシブ対応テーマが欲しい
・SEO最適化済みの安心テーマを今すぐに試してみたい

当サイトではワードプレステーマの導入に関する設置相談も承っております。また今なら期間限定で「賢威のカスタマイズ特典」もご用意中。なお、特典の受け取りは紹介リンクからご購入いただいた方のみとなります。特典をお求めの方は事前にお問い合わせフォームからご連絡くださいませ。

【今すぐ無料プラグインを手に入れる】
無料ダウンロードはこちら

ワードプレス専門家に丸投げする

WPホームページ研究所はワードプレスを中心としたブログ作成・ホームページ制作・オウンドメディア構築・プラグイン設定・調整など幅広いカスタマイズに対応しております。 記事の掲載情報はもちろんお好みの機能をいただければ専属スタッフが心を込めて対応させていただきます。まずはお気軽にお問い合わせくださいませ。

国内最大級の広告サービスでエンジニア職

⇒ 今すぐ募集内容をチェック - 株式会社ファンコミュニケーションズ【AD】 -

お問い合わせの種類をお選びください(もっとも近い項目)

法人の場合は法人名とご担当者のお名前をご入力ください

返信時のご連絡に利用するメールアドレスをご入力ください

運営中のウェブサイトURLがあればご入力ください

お困りの内容があれば詳しい内容をお聞かせください


今すぐに最新版の「賢威」を手に入れる