WordPressの改行がスマホだとズレてしまう場合の解決方法

PCでWordPressの記事を書いていると、
大体の方は読みやすいところで改行されていますよね。

でも良かれと思ってしたこの「改行」が、
スマホで見たときには変な位置での改行になっていて、
とっても読みづらい文章になっていたりします。

今回はその解決方法についてお伝えします。

PCとスマホで改行位置がズレる！

具体的にどんな現象か、というと…

たとえばこのように書いた文章。

私はブログに出会い、ストレスと時間に追われる生活から、
完全に自由なライフスタイルに変わりました。

PC/スマホそれぞれで見てみると…

PCで見るとちょうど良い位置で改行されてて読みやすいんですが、
スマホで見ると文章の途中で改行されててめっちゃ読みづらいｗｗ

こんなことありますよね。

スマホで表示する時はPCの改行を反映させないようにしたい！

という場合は次の方法で解決できます。

CSSにコードを追記して解決！

こちらのコードをCSSに追記してみてください。

@media only screen and (max-width: 767px) {
	br { 
            display: none; }
	}

brというのは改行タグのことですね。

『スマホの場合に改行タグを無視する』という指定をしています。

するとこんな感じで、改行が無視され
変な位置で文章が途切れることがなくなりました♪

ちなみに上記のコードですとすべてのページの
改行タグが無視されることになります。

予期せぬところの改行も無視される可能性もあるので、
できたらご自身が使われているテーマの、
『記事投稿ページの本文のクラス』を確認して、
それを指定するようにしてください。

たとえばこのテーマだと記事本文は.entry-content
というクラスですので、その場合は

.entry-content br {
 display: none;
 }

と記載します。

最近はほとんどのテーマがレスポンシブ対応で、
わざわざこのような追記をしなくても
元からスマホでは改行が無視される設定になっている場合が多いです。

そうじゃない場合はぜひこちらを参考にされてください！

それでは♪

自由な働き方を叶えたいあなたへ