【WordPress】 自動整形ルールの調査③ 消える改行について【BRタグ編】

自動整形で消える改行についての調査、三回目はBRタグです。

テキストモードで意図的にBRタグを追加するとどうなるのでしょうか。
BRタグを使うメリットはあるのでしょうか。

その辺りを調べていきましょう。

スポンサーリンク

BRタグを追加するとどうなるか

テキストモードで改行をすると公開時にはBRタグに置き換わります。

automatic_formatting_101b

automatic_formatting_102b

ではテキストモードで意図的にこのBRタグ<br />を追加するとどうなるのでしょうか。
確認してみましょう。

automatic_formatting_103b

これをプレビューもしくは公開ページで見るとこうなります。

automatic_formatting_104b

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

automatic_formatting_105b

狙い通りBRタグが追加されています。
問題はなさそうですね。

ところがこれが間違いなのです。
この状態からビジュアルモード→テキストモードと切り替えると自動整形が効いて変化をしてしまいます。

作業をしているテキストモードからビジュアルモード→テキストモードに切り替えると、

automatic_formatting_106b

改行2回分に変化してしまいました。

さらにもう一度ビジュアルモード→テキストモードと切り替えると、

automatic_formatting_107b

なんと改行1回分に減ってしまいました。

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

automatic_formatting_108b

このようにソースも初期の状態から変化しています。

すなわち、プレビューで問題ないことを確認してもモードを切り替えているうちにレイアウトが変化してしまうことがあるということです。

なおこれ以降は何度モードを切り替えても変化しません。
この状態で安定したということです。

それを踏まえてこれからの検証はたとえ段階的に変化したとしても「安定した状態がどうなるか」という視点で見ていきたいと思います。

BRタグを連続して追加することでスペースを作ることが出来るか

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

automatic_formatting_109b

BRタグを連続して追加すると大きなスペースが作れるのでしょうか?

確認すると以下のようになりました。

br_tag_01b

無くなるとは改行自体が消えてしまうということです。
↓のような状態です。

automatic_formatting_110b

大きなスペースを作りたくて何度もBRタグを追加したのですが、意図通りのスペースが作れていないことがわかります。

ただし追加したBRタグの前後に改行があると結果が変わります。
これについても調べていきましょう。

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

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

automatic_formatting_111b

結果はこうなりました。

br_tag_02

別のパターンも見てみましょう。

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

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

automatic_formatting_112b

結果はこうなりました。

br_tag_03

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

追加したBRタグの前後に改行があった場合も見てみましょう。

automatic_formatting_113b

結果はこうなりました。

br_tag_04-01

まとめ

「BRタグを連続して追加することで大きなスペースを作ることが出来るか」を確認しましたが、結果は上記の通り思わしくありません。

・BRタグを連続追加しても追加数に見合ったスペースは作れない。
・追加した数が奇数個か偶数個かで結果が変わる。
・BRタグ前後の改行の有無で結果が変わる。

と散々でした。

結論はもちろん「BRタグを追加することでテキスト間に大きなスペースを作ることが出来ない」です。
それ以前に些細な条件で結果が変わるため実務でのコントロールは不可能です。
テキストモードでBRタグは使ってはいけないということです。

このように残念な結果になりましたが、じつは一点だけ良い方法があります。
それは追加したBRタグにクラス指定を行うという方法なのですが、記事が長くなりそうなので次回に持ち越します。

ということで次回は「クラス指定をしたBRタグでの改行」について調べていきたと思います。


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

コメントをどうぞ

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

CAPTCHA