Bloggerでの見出しを付けると色が変わってしまう現象の解決方法

今日Bloggerで記事作成をしていたら、見出し機能を使った時に、背景色が変わってしまう現象が発生しました。

記事作成画面では文字にオレンジの背景装飾が表示されているのですが、プレビュー画面にすると青い背景に変わってしまうという現象です。

結果的にHTMLの記述を見直す事でなおりました。

記事の作成画面をHTMLの編集画面に切り替えて、該当箇所の記述を見たところ、

下のようになっていました。

間違った記述

<div style="background-color: #eeaa00;">
<h2>
<span style="color: white; font-family: inherit; font-size: x-large;">テスト</span></h2>

正しい記述はこうでした。

<h2 div="" style="background-color: #eeaa00;">
<span style="color: white; font-family: inherit; font-size: x-large;">テスト</span></h2>

はてなブログとBloggerで2個ずつブログを作成していますが、はてなブログの方が使い勝手は全然いいですね。

Bloggerは広告が出ないので使っていますが、HTMLに詳しくない僕にはちょっと使いずらいです。