こんにちは。とまりです。
今回は、
PCで工夫した設定した改行が、
スマホ表示でおかしくなった時の対処法
についてお伝えします。
対処法としては、
CSSにコードを追記して、
スマホ表示の時のみ改行をなくす
ことが解決策となります。
スマホでのブログの表示が気になっていた方、
記事を読んでぜひ設定してみてくださいね。
WordPressスマホ表示の改行がおかしい・・・涙
WordPressでブログを作成する際、
少しでも読みやすいように改行を工夫しますよね。
一生懸命書いた記事をPCでしっかりと確認し、いよいよ「公開」！
やれやれと思って、スマホ表示を確認すると・・・、
PCの時はバッチリだった改行位置が、
微妙な位置で改行されて、
読みにくくなってしまっていることがありませんか？
例えばこんな感じ。
【PC】
さて、メールの使い分けを考えたメールアドレスの取得で、
かなり楽になったのではないかと思いますが、
始めにもう少し意識すべきことがあります。
【スマホ】
さて、メールの使い分けを考えたメールア
ドレスの取得で、
かなり楽になったのではないかと思います
が、
始めにもう少し意識すべきことがありま
す。
PCでの表示は綺麗に収まっていたのに、
スマホ表示にした途端、変な位置で改行されているのが分かりますか？
読みにくくて気になりますよね・・・。
追加CSSにコードを追記して修正する
では、早速修正してみましょう！
下記コードを、追加CSSに追記してください。
（CSSに追記する際は、念のためバックアップを取ってくださいね）
@media only screen and (max-width: 767px) {
br {
display: none; }
}
意味としては「スマホの場合は改行を無視する」です。
《補足：コードの意味》
各モバイルでサイズを決める場合の基準があります。
- タブレット(iPad) 768px
- スマホ横480px・568pxなど
- スマホ縦320px・360pxなど
です。この基準をもとに、コードが書かれていて、
@media only screen and (max-width: 767px)
は、
max-width: 767pxとなっているので、
タブレットのサイズ768pxに満たない
＝タブレットではなくなった場合
＝スマホの場合
という意味になるんです。
スマホ表示の改行が無視され、見やすくなりました。
追加CSSに追記して「公開」した後、
スマホ表示を確認したところ、下記のように表示されていました。
中途半端な改行がなくなり、とても見やすくなりました＾＾
＜修正前＞
さて、メールの使い分けを考えたメールア
ドレスの取得で、
かなり楽になったのではないかと思います
が、
始めにもう少し意識すべきことがありま
す。
＜修正後＞
さて、メールの使い分けを考えたメールアド
レスの取得で、かなり楽になったのではない
かと思いますが、始めにもう少し意識すべき
ことがあります。
※注意
ブロックを使用していない「Shift＋Enter」の改行を使用していると、
スマホ表示は一行になってしまうので、ご注意ください！
例えばこんな感じに。
①ブロックを使用していない②改行は③一行に見えてしまいます
リストのような見せ方にしたい時は、
必ずブロックで改行するか「リスト」を使いましょう！
WordPressスマホ表示の改行は修正できる：まとめ
PCで読みやすさを考えて適度に改行をいれて書いた記事も、
「スマホ表示の改行がおかしい」と感じることがあるかもしれません。
でも、
CSSの追記
で、スマホ表示の際は改行を無くすことで修正することが可能です！
中途半端な改行がなくなり、とても見やすくなります。
コードの追記で簡単に修正出来るので、
気になる方はぜひ試してみてくださいね＾＾
