はてなブログでは、ブログ名と記事タイトルに<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とループで複数要素のタグと文字列を置換