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

サイト作成時にさんざん苦しめられたのでWordPressの自動整形について整理しておきたいと思います。

まずは「消える改行」について

なおWordPress(v3.7.1)は自動整形に関するプラグインは使っていない状態で、テーマはTwentyTwelve、ブラウザはFirefoxを使用しています。

スポンサーリンク

Shift+Enterでの改行

WordPressを使い始めるときに最初に覚えるのが「Shift+Enter」と「Enter」という改行。

まずは「Shift+Enter」から。

文末でShift+Enterを2回行うと、

automatic_formatting_30c

このように1行分改行をが追加されます。
これをテキストモードで見ると、

automatic_formatting_31b

当たり前ですが変化はありません。
ビジュアルモード←→テキストモードと何度切り替えても変わりません。
※「HTMLモード」という名称は最近のバージョンで「テキストモード」に変わっています。

これを公開するとこうなります。

automatic_formatting_32b

このページのソースを見てみると、

automatic_formatting_33b

Pタグで囲まれた箇所が2つあります。
スペースのある改行はPタグで段落を分けることにより作られていることが分かります。

Shift+Enterの連続改行

連続改行をするとどうなるでしょうか?

automatic_formatting_34c

これを公開ページで見ると

automatic_formatting_35b

スペースが1行分しかありません。
ここでビジュアルモードと公開ページで見栄えの違いがでました。

ソースを見てみると、

automatic_formatting_36b

1回Shift+Enterで改行した場合と同じです。
Pタグを分けることでスペースのある改行を作っているため、その間の空改行は無視されるようです。

テキストモードで見てみると

automatic_formatting_37b

確かにスペースは3行分あります。

さらにビジュアルモードに戻ってみると、

automatic_formatting_38b

スペースが3行分から1行分に自動整形されました。

そもそもBRタグや空タグを使った連続改行は作法上よくないとされており、大きなスペースを作るのであればCSSでmarginやpaddingを使うことが推奨されています。
このことから自動整形されてしまうのはやむを得ないのかもしれません。

DIVタグ内のShift+Enter(その1)

先日作ったサイトで画像とテキストの位置ズレが治らず、苦し紛れにテキストをDIVで囲って対応しました。

ここでも自動整形の問題が発生しました。

テキストモードで以下のようにDIVタグを加えます。

automatic_formatting_39b

これをプレビューもしくは公開ページで確認すると、

automatic_formatting_40b

特に問題ありません。
これで「プレビュー確認済み、問題なし」として次の作業に移りますが・・・

ところがソースをよくよく見てみるとおかしな箇所があります。

automatic_formatting_43b

なぜか開始のPタグが抜け落ちているのです。
終了のPタグは赤く表示され、文法上間違っていることを指摘しています。

ここでビジュアルモードを見てみると、

automatic_formatting_41b

おかしな表示になりました。
スペースのある改行がなくなり、前半の行の間隔が狭くなっています。

次にテキストモードに戻ってみると、

automatic_formatting_42b

今度はスペースのある改行の箇所でテキストが結合しています。

さらにさらにビジュアルモードに戻ると、

automatic_formatting_44b

テキストモード同様に改行があった箇所でテキストが結合しています。
すなわちテキストモードで作成しプレビューで問題がないことを確認した記事でも、ビジュアル→テキスト→ビジュアルとモードを切り替えるたびにテキストの構成が変化してしまうことがあるということです。

完成したページのレイアウトがいつの間にか崩れているのはこういうことなんですね。

これはたまりません。

DIVタグ内のShift+Enter(その2)

ではちょっと工夫をしてみましょう。

テキストの前後に改行を追加しました。

automatic_formatting_45b

これを公開ページで見てみると、

automatic_formatting_46b

こちらも問題はありません。

先ほどは開始のPタグが抜けていたソースを見てみると、

automatic_formatting_47b

開始のPタグが復活しています。

automatic_formatting_48b

ビジュアルモードにしても問題なし。

automatic_formatting_49b

もう一度テキストモードに戻っても問題なし。

どうやらテキストモード作成した記事にPタグを正しく認識させるには、テキストの前後に空改行をいれる必要があるようです。

どうしたら良いか

まずは「Shift+Enterの改行」を見てきましたが、いきなり頭のイタイ内容になりました。

自動整形に特定のルールがあり、それさえ守っていればレイアウト崩れは起こさないというオチを期待していましたが、なかなか厳しいようです。
作った記事がどのように変換されて公開ソースになるかまで考えないとレイアウトが崩れてしまうというのはエディタとしてはどうなのでしょうか。

最終結論は気になる自動整形を全て確認してからにしますがちょっと気が重い結果となりました。

次回は「Enterによる改行」を予定しています。

※2013/12/17:一部画像内のコメントに間違いがありましたので訂正しました。


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

コメントをどうぞ

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

CAPTCHA