Blogger記事内に小見出しをつける

記事を記載する際、章の区切りなどで使用するための小見出しが欲しくなることがよくあります。

たとえば、

記事に小見出しをつける

このような小見出しがあるのをよく見かけると思います。

Bloggerの編集画面には記事の文字色などを変更するボタンはありますが、

あまり細かい変更はできませんし、いちいち色や文字の大きさを設定するのは面倒です。

そこで、cssで見出しのスタイルを定義し、記事の段落で指定するようにしてみました。

上の見出しの例は、以下のようなスタイルを使用しています。




（記事で使用するcssスタイルは、マイブログ＞テンプレート＞カスタマイズ＞アドバンス の「カスタムcssを追加」欄にまとめておくとよいでしょう。）

あとはdivタグのクラスに「subhead」を指定すれば、見出しが追加できます。



今回は「subhead」という名前をつけていますが、他の項目と名前が混ざらないならば他の名前にしていただいて構いません。


例えば以下のような3種類の小見出しを作成します。



これをdivタグのstyleにそれぞれ設定すると、以下のようになります。

赤見出しです。（div class="akamidashi"）

青見出しです。（div class="aomidashi"）

黄見出しです。（div class="kimidashi"）

3種類の付箋紙のような見出しがつきました。

これらを場合によって使い分けることができれば、文章のみのブログでも画面が平坦にならず、注目を集めることができるでしょう。