Blogger:でっかくして目立たせよう！ - 番外編：本文の見出し編

イントロダクション

「ナビゲーションをでっかくして目立たせて使ってもらおう！」シリーズは Blogger の各ナビゲーションをでっかくして、使ってもらいたい機能・目立たせたい情報を読者にアピールしようとする一連のシリーズです。

今回は本文の見出しをでっかくしちゃおうと思います！

でっかくする！

テンプレートのカスタマイズにて、上級者向け→CSSを追加にて以下のスタイルシートを適用してみました。

.post-body h6 {
    font-size: 20px;
    padding: 2px;  margin: 6px;
}
.post-body h5 {
    font-size: 22px;
    padding: 2px;  margin: 6px;
}
.post-body h4 {
    font-size: 24px;      padding: 2px;  margin: 6px;
}
.post-body h3 {
    font-size: 26px;
    border-bottom-style: dotted;  
    border-bottom-width: 1px;  border-bottom-color: #999999;  padding: 2px;  margin: 6px;
}
.post-body h2 {
    font-size: 30px;
    border-bottom-style: dotted;  
    border-bottom-width: 2px;  border-bottom-color: #999999;  padding: 2px;  margin: 6px;
}
.post-body h1 {
    font-size: 40px;
    border-bottom-style: dotted;
    border-bottom-width: 4px;
    border-bottom-color: #999999;
    padding: 2px;
    margin: 6px;
}

でっかくなった結果

でっかくした結果、次のようになりました。

でっかくした

本文の見出し

これで、この本文の見出しが見落とされることはなくなるでしょう！


余談ですが、いつでも本文の見出しのスタイルを確認できるよう、以下のソースコードを張り付けたページを一つ作っておくとよいかもしれません。

<h1>
見出し1</h1>
<h2>
見出し2</h2>
<h3>
見出し3</h3>
<h4>
見出し4</h4>
<h5>
見出し5</h5>
<h6>
見出し6</h6>

なお、現在のこのブログの見出しのスタイルは以下のようになっています。
→ このブログの見出し一覧

※ この記事を書いた時とは異なるスタイルになっている可能性があります。