【WordPress】 自動整形ルールの調査④ 消える改行について【クラス指定をしたBRタグ編】

前回「テキストモードでBRタグは追加しない方が良い」と言う結論が出ましたが、クラス指定をすることで自動整形の影響を受けにくくなるという情報もあります。

今回はこれについて調査してみましょう。

スポンサーリンク

クラス指定をしたBRタグを追加するとどうなるか

今回使うタグは以下のとおりです。

automatic_formatting_202b

「hoge」というクラス名を指定していますがCSSでは何も定義していません。
このためクラス名は何でも構いません。

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

automatic_formatting_203b

確かに大きなスペースができています。

これをテキストモードに戻すと自動整形で変化してしまうのでしょうか。
確認してみましょう。

automatic_formatting_204b

特に変化はありません。
自動整形による影響を受けないようです。
これなら使えそうです。

これを公開するとこのように表示されます。

automatic_formatting_205b

改行2回分のスペースができています。
BRタグを1つ追加したつもりだったのですが、どういうことでしょうか。

ソースを見てみましょう。

automatic_formatting_206b

追加したクラス指定があるBRタグの後ろにももう一つBRタグついています。

テキストモードでの改行は公開ページでBRタグに変化します。
このためBRタグ2つ分の改行になったようです。

ではこうするとどうなるでしょうか。

automatic_formatting_207b

公開ページでは、

automatic_formatting_208b

スペースが1行分の改行に変わりました。

ソースをみてみると、

automatic_formatting_209b

追加したBRタグはテキストのすぐ後ろに付いており、その結果BRタグは一つ減っていることになります。
改行が1つ分に減ったのはこのためですね。

ともあれ、このクラスを指定したBRタグは使えそうです。

このタグを連続追加してテキスト間のスペースを自在にコントロールできるかを確認していきましょう。

①BRタグの前後に改行がない場合

クラス指定をしたBRタグを連続追加するとどうなるでしょうか?

automatic_formatting_210b

確認した結果がこちら。

br_tag_11

自動整形による変化はなく、公開時に出来る段落間の隙間は追加したBRタグ数☓2という行数で出来ていることがわかりました。
これは使えそうです。

続けてBRタグの前後に改行があった場合はどのように変化するか見て行きましょう。

②BRタグの前に改行がある場合

BRタグの前に改行を入れた場合はどうなるでしょうか?

automatic_formatting_211b

結果を見る前に↑を公開するとどう表示されるかを確認してみましょう。

automatic_formatting_212b

BRタグを1つ追加しただけなのに約3行分の改行ができました。
これはどうしてでしょうか。

コードを見てみましょう。

automatic_formatting_213b

約3行分の改行の正体は「Pタグを分割したことで出来る段落」「2つのBRタグによる改行」でした。
ここでも「テキストモードでの空改行はPタグを分割する」という原則に従っているようです。

分かりやすく書くとこうなります。

automatic_formatting_211c

それでは連続してBRタグを追加するとどうなるか見て行きましょう。

br_tag_12

このように①の「BRタグ前後に改行がない場合」Pタグ分割による段落を加えた結果になりました。

③BRタグの後ろに改行がある場合

では追加したBRタグの後ろに改行があった場合はどうなるでしょうか?

automatic_formatting_214b

残念ながらこの場合は自動整形の影響を受けてしまいます。

ビジュアルモード→テキストモードに切り替えるとこうなります。

automatic_formatting_215b

BRタグ1つと空改行が消えてしまいました。
この状態で安定するため、自動整形後は①の「BRタグ前後に改行がない場合」と同じように表示されます。

ではまとめてみましょう。

br_tag_13

①の「BRタグ前後に改行がない場合」から改行を2回分減らした結果になりました。
これにより追加したBRタグが1つの場合、テキスト間の隙間はなくなってしまいます。

automatic_formatting_216b

ビジュアル→テキストとモードを切り替えると

automatic_formatting_217b

改行がなくなり、テキストが繋がってしまいました。

この点は注意が必要ですね。

④BRタグの前後に改行がある場合

最後にBRタグ前後に改行がある場合です。

automatic_formatting_218b

この結果は②と③の結果を複合したものになります。

すなわち、

・BRタグ前の改行はPタグを分割する。
・BRタグ後の改行はBRタグ1つと改行を消してしまう。

ということです。

結果をまとめるとこの通り。

br_tag_14b

特徴的なのがBRタグが1つの場合、ノンブレークスペース「 」に変化してしまうことです。

automatic_formatting_219b

ビジュアル→テキストとモードを切り替えると、

automatic_formatting_220b

このためBRタグが1つと2つでは公開ページがほぼ同じになるという現象が起きます。
(但しCSSがデフォルトの場合ですが)

automatic_formatting_222c

まとめ

いろいろなパターンを見てきましたが、「クラスを指定したBRタグを連続追加することでテキスト間のスペースをコントロールできるか」についての回答は、以下の条件を守れば「可能」と判断します。

・追加したBRタグの前後には空改行を入れない。
・前後のテキストをPタグで分割したい場合のみ、BRタグの前だけに空改行をいれる。

automatic_formatting_223b

このようにクラス指定をしたBRタグの数を変化させることでテキスト間のスペースをコントロールすることができます。

悪名高い自動整形もクラス指定がしてあると「ユーザーが必要と判断して追加したもの」として(完全ではないですが)削除するのをためらうようですね。

そもそもこのような使い方は「作法的にどうなのよ?レイアウトはCSSですべきでは」と言う話はありますが、まあ知っていて損はしないということで。

次は「消える空白について」を考えていますが、これに関しては予備知識が無いため事前調査が必要です。
記事になるのはしばらく先になりそうです。


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

コメントをどうぞ

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

CAPTCHA