Blogger の HTML 自動修正機能がときには邪魔になる...。どう対策するべきか...？

イントロダクション

前回の記事「CSS:float指定の要素でリンクをクリックできない理由は上に別の要素が被さっていたからだった」で、以下のコードを記載しました。

コード

<span style="float:right;position: relative;z-index: 2;"><a href="javascript:alert('クリック!');">クリックして！</a></span>
<h1 style="width:100%;">タイトル要素</h1>


このコードを、Blogger の投稿の HTML に張り付けました。

※ Blogger の投稿エディタには、見たまま投稿を編集できる機能と、HTML で投稿を編集できる機能があります。

詳しくは、以下の Blogger のヘルプを参照してください。

Blogger の投稿エディタ - Blogger ヘルプ
https://support.google.com/blogger/answer/42239?hl=ja

そして、投稿の編集モードを「HTML」の編集（ブログの本文を HTML で編集できるモード）から、「作成」モード（ブログの本文を見た目通りに編集できるモード）に戻したところ、以下のように HTML が自動修正されていました。

Blogger の投稿エディタの HTML 自動補正機能

Bloggerの自動修正が行われたコード

<span style="float: right; position: relative; z-index: 2;"><a href="javascript:alert('%E3%82%AF%E3%83%AA%E3%83%83%E3%82%AF!');">クリックして！</a></span>
<br />
<h1 style="width: 100%;">
タイトル要素</h1>


</span> と <h1 の間に<br /> (赤字で表示) が自動的に補完されています！

今回のデモコードでは、</span>と<h1 が連続していないと意味がないものです。

そのため、これでは使えません。
どうすればいいんだろうと考えたところ、とりあえずその部分を JavaScript で出力すれば自動補完も働かないだろうと思い、以下のコードを作成しました。

要素の出力を JavaScript で出力するように変更したコード

<script type="text/javascript">
<!--

document.write("<span style=\"float: right; position: relative; z-index: 2;\"><a href=\"javascript:alert(\'%E3%82%AF%E3%83%AA%E3%83%83%E3%82%AF!\');\">クリックして！</a></span><h1 style=\"width: 100%;\">タイトル要素</h1>");

//-->
</script>


今度はうまく表示されるだろうと思い、HTMLの編集からブログの作成モードに戻してみました。

すると、今度は勝手に「タイトル要素」と「");」の直前で改行されており、このままでは JavaScript の実行時エラーになってしまいます。

Bloggerの自動修正が行われた JavaScript コード

<script type="text/javascript">
<!--

document.write("<span style=\"float: right; position: relative; z-index: 2;\"><a href=\"javascript:alert(\'%E3%82%AF%E3%83%AA%E3%83%83%E3%82%AF!\');\">クリックして！</a></span><h1 style=\"width: 100%;\">
タイトル要素</h1>
");

//-->
</script>


仕方のないので、上記のコードから自動的に挿入された不要な改行を削除し、HTML の編集の状態からブログを公開したところ、自動的な改行が入らない状態で投稿することが出来ました。


自動的な HTML 修正機能はときには非常に便利な機能ですが、ときには意図したとおりに動かないという問題を引き起こすことがあります。

記事を投稿したら、ちゃんと期待した通りの HTML になっているのか、しっかり確認することが重要のようです。