はてなブログの<h1>タグをjQueryで書き換え

hatenaロゴ

はてなブログでは、ブログ名と記事タイトルに<h1>タグが使われていますが、個人的には、ひとつのページに<h1>タグがふたつあるのはおかしい気がしています...。

トップページ:ブログ名が大事なので<h1>、記事タイトルは<h2>
個別記事ページ:記事タイトルが大事なので<h1>、ブログ名は<div>で囲む

そこで、JavaScript(jQuery)で、<h1>タグを書き換えてみることにしました。

(デザイン→カスタマイズ→フッタにコードを入力)

JavaScript
<script>
document.addEventListener('DOMContentLoaded', function() {
    if($('.page-entry')[0]) { /* 個別記事ページなら↓ */
        $('#title').replaceWith('<div id="title">' + $('#title').html() + '</div>');
    }
    else { /* トップページ(カテゴリーや月別アーカイブなど)なら↓ */
        $('.entry-title').replaceWith(function() {
            $(this).replaceWith('<h2 class="entry-title">' + $(this).html() + '</h2>');
        });
    }
});
</script>

個別記事ページでは、ブログ名の<h1>タグを<div>タグに書き換えます。
記事タイトルの<h1>タグは何もせずそのままです。

トップページ(カテゴリーや月別アーカイブなど)では、記事タイトルの<h1>タグを<h2>タグに書き換えます。ブログ名の<h1>タグは何もせずそのままです。

※ 「ページのソースを表示」してもタグは変わっていませんが、chromeなどの「検証モード」(デベロッパーツール)で確認すると、ちゃんと変更されています。

参考になるブログ・Webサイト
9ineBB - jQueryをつかって、中身はそのままでHTMLタグを書き換える
IT工房 - replaceWith()の使い方〜jQuery

- 追記 -
もっとシンプルにトップページも個別記事ページもブログ名は<div>(記事タイトルは<h1>)にしました。また、jQueryを使わずにJavaScriptで表示させることにしました。

JavaScript
<script>
    elem=document.getElementById('title');
    html=elem.innerHTML;
    elem.outerHTML='<div id="title">' + html + '</div>';
</script>

参考になるブログ・Webサイト
DUB DESiGN - JavaScriptの.outerHTMLとループで複数要素のタグと文字列を置換