Blogger:投稿作成時の注意点-編集時と公開時で見た目が異なる(行が増えるケース)

イントロダクション

Google のブログサービス「Blogger」ですが、このブログ開設以来ずっと使ってきて、いろいろと気が付いたことがあります。

その一つに、Blogger の投稿の編集時と公開時で、見た目が異なる(行が増えるケース)ということです。

Blogger の投稿の編集時と公開時で、見た目が異なる(行が増えるケース)

この現象は、以下の要素を作成した場合に、要素の作成直後と公開時で見た目が異なり、その前後に行が1行ずつ増えていることを確認しました。

• 追記の区切り
• 箇条書きリスト
• 番号付きリスト

どういうことかというと、たとえば「箇条書きリスト」を作成した場合に、編集画面では、以下のように見えていたとします。

前の行

• リスト1
• リスト2
• リスト3

後の行

このデータを含んだ投稿を公開すると、この部分は次のようになります。

前の行

• リスト1
• リスト2
• リスト3

後の行


このように、「箇条書きリスト」の前後に 1 行ずつ空行が入ります。

なぜこんなことが起きるのか？

そのような「箇条書きリスト」を作成した直後に、編集モードを「作成」から「HTML」へ変更して HTML のタグを見てみると、その時点で既に「箇条書きリスト」の前後に改行(<br />) が挿入されていることが分かりました。

編集画面の見え方から期待するタグの構造：
前の行<br />
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
後の行<br />

実際のタグの構造：
前の行<br />
<br />
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
<br />
後の行<br />


従って、それらの{要素の作成直後と公開時で見た目が異なり、その前後に行が1行ずつ増える}要素では、編集時と公開時で見た目が異なるというよりも、編集時に編集モードが「作成」の場合に、実際の HTML が正常に反映されず、要素の前後の改行が見えていないということになります。

対処方法

たかだか改行が 1 行ずつ要素の前後に増えるだけと言っても、それだけでページの文章の見え方が変わってきてしまうことがあります。

そのため、事前に要素の前後の改行を削除したい場合もあります。
その場合にどうしたらよいかというと、いったん作成モードを「HTML」へ切り替えた後、すぐに「作成」に戻します。

すると、反映されていなかった要素の前後の改行が見えるようになっています。


また、投稿を公開後に再編集をすると、それらの要素の前後の改行が見えるようになっています。