【WP/CSS】PCで作成した投稿がスマホで変な位置で改行されてしまう

投稿をスマホで見ると改行位置が気持ち悪い

このブログは、もちろんレスポンシブウェブデザイン対応のテンプレートを使っています。

ちなみに、LION BLOG 様のテンプレートを使わせて頂いています。
まだ、しっかりドキュメントを見ていない点は申し訳なく思います。。。

ブログを開設して2日目の「wordpressのカスタマイズ?」という記事で触れましたが、
PCで作成した記事をスマホで見ると、改行が想定していない位置で反映され、
ガタガタな表示となっていて、課題として認識していました。

他のサイト様(ヨッセンス)に良い画像があったのですが、こんな感じです。

改行位置の問題なのか?

HTML的に表現すると、改行(/ br)の位置が問題となっているはず。

ブログを書くとき、長い文章をそのまま落とし込みますか?
それとも見やすいように適当な場所で改行を入れますか?

私は後者で、適当な位置で改行を入れて、文章を作っていました。
それをPCのブラウザで見て、確認していたのです。

ただ、レスポンシブデザイン対応サイトの場合、PC、スマホ、タブレットなど
記事にアクセスする機器に寄って、表示幅が可変してしまうので、
上記の絵のようにガタガタな表示となってしまっていたのです。

つまり、PC上ではきれいに改行されていたのにも関わらず、
スマホ上では変な位置で改行されてしまって、逆に見辛くなっていたのです。

で、どうすれば解決するのか?

悩ましい課題でしたが、調べてみたら、簡単に治すことができました。
CSSで下記のコードを加えるだけでした。
LION BLOGのテンプレートの場合は、下記の場所です。
「ダッシュボード」 – 「外観」 – 「カスタマイズ」 – 「追加CSS」

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

ちなみに上記の場所だと、全ページの改行タグが
無視されることになります。
なお、max-widthは、要素の幅の最大値を指定する際に使用します。
* IE6はmax-widthプロパティに対応していないようです。
必要な箇所のみに指定したい場合は、CSSのクラス指定が必要かも。

display:none と visibility:hiddenの違いについては、
リンク先のサイトで説明されていました。

とりあえず、こちらの対策で様子を見てみます。