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

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

先日、サイト名を「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で表示状態をチェックしてみましょう。

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

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

最新式の無料プラグインを事前公開

WordPressは公式サイトに登録済みのプラグインだけで全機能を補足しきれません。当サイトでは使いやすさを追求した魅惑的なプラグインを無料でダウンロードいただけます。運営ホームページのマーケティング力をさらに高めるチャンスです。まずは無料でDLしてお試しくださいませ。
改良されたプラグインを確認する

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

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

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

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

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

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

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

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

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

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

当サイトではワードプレスのテーマ導入に関する設置相談も承っております。検索エンジン向けの設定が充実しておりとても使いやすいテーマなので初心者にもおすすめです。購入手順もまとめているのでまずは緑色のボタンを押して申し込みまでの流れをご確認くださいませ。

最新式の無料プラグインを事前公開

WordPressは公式サイトに登録済みのプラグインだけで全機能を補足しきれません。当サイトでは使いやすさを追求した魅惑的なプラグインを無料でダウンロードいただけます。運営ホームページのマーケティング力をさらに高めるチャンスです。まずは無料でDLしてお試しくださいませ。
改良されたプラグインを確認する

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

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

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

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

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

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

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


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