ワードプレスでPCとスマホで改行の変なズレを無くす

この記事の最終更新日は 2017年11月17日 です。現在は状況が異なる場合がありますので予めご了承ください

カエテンWPなら、PCとスマホの両方とも、
記事が読みやすく体裁も良い【改行】がされた記事が作れます。

まず、ワードプレスの改行と段落の扱いは次のようになっています。

ビジュアルモードの場合

ビジュアルモードでは は表示されませんが、
実際のHTMLソースには が自動挿入されます。

例えば、次の文章ですが、

PCでは良い位置で改行されています。

私がアフィリを始めた頃の教材は
アフィリエイトの手順をまとめただけでキーワード選定のことは
ほとんど解説されていないものが多かったです。

ですが、スマホで見てみると、

●一般的なワードプレステーマの場合

改行位置がガタガタになってしまいます。
PCとスマホで画面横幅サイズが違うので、
当たり前と言えば当たり前の話です。

●カエテンWPの場合

画面横幅799px以下のデバイスでは を
反映しないようにしていますので、
改行が無くなり1つの段落で表示されます。

PCとスマホの両方とも体裁よく改行するのはまず不可能です

PCとスマホの両方とも、
変にならない位置で改行をするのは、まず不可能です。

また、スマホでの改行を主にすると、
PCでは1行が短すぎて、逆に読み辛くなり、体裁も良くはありません。

ですので、カエテンWPでは、
画面横幅799px以下のデバイスでは を反映しないようにして、
PCとスマホの両方とも、記事が読みやすく、体裁も良くなるようにしています。

段落下の余白は結構不便

一般的なワードプレステーマの場合、
段落（~）の下に自動で余白が空き、何となく1~2行空いた形になりますので、
段落の後に、余白を空けずに、画像やリストタグを入れることができません。

記事投稿後に、実際の記事を見ると、
思いもよらない所に余白が空いてしまい、「あれっ？」と思うことが、よくありませんか？

ですので、カエテンWPでは、
自分の意志で1行空けることができるように、段落の下に余白が空かない仕様にしています。

ビジュアルモードで1行空けるときはEnterを2回入力いただく形になります。
HTMLには が自動挿入されます。

既存サイトをカエテンWPに変更する場合

上記の理由から、既存サイトをカエテンWPに変更した場合は、
記事の段落間の余白が無くなり読み辛くなる場合があります。

ですので、次の記述を入れることをマニュアルで説明してます。
次の記述を入れることで一般的なテーマと同じになります。

.article-body p{margin:0 0 20px 0;}#container br{display:block;}

ですが、今まであまり気づかなかったと思いますが、一般的なテーマでは、
スマホでの改行位置がガタガタで、もしかしたら、
とても読み辛い記事になっているかも知れません。

だからといって、全記事を修正するのは大変でしょうから、
既存サイトは、上記の記述を入れることを、マニュアルで説明しています。

新規サイトでは、カエテンWPの改行・段落のルールで記事を作成していただき、
PCとスマホの両方とも、記事が読みやすく、体裁が良いサイトを作っていただければと思います。