見出し1
h2
見出し1が記事内でもっとも大きな見出し、大見出しとなります。
見出し1の書式のみ
同じように見えて、下側はpです。
<p class="common-title"></p>
見出し2
h3
こちらは中見出しです。
見出し1の内容について、更に細分化する場合に使います。
構造として、見出し1より上に来ることはできません。
構造の違反をすると、SEOで不利になることもあるのでご注意ください。
見出し2の書式のみ
こう見えて、下側はpです
<p class="common-subTitle"></p>
2見出し3 ●数字タイプ
見出し2の頭に数字をつけるタイプ
ひとつ少ない数字の子の状態であれば、いくつでも並べて構いません。
この見出しは見出し2の子です。
<h3 class="Number"><span class="Number">No</span>見出し</h3>
見出し3 イメージ
前に画像を置くタイプの見出しです。
画像サイズは強制的に3em×3emになるため、準備段階で適正比率とすること。
<h3 class="h3_img"><img src="URL">見出し</h3>
見出し3 ●文字列
見出し2の頭に5文字以内の文字をつけるタイプ
ひとつ少ない数字の子の状態であれば、いくつでも並べて構いません。
この見出しは見出し2の子です。
<h3 class="Headline"><span class="Headline">頭の文字</span>見出し</h3>
見出し3
h4
これが小見出しです。設定してある中で一番小さな見出しです。
直前の見出し2の内容について、さらに細分化するために使います。
見出し 4
h5
本ページ(書式一覧)のための見出しで、サイトでは使用していません。
見出しの階層について
見出しは1~3を順に使います。
見出し1の次は見出し2、見出し2の次は見出し3です。
見出しは親子関係で、見出し1の子が見出し2になります。見出し2は兄弟として複数設定ができます。見出し2に対する見出し3も同じです。
OKの例
見出し1(親)
└見出し2(子)
├見出し3(孫)
└見出し3(孫)
└見出し2(子)
NGの例
見出し1(親)
└見出し3(孫) ※見出し1(親)を細分化するのは見出し2(子)のみ
common
特殊な見出し
<p class="top-commonTitle"><span>特殊な見出し</span></p>
白カッコバージョン
<p class="top-commonTitle top-commonTitle-wh"><span></span></p>