アメブロ旧CSS：記事内の見出し(大・中・小)を分かりやすくカスタマイズする方法

アメブロの旧CSS編集用デザインで、記事本文内の見出しの表示をもっと分かりやすく、見やすく、見出しらしくするカスタマイズ方法です。

新CSS編集用デザイン向けはこちら

アメブロの新CSS編集用デザインで、記事本文内の見出し(大、中、小)の表示をもっと分かりやすく、見やすく、見出しらしくするカスタマイズ方法について解説します。

アメブロの記事エディタでは、

大見出し → h2タグ
中見出し → h3タグ
小見出し → h4タグ

という対応になっています。

CSS編集用デザインの初期状態では、これらの見出しタグが、単に太字で表示されるだけで少々分かりにくいと思いますので、一例として、次の画像のようにカスタマイズしてみます。

記事内の見出し(大・中・小)を分かりやすくする

このカスタマイズは、CSSの編集で行いますので、やり方がわからない場合は先に確認しておいて下さい。

CSSを編集する手順：カスタマイズで必須の基本操作です！

CSS編集用デザインをベースにアメブロをカスタマイズするためにCSSを編集するときの手順について解説します。アメブロのカスタマイズ時には必須で頻繁に行う作業ですのでマスターしておくことをお勧めします。

以下のコードをCSSの末尾に追加してください。

/************************************************
  旧CSS：記事内の見出しを分かりやすくする
************************************************/
.articleText h2 { /* 大見出し h2 */
  border-left: 8px solid #000000;
  border-bottom: 1px solid #000000;
  padding-left: 10px;
}
.articleText h3 { /* 中見出し h3 */
  border-left: 8px solid #999999;
  padding-left: 10px;
}
.articleText h4 { /* 小見出し h4 */
  border-bottom: 1px dashed #999999;
}

まとめ

以上、アメブロの旧CSS編集用デザインで、記事内の見出し(大・中・小)を分かりやすくカスタマイズする方法をご紹介しました。

分かりやすい見出しは、読者に記事を読んでもらいやすくする助けになりますので、お薦めです。

よかったら参考にして下さい。