loading
 読み込み中...
ウェブの触手-日々の生活に新たなスパイスを-
Home > [ウェブデザイン] > 【CSS】PC上で見やすく改行した文章がスマホでは変な位置で改行されてしまうのを自動修正する方法
この記事は約2分で読めます。
この記事は最終更新日から2年以上経過しているため現状にそぐわない可能性もあります。

【CSS】PC上で見やすく改行した文章がスマホでは変な位置で改行されてしまうのを自動修正する方法

投稿日:2014.9.20

レスポンシブウェブデザイン対応のテンプレートは今では当たり前のようになって、
ほぼどの有料テンプレートも標準装備としてリリースしているようです。

このレスポンシブデザイン、とても便利なんですが
ちょっとだけ使いにくいところがあるんです。

スポンサーリンク

改行位置で迷う?

それが改行(<br />)の位置。

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

メルマガなんかはやり過ぎだろうというぐらい短い文節で改行してくることもありますが、
そこまでいかなくても、ある程度長くなったら
適当な文節終わりで改行する方のほうが多いことと思います。
(当ブログも割とひんぱんに”改行”してます)

でもそれって PC上での見た目で改行場所を判断してるんじゃないですか?

これが”幅固定”のサイトやスマホ上でも PCと同じように表示されるサイトなら
特に問題はありません。

でもレスポンシブデザイン対応サイトの場合、
見てる機器によっては表示幅が可変します。

そこで発生する問題が
PC上ではきれいに改行されていたのにスマホ上では変な位置で改行されてしまって、
逆に見にくくなってしまうというものです。

こんな↓感じです。

イメージ画像

 

これまでは”仕方ない”と思ってほっといたんですが、
ついこないだ、いとも簡単に解決する方法をネットで見つけました。

CSS に下記を指定するだけです。

割と前からあったやり方のようで、
意味合いとしては『”改行”を非表示にする(改行を無効にする)』みたいな感じでしょうか。

なお、上の書き方は汎用的な書き方になります。

”max-width: 480px”は使っているテンプレートに左右されるので適当に変更してください。
(よくあるのが 480px とか 640px で、これらの数値をあてはめておけば『スマホ仕様』となるでしょう)

またサイト全体ではなく投稿記事だけに適用させたいのであれば、
クラス名を指定して限定的にすることもできます。

例えば投稿本文が仮に『entry-content』というクラス名でくくられていたとしたら、

とか、
body class がついていて仮に body.single-post だったとしたら、

という指定もできます。

 

結果、こんなふうにきれいに整形されて表示されます。

キャプチャイメージ画像

以上です。

記事はお役にたてましたか?

記事にご興味をもっていただけましたら
下のソーシャルボタンで共有していただけると嬉しいです^^

 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

スポンサーリンク

おススメTCDテーマ

WordPressテーマ「FOCUS (TCD030)」

コメント(0件)

コメントをどうぞ

入力いただいたメールアドレスは公開されません。
個人情報などを記入された場合、投稿いただいたコメントの該当箇所を編集して公開するか、もしくは非公開にします。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

先頭へ