こんにちは、カスタマイズと復興支援で頑張るたっくんです。


今回のカスタマイズは、


目次やまとめページを作成する際に、たいへん重宝すると思います。


あなたのブログの印象もだいぶ変わると思いますので、


ぜひ試してみてください。


CSSを編集する


以下のCSSを追加してみてください。


注:新CSS編集デザイン用のカスタマイズです。


/*記事内に見出しをつける*/
.skinArticle h2{
font-size: 16px;/*文字サイズ*/
font-weight: bold;/*太字*/
margin-bottom: 10px;/*見出しの下の余白*/
color: #333333;/*文字色*/
padding-top: 5px;
padding-bottom: 5px;
border-top: 1px dotted #3eb370;/*上の線の太さ・線種・色*/
border-bottom: 1px dotted #3eb370;/*下の線の太さ・線種・色*/
background-image: url(リストマーク画像URL);
background-repeat: no-repeat;
background-position: left center;
height: 24px;
padding-left: 30px;/*見出し文字の開始位置*/
}


記事を作成する


あとは、記事を作成する際に、


見出しをつけたい部分を<h2>と</h2>で囲んでください。


<h2>見出し</h2>


注1:HTMLタグ表示画面で入力すること


注2:記事編集画面では確認できません。プレビュー画面でご確認ください。


目次ページをカスタマイズしてみました。


こんな感じになりました。


目次ページが見やすくなりました


今回は、アメブロカスタマイズデザイナー山田華月さんの、


こちらの記事を参考にしました。


ありがとうございます。


あなたも、ぜひ参考にしてみてください。


小見出しを作って記事にアクセントをつけよう!【新スキン・旧スキン対応】