MENU

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

top

もくじ

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

具体的にどんな現象か、というと… たとえばこのように書いた文章。
私はブログに出会い、ストレスと時間に追われる生活から、
完全に自由なライフスタイルに変わりました。
PC/スマホそれぞれで見てみると… PCで見るとちょうど良い位置で改行されてて読みやすいんですが、 スマホで見ると文章の途中で改行されててめっちゃ読みづらいww こんなことありますよね。 スマホで表示する時はPCの改行を反映させないようにしたい! という場合は次の方法で解決できます。

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

こちらのコードをCSSに追記してみてください。
@media only screen and (max-width: 767px) {
	br {
            display: none; }
	}
brというのは改行タグのことですね。 『スマホの場合に改行タグを無視する』という指定をしています。 するとこんな感じで、改行が無視され 変な位置で文章が途切れることがなくなりました♪ ちなみに上記のコードですとすべてのページの 改行タグが無視されることになります。 予期せぬところの改行も無視される可能性もあるので、 できたらご自身が使われているテーマの、 『記事投稿ページの本文のクラス』を確認して、 それを指定するようにしてください。 たとえばこのテーマだと記事本文は.entry-content というクラスですので、その場合は
.entry-content br {
 display: none;
 }
と記載します。 最近はほとんどのテーマがレスポンシブ対応で、 わざわざこのような追記をしなくても 元からスマホでは改行が無視される設定になっている場合が多いです。 そうじゃない場合はぜひこちらを参考にされてください! それでは♪]]>

記事をシェア