記事内の小見出しを簡単に書く方法

記事内の小見出し（サブタイトル）を簡単に書く方法

こんにちワ。ワンタンです。

小見出し（サブタイトル）は、あらかじめCSSでスタイルを設定しておけば、記事欄で簡単なHTMLタグを使うことによって表示できます。

今回は、この方法について御案内したいと思います。

1.サブタイトルに使うタグを決める

最初に記事内のサブタイトルに使うHTMLタグを決めます。

見出しタグ(h1、h2、h3、h4、h5、h6)の中から選択して決めておきます。
（※アメブロの場合は、h1が記事タイトルに使われてるみたいなので、使わない方がいいと思います。）

今回は、仮にh3タグを使うものとして書かせてもらいます。

（もし別のタグを利用する場合は、そのタグに読み替えて下さい。）

2.CSSにスタイルを定義

CSSに記事内サブタイトルh3のスタイルを定義しておきます。

これは、御自身のブログに合わせて設定すればいいのですが、参考までに、このブログの設定をご紹介してみます。

もし同じ設定で良ければ、以下のコードをCSSの末尾に追記しておいてください。

/* 記事内サブタイトル：h3 */
.entry .contents h3, .articleText h3 {
margin: 5px 0 0 0; /* 枠線の外側余白設定 上右下左の順 */
padding-left:10px; /* 枠線の内側左余白設定 */
font-size: 120%; /* 文字サイズ */
border-left: 10px solid #00cc00; /* 左側枠線、線種、色 */
border-bottom: 1px solid #bbbbbb; /* 下側枠線、線種、色 */
font-weight:bold;
}

※小見出しの色等は、コードのメモ書きを参考にしてみて下さい。

3.記事内でサブタイトル用のタグを使う

CSSにスタイルを設定したら、サブタイトルの内容を、上で決めた見出しタグ(仮に<h3>)と、その閉じタグ（</h3>）で挟み込んで記述して下さい。

<h3>小見出し（サブタイトル）の内容</h3>

このように表示されます。
          ↓

小見出し（サブタイトル）の内容

〇思うこと
CSSでスタイルを設定するのに若干手間が掛かりますが、一度設定しておけば記事を書く時にとても手間が省けると思います。

☆ブィブィ  ('-^*)/