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

ワードプレステーマ - カエテンジョイ
この記事は約 3 分で読めます ( 約 1477 文字 )

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

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

 

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

 

ビジュアルモードの場合

区切り 入力キー 挿入される実際のHTMLソース
改行 Shift + Enter <br />
段落 Enter <p>◯◯◯</p>

 

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

 

 

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

 

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

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

 

 

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

 

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

x_20160729-01

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

 

●カエテンWPの場合

x_20160729-02

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

 

 

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

 

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

 

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

 

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

 

 

段落下の余白は結構不便

 

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

 

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

 

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

 

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

 

 

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

 

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

 

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

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

 

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

 

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

 

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

 

wp-jpy

 

記事タイトルとURLをコピーする
関連記事
  • コメント
  • トラックバック
コメント
コメント投稿

コメント ( 必須 )

お名前 ( 必須 )

メールアドレス ※公開されません ( 必須 )

サイトアドレス ( 必須 )

トラックバック
トラックバックURL