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

hatenaロゴ

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

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

参考になるブログ・Webサイト
Webourgeon - 変化するentry-title(記事タイトル)〜Twenty Ten メイン部分のCSSカスタマイズ(3)

そこで、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

タグを書き換えることにあまり意味はないとは思いますが、なんとなくやってみました。