【WordPress】 自動整形ルールの調査② 消える改行について【Enter編】

「Shift+Enter」に続いては、「Enter」と自動整形について調査をしました。

「Enter」も基本は改行するだけのものですが、ちょっと使い方を間違えると自動整形の餌食になってしまいます。

スポンサーリンク

「Shift+Enter」と「Enter」の違い

普段何気なく使っている改行ですが、どのような違いがあるのでしょうか。

書くまでも無いですが、
「Shift+Enter」:段落を分けないで改行
「Enter」:段落を分けて改行
ですね。

automatic_formatting_50b

公開ページではこのように表示されます。

automatic_formatting_51b

ソースも見てみましょう

automatic_formatting_52b

「Shift+Enter」はBRタグ(改行)に変化しています。
「Enter」は入れた箇所でPタグが閉じられ、段落が分けられているのがわかります。

この「Enter」と同じ変化を前回の記事「Shift+Enter編」でも見ましたね。
そうです「Enter」は「Shift+Enter 2回」と同じ扱いなのです。

確認してみましょう。

automatic_formatting_53b

automatic_formatting_54b

automatic_formatting_55b

automatic_formatting_56b

ソースで見ても全く同じです。
どちらもPタグを分けることで段落を作っています。

「Enter」=「Shift+Enter2回」と考えて良さそうです。

DIVタグ内で「Enter」を使った場合

この場合も前回の「Shift+Enter編」同様にテキスト前後に空改行を入れることで自動整形による乱れを防ぐことが出来ます。

automatic_formatting_57b

こうしておくことでビジュアルモードで「Enter」を使った改行を入れてもレイアウトが崩れることがありません。

automatic_formatting_58b

automatic_formatting_59b

この空改行を入れ忘れると・・・

automatic_formatting_60b

公開ページでは同じように表示されますが、

automatic_formatting_61b

しかし、ソースをみると大きな違いがあります。

automatic_formatting_62b

今までテキストを囲んでいたPタグが全てなくなっています。
すなわちPタグでCSSを設定していた場合、これが効かなくなるということです。

前回学んだ「テキスト前後に空改行を入れると公開した時にPタグで囲まれる」という原則はここでも効いているようです。

さらにこの状態からビジュアルモードで「Enter」による改行を加えてみましょう。

automatic_formatting_63b

なぜか行間距離が詰まっていますが、気にせずに「Enter」を追加すると

automatic_formatting_64b

公開すると段落がなくなっています。

ソースを確認すると、

automatic_formatting_65b

追加したDIVタグの範囲が2つに分けられただけです。

このようにテキストモードで独自にDIVを追加した場合は、テキスト前後に空改行を入れないと意図通りのレイアウトができなくなってしまいます。

注意しましょう。

Enterの連続改行(続けてテキストを書く場合)

「Enter」で連続改行をするとどうなるでしょうか。

automatic_formatting_66b

Enterで2回改行を行い、続けてテキストを書いた場合はテキストモードで見ると変わった表記がでてきます。

automatic_formatting_67b

「 」とはノンブレークスペースという特殊文字です。

これについては以下の記事で詳しく説明していますのでご参照ください。

【WordPress】 記事にspanタグが勝手に挿入される問題

更に連続して「Enter」を押すと「 」は増えていき、大きなスペースがある改行を作ることができます。

automatic_formatting_68b

automatic_formatting_69b

但しこれらは「Enter」に続けてテキストを書いた場合です。

下書きなどで出来たがったテキストに「Enter」で段落を付けたい場合はちょっと注意が必要です。

Enterの連続改行(出来上がったテキストを段落に分ける場合)

記事原稿をテキストエディタなどで作成しておき、まとめてWordPressに流し込む場合は特に注意が必要です。
同じように「Enter」を追加するだけでは自動整形が悪さをしてしまいます。

automatic_formatting_71

automatic_formatting_71c

これをプレビューもしくは公開ページで見てみると、

automatic_formatting_72b

問題ありませんね。
ところがじつは問題大アリなのです。

テキストモードを見てみましょう。

automatic_formatting_73b

「 」の後の空改行が無いですね。

さらにビジュアルモードに切り替えると

automatic_formatting_74b

特に問題ありません。
再度テキストモードに切り替えてみましょう。

automatic_formatting_75b

はい、消えました。

段落に分けたはずなのにいつの間にかテキストが繋がっている現象はこうしておきます。

これは「 」の前後に空改行が無いことで発生しています。

(改行)
&nbsp
(改行)

このようなセットになっていない場合、自動整形で消されてしまうのです。
今回の場合は後ろの空改行がなかったために消されたということです。

さらに連続改行をした場合はどうなるでしょうか。

automatic_formatting_76b

やはり最後の空改行がありません。

これをビジュアルモード→テキストモードに切り替えるとどうなるでしょうか。

automatic_formatting_77b

「 」が一つ消えました。
そして前回の同じように最後の空改行がありません。

嫌な予感しかしませんが、さらにビジュアルモード→テキストモードと切り替えてみましょう。

automatic_formatting_78b

また「 」が消えました。

さら続けていくと、

automatic_formatting_79b

automatic_formatting_80b

とうとう全てなくなってしまいました。

このやり方で段落を追加した場合、作業中にいずれ消えてなくなってしまうことになります。

もしこれに気づかないと、「おかしいな、さっき直したような気が・・・」と思いつつも永遠に作業を繰り返すことになってしまいます。

ではどうしたらいいのでしょうか。

出来上がったテキストに「Enter」で段落を作る方法

以下のようにすると「Enter」で作った段落が消えることがなくなります。

automatic_formatting_81b

「Enter」を2回続けた後、「Del」キーを押します。

automatic_formatting_82b

これでOKです。

テキストモードで見てみましょう。

automatic_formatting_83b

「 」の後の空改行が復活しており、キチンと

(改行)
&nbsp
(改行)

の構成になっています。

この状態ならいくらモードを切り替えても変化することはありません。

連続改行も同様です。

automatic_formatting_84b

何度「Enter」で改行をしても最後に「Del」キーを1回押せばレイアウトが壊れることはありません。

まとめ

いつの間にか段落がつながってしまう問題にさんざん悩まされましたが、その原因がはっきりしました。
私の場合は記事の原稿を別のエディタで作成することが多いため、この問題が発生しやすかったようです。
今後は注意が必要ですね。

出来上がったテキストを「Enter」で段落に分ける場合は、「Enter」→「Enter」→「Del」
これを忘れないようにしないといけませんね。

次回は「BRタグによる改行」について調べていきたいと思います。


スポンサーリンク
  • このエントリーをはてなブックマークに追加

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA