h1タグのパンくずリストへの設置

SEO対策としてh1タグの設置を検討していますが、各ページに設置するため、パンくずリストへの設置を考えています。

[HTML]
<ol>
<li>
<a href="ホーム.html">
<span>ホーム</span></a>
</li>
<li>
<span>このサイトのご利用案内</span>
</li>
</ol>

[CSS]
ol {
float: left;
margin: 12px 0 0 20px;
}
ol li {
display: inline; /* 横並び */
}
ol li a {
padding-right: 15px;
background: url(/images/path.gif) no-repeat right; /* 矢印 */
}

「このサイトのご利用案内」をh1にしたいので、
<span>このサイトのご利用案内</span>　を
<span><h1>このサイトのご利用案内</h1></span>　にしたり
<h1><span>このサイトのご利用案内</span></h1>　にしたり
しましたが、「ホーム」と「このサイトのご利用案内」の文字が重なってしまいます。
<span style="margin-left: ○○px; "><h1>このサイトのご利用案内</h1></span>　や
<span style="padding-left: ○○px; "><h1>このサイトのご利用案内</h1></span>　
にすると重ならずに表示できますが、さらに下の階層のページなどでの汎用性が低くなり一般的でないと思います。

文字が重ならないようにする方法を教えて下さい。

宜しくお願いいたします。

No.2 ベストアンサー 回答者： t_fumiaki 回答日時： 2017/08/07 14:58

>>やはり左端に寄ってしまいます。

改行しないで横へ並べるなら、そう書けば良いだけです。

前のh1に追加するだけ。
h1 {font-size:16px; font-weight:normal; line-height:1;}
↓
h1 {font-size:16px; font-weight:normal; line-height:1;display: inline;}

この回答へのお礼

ol li に display: inline; を設定していたので安心していました。
h1 にも display: inline; を設定することで横へ並べることができました。

助かりました。ありがとうございました。

お礼日時：2017/08/07 17:13

No.1 回答者： t_fumiaki 回答日時： 2017/08/07 13:29

こういうh1の使い方よ良く無いけれど、それは別の機会に。

で、h1タグは大見出しだから、デフォルトででかくて太い。

だからcssで自分で大きさなどを指定する。

cssに追加

h1 {font-size:16px; font-weight:normal; line-height:1;}

とか、・・・・。

この回答へのお礼

早速にご回答頂き、ありがとうございます。
すでに、font-size:16px; font-weight:normal; line-height:1;など「cssで大きさなどの指定」など試しましたが、やはり左端に寄ってしまいます。
[h1]を[span]に戻すと、希望通り右に並んで表示されます。

お礼日時：2017/08/07 13:57