目次

【アメブロカスタマイズ】記事内の見出し(h2,h3,h4)を分かりやすくする方法

「新CSS編集用デザイン」向けです

アメブロの記事内の見出し(h2、h3、h4)タグの表示を分かりやすく、見やすく、見出しらしくカスタマイズする方法をご紹介します。

アメブロのエディタでは、ユーザーがHTMLタグを書かなくても見出しタグを記事内で簡単に使えますが、

実際には、それぞれ以下のようなタグが記事に挿入されるようになっています。

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

ただ、CSS編集用デザインの初期状態では、文字が太くて大きいだけで今一つ印象が薄いので、もう少ししっかりと見出し目立たせたいものです。

そこで、当記事では、記事内の見出しタグを、もっと見出しらしく目立たせるカスタマイズ方法をご紹介します。

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

CSSを編集してアメブロをカスタマイズをする手順
アメブロをカスタマイズするための専用のデザイン「CSS編集用デザイン」に用意されている「ブログデザインCSS」を編集してアメブロをカスタマイズする手順について説明します。

記事内の見出しの表示を改善する

今回は、これら記事内の見出しタグの表示を改善する簡単なカスタマイズ例を3例ご紹介します。

記事内の見出しに背景色をつける

まず、1例目として、見出しに背景色を付けてみます。

派手なカスタマイズではありませんが、少しは見出しらしくなりますね。

記事内の見出しをこのような表示にするには、以下のコードをCSSの末尾に追加して下さい。

.skin-entryBody h2 { /* 大見出しh2 */
  background-color: #ececec;
  padding-left: 10px;
}
.skin-entryBody h3 { /* 中見出しh2 */
  background-color: #f0f0f0;
  padding-left: 10px;
}
.skin-entryBody h4 { /* 小見出しh2 */
  background-color: #f7f7f7;
  padding-left: 10px;
}

記事内の見出しに枠線をつける

次に、もう一つ簡単な例として、枠線を付けてみます。

見出しの左や下に線が付くだけなので、これもけっして派手ではありませんが、随分と見出しらしい雰囲気でよく目立つようになると思います。

記事内の見出しをこのような表示にするには、以下のコードをCSSの末尾に追加して下さい。

/* 記事内の見出しを見出しらしくする */
.skin-entryBody h2 { /* 大見出しh2 */
  border-left: 8px solid #000000;
  border-bottom: 1px solid #000000;
  padding-left: 10px;
}
.skin-entryBody h3 { /* 中見出しh2 */
  border-left: 8px solid #999999;
  padding-left: 10px;
}
.skin-entryBody h4 { /* 小見出しh2 */
  border-bottom: 1px dashed #999999;
}

簡単な装飾ですが、ご自身のアメブロのデザインに合わせて色や枠線の太さなどを変えてカスタマイズしてみると、見やすく分かりやすい記事内の見出しになるのではないでしょうか。

記事内見出しに背景も枠線もつけてみる

最後に、上記の「背景」と「枠線」を組み合わせて、もう少しだけ工夫した例をご紹介します。

背景と枠線の他にも、大見出しと中見出しを少しだけ左にはみ出すようにして、段差をつけてあります。

やはり派手ではありませんが、十分に見出しとしての役目を果たしてくれると思います。

記事内の見出しをこのような表示にするには、以下のコードをCSSの末尾に追加して下さい。

.skin-entryBody h2 { /* 大見出しh2 */
  margin-left: -18px;
  padding-left: 10px;
  background: #ececec;
  border: 1px solid #cccccc;
  border-left: 8px solid #136;
  border-bottom: 2px solid #136;
}
.skin-entryBody h3 { /* 中見出しh2 */
  margin-left: -10px;
  padding-left: 10px;
  background-color: #f0f0f0;
  border: 1px solid #cccccc;
  border-bottom: 2px dashed #136;
}
.skin-entryBody h4 { /* 小見出しh2 */
  border-bottom: 1px dotted #136;
}

まとめ

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

今回ご紹介したのは何れも簡単な例ですが、背景や枠線の色や枠線の太さなどを変更するだけでも、ずいぶん違った印象になりますよね。

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

(準備中)
(準備中)