Bloggerブログでページリスト(先頭)と人気の投稿の見出しタグを変更する

Bloggerブログの2017年の公式テーマのContempoとSohoとEmporioとNotableのカスタマイズで、記事/追加ページの固有タイトルの見出しタグをh3からh1に、そしてブログ名の見出しタグをh1からh2に変更した。何れもhtml構文SEO対策のためだけれどもさらに他の部分との見出しタグのバランスを考えるとページリスト(先頭)と人気の投稿のガジェットを使っているので、それぞれのh3をh2に変更するべきなんだ。


ページリスト(先頭)はトップやアーカイブなどのインデックスページで表示される。見出しタグがh3だとh1のブログ名に対して大きさが一つ飛んでしまっている。h2にすると順番良く並んだマークアップになる。


人気の投稿は記事/追加ページの本文の下に置かれている場合に見出しタグを変更した固有タイトルのh1に対してh3だとやはり一つ飛んでしまっていてマークアップの流れが損われているからh2に変更したいと感じる。




ページリスト(先頭)ガジェットの見出しタグを変更するソースコード


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のWebster内の独自タグとテーマによって必要ならば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> が最も低い順位です。相対的な順位付けはセクション内のみのことであり、セクションの見出し順位ではなく、セクションの構造がアウトラインを決定します。


HTML5 ドキュメントのセクションとアウトライン via MDN Web Docs

コメントのタイトルのh3は固有タイトルのh1に対してh2に相当すると捉えて構わないと思う。


本文の下の人気の投稿のガジェットにはSectionが付いてなくてマークアップのアウトラインとしては固有のタイトルにもsectionが付いてないために同列だから順番通りに記載するのが望ましい。


ブログの記事や人気の投稿にはサイドバーのプロフィールやアーカイブなどのコンテンツが後から続く――例外的にEmporioテーマだけはマークアップの順番が入れ替わっていてサイドバーのコンテンツに続いて記事/追加ページの下の人気の投稿ガジェットが置かれている――けれども見出しタグは全てh3がデフォルトで記載されている。


しかし四つのテーマの何れもサイドバーには補足タグのasideが付いていてマークアップのアウトラインを形成するもののメインに扱われないのが基本になっている。


HTML のアサイドセクション要素 (<aside>) は、主要素に関連するけれども、説明コラムや広告などの本筋には属さないセクションを定義します。それ自身のアウトラインを持ちますが、メインアウトラインには属しません。


HTML5 ドキュメントのセクションとアウトライン via MDN Web Docs

サイドバーのコンテンツはhtml構文とSEO対策において前のコンテンツからの見出しタグの順番を特に気にする必要はない。

コメント

些細な日常の人気の投稿

MOTOROLAのMoto G5 Plusを使い出してのスマホレビュー

Imgurで画像URLと埋め込みコードを取得する方法

PlayストアでAndroidアプリのダウンロードが非常に遅い場合の打開策