結城永人2017年の公式テーマのContempoとSohoとEmporioとNotableのカスタマイズで、記事／追加ページの固有タイトルの見出しタグをh3からh1に、そしてブログ名の見出しタグをh1からh2に変更した。何れもHTML構文とSEO対策のためだけれどもさらに他の部分との見出しタグのバランスを考えるとページリスト（先頭）と人気の投稿のガジェットを使っているので、それぞれのh3をh2に変更するべきなんだ。
ページリスト（先頭）はトップやアーカイブなどのインデックスページで表示される。見出しタグがh3だとh1のブログ名に対して大きさが一つ飛んでしまっている。h2にすると順番良く並んだマークアップになる。
人気の投稿は記事／追加ページの本文の下に置かれている場合に見出しタグを変更した固有タイトルのh1に対してh3だとやはり一つ飛んでしまっていてマークアップの流れが損われているからh2に変更したいと感じる。
Bloggerの公式テーマで設定されているHTML5のセクショニングを良く考えてみるとページリスト（先頭）にはnavタグが使われていてアウトラインによる見出しタグの扱いはh1のブログ名に次いでh2になるから取り立てて変える必要はないと気付いた。そして記事の本文にはarticleタグが付いている。アウトラインによって人気の投稿の見出しタグはh3でもh2のブログ名に対して同等の扱いになるんだ。なのでこれも特に変える必要はないと思うけれどもsectionタグを付けてブログ全体から区分けするようにしてみた。記事／追加ページではメインのガジェットではないし、コンテンツの一部だからsectionタグで区分けするのが相応しい。
htm5のセクショニングのアウトラインはブラウザの状況によって必ずしも有効ではないらしい。SEO対策で検索エンジンがどう捉えるかも不明なんだ。それぞれの見出しダグの順番を重視すると当初の予定通りのカスタマイズが求められる。
参考サイト
ページリスト（先頭）ガジェットの見出しタグを変更するソースコード
SohoとNotableはページリスト（先頭）ガジェットのタイトルはレイアウトから入力してもブログには表示されないデザインだから特に何もする必要はなくて見出しタグの順番も崩れない。
ブログには表示されないけど、2017年の公式テーマは四種類のどれも「投稿」という見出しがh2でインデックスページの記事の抜粋の直前にマークアップされているので、ブログ名のh1から「投稿」のh2、さらに記事の抜粋のタイトルのh3と順序良く並んでいる。
ContempoとEmporioでページリスト（先頭）ガジェットにタイトルを付けてブログに表示する場合はブログ名のh1から一つ飛んでh3になってしまうからh2に変更するのが望ましい。
テーマのHTML編集、またはバックアップ／復元のダウンロードで、マークアップのPageList1のidのwidget内からタイトルをh3を出力する独自タグとskin内からデフォルトで相当するデザインのCSSを書き換える。
テーマ共通の書き換え前のwidget内の独自タグ
<b:include name='widget-title'/>テーマ共通の書き換え後のwidget内の独自タグとHTML
<h2 class='title'>
<data:title/>
</h2>Contempoの書き換え前のskin内のCSS
.blog-name .PageList h3.title{
color:$(blog.title.color);
margin:8px auto;
text-align:center;
width:100%
}Contempoの書き換え後のskin内ののCSS
.blog-name .PageList h2.title{
color:$(blog.title.color);
margin:8px auto;
text-align:center;
width:100%;
font-size:16px
}Emporioの書き換え前のskin内のCSS
.top-nav .PageList h3{
margin-$startSide:16px
}Emporioの書き換え後のskin内のCSS
.top-nav .PageList h2{
margin-$startSide:16px
}Contempoにかぎってページリスト（先頭）ガジェットのタイトルの見出しタグをh3から他のものに変えるとデフォルトのデザインでは文字サイズが不明になってしまう。cssに「font-size:16px」を追加して最初のh3の文字サイズと同じに指定しないとデザインを引き継げなくなってしまう。
記事／追加ページの本文の下の人気の投稿ガジェットの見出しタグを変更するソースコード
記事／追加ページの本文の後の人気の投稿ガジェットの見出しタグをh3からh2に変更する記述はPopulationPosts1のidのwidget内の独自タグとテーマによって必要ならばskin内のCSSも対象になる。
四つのテーマで微妙に異なっていて紛らわしいので、カスタマイズのためのソースコードを一つずつ取り上げて行く。
Contempoの書き換え前のwidget内の独自タグ
<b:with value='data:messages.popularPostsFromThisBlog' var='defaultTitle'>
<b:include name='super.main'/>
</b:with>Contempoの書き換え後のwidget内の独自タグとHTML
<h2 class='title'>
人気の投稿ガジェットのタイトル
</h2>
<b:include name='super.main'/>※人気の投稿ガジェットのタイトルはブログに表示する言葉を入力する。
※最初にレイアウトの人気の投稿ガジェットからタイトルを付けていた場合は残っていてブログに表示されてしまうから消さなくてはならない。
Contempoの書き換え前のskin内のCSS（二ヵ所）
.PopularPosts,.PopularPosts h3.title a{
color:$(posts.text.color);
font:$(posts.text.font)
}
.PopularPosts h3.title{
font-size:14px;
margin:0
}Contempoの書き換え後のskin内のCSS（二ヵ所）
.PopularPosts,.PopularPosts h2.title a{
color:$(posts.text.color);
font:$(posts.text.font)
}
.PopularPosts h2.title{
font-size:14px;
margin:0
}Sohoの書き換え前のwidget内の独自タグ
<b:with value='data:messages.popularPosts' var='defaultTitle'>
<b:include name='super.main'/>
</b:with>Sohoの書き換え後のwidget内の独自タグとHTML
<h2 class='title'>
人気の投稿ガジェットのタイトル
</h2>
<b:include name='super.main'/>※人気の投稿ガジェットのタイトルはブログに表示する言葉を入力する。
※最初にレイアウトの人気の投稿ガジェットからタイトルを付けていた場合は残っていてブログに表示されてしまうから消さなくてはならない。
Sohoはskin内のCSSのカスタマイズは不要だ。
Emporioの書き換え前のwidget内の独自タグ
<b:with value='data:messages.popularPosts' var='defaultTitle'>
<b:include name='super.main'/>
</b:with>Emporioの書き換え後のwidget内の独自タグとHTML
<h2 class='title'>
人気の投稿ガジェットのタイトル
</h2>
<b:include name='super.main'/>※人気の投稿ガジェットのタイトルはブログに表示する言葉を入力する。
※最初にレイアウトの人気の投稿ガジェットからタイトルを付けていた場合は残っていてブログに表示されてしまうから消さなくてはならない。
Emporioの書き換え前のskin内のCSS
.PopularPosts h3.title{
font:$(widget.title.font)
}Emporioの書き換え後のskin内のCSS
.PopularPosts h2.title{
font:$(widget.title.font)
}Notableの書き換え前のwidget内の独自タグ
<b:with value='data:messages.popularPostsFromThisBlog' var='defaultTitle'>
<b:include name='widget-title'/>
</b:with>Notableの書き換え後のwidget内の独自タグとHTML
<h2 class='title'>
<data:title/>
</h2>※最初にレイアウトの人気の投稿ガジェットからタイトルを付けていた場合は残っていてブログに表示されてしまうから消さなくてはならない。
Notableはskin内のCSSのカスタマイズは不要だ。
記事／追加ページの本文の下の人気の投稿ガジェットの見出しタグがh2ならば固有タイトルにh1の見出しを付けていてかりに本文にh2の見出しタグが使われなかった場合でも順序良く繋がるようになってHTML構文とSEO対策に役立つ。
コメントのタイトルはh3だけれどもsectionが付いてるから敢えて変更しない
四つのテーマの何れも記事／追加ページと本文の下の人気の投稿ガジェットの間にはコメントの見出しタグのh3が入っているんだ。
普通に考えるとそれこそh2に変えなくては固有タイトルから次の人気の投稿ガジェットのタイトルまでh1、h3、h2の流れになって順番通りにならないのが不味い。
ただしソースコードを調べると四つのテーマの何れもコメントの部分には区分タグのsectionが付いている。Bloggerの公式テーマで設定されているHTML5ではsectionは見出しタグと同じようにマークアップのアウトラインを形成する。sectionは見出しタグを入れて使うのが一般的だけれども内側にどんな見出しタグが使われる場合でもマークアップとしては外側の見出しから一つだけ小さく扱われるのが基本になっている。
見出し要素は要素名の数字によって与えられる順位を持っています。 <h1> が最も高い順位であり、 <h6> が最も低い順位です。相対的な順位付けはセクション内のみのことであり、セクションの見出し順位ではなく、セクションの構造がアウトラインを決定します。
コメントのタイトルのh3は固有タイトルのh1に対してh2に相当すると捉えて構わないと思う。
本文の下の人気の投稿のガジェットにはSectionが付いてなくてマークアップのアウトラインとしては固有のタイトルにもsectionが付いてないために同列だから順番通りに記載するのが望ましい。
ブログの記事や人気の投稿にはサイドバーのプロフィールやアーカイブなどのコンテンツが後から続く――例外的にEmporioテーマだけはマークアップの順番が入れ替わっていてサイドバーのコンテンツに続いて記事／追加ページの下の人気の投稿ガジェットが置かれている――けれども見出しタグは全てh3がデフォルトで記載されている。
しかし四つのテーマの何れもサイドバーには補足タグのasideが付いていてマークアップのアウトラインを形成するもののメインに扱われないのが基本になっている。
HTML のアサイドセクション要素 (<aside>) は、主要素に関連するけれども、説明コラムや広告などの本筋には属さないセクションを定義します。それ自身のアウトラインを持ちますが、メインアウトラインには属しません。
サイドバーのコンテンツはHTML構文とSEO対策において前のコンテンツからの見出しタグの順番を特に気にする必要はない。
人気の投稿ガジェットにsectionタグを付けるソースコード
雑記ブログの場合は本文の下の人気の投稿のガジェットの見出しタグを固有タイトルの見出しタグから順番通りに変えるよりも全体にsectionタグを付けて本文と区分けする方が適切かも知れない。
専門ブログでなければ記事と人気の投稿のテーマは必ずしも一致しないわけで、一纏まりにしておくと検索エンジンの記事のサイト解析もぼやけたらサイト評価が定まらなくてSEO対策に不利でないとはかぎらない。
PopularPosts1のidのwidget内を変更する。
テーマ共通の書き換え前のHTMLと独自タグ
<b:include name='super.main'/>テーマ共通の書き換え後のHTMLと独自タグ
<section>
<b:include name='super.main'/>
</section>人気の投稿ガジェットのタイトルとスニペットを全体的にsectionタグで囲ってしまう。
記事の本文と人気の投稿が区分けされるマークアップは雑記ブログで記事毎のテーマが同じではない場合、すなわち後者に前者と関係性が薄いタイトルやスニペットが表示されても別々に捉えられるサイト構成になるから向いていると感じる。
コメント