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

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

新タイプ(第二世代)のCSS編集用デザインに対応しています。

アメブロの最新版エディタでは、ユーザーがHTMLタグを書かなくても、「見出し」タグを記事内で簡単に使えるようになっています。

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

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

ただ、CSS編集用デザインの初期状態では、文字が太くて大きいだけで、見出しではない単に大きい文字と見分けがつきにくいですね。

そこで、当記事では、記事内の見出しタグを、分かりやすく、見出しらしく、見やすくするカスタマイズ方法をご紹介します。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

今回ご紹介したのは、いずれも簡単な例ですが、背景や枠線の色、枠線の太さなどを変更するだけでも、随分違った印象になったりしますので、ぜひ色々と試してみてくださいね。

よろしければフォローお願いします

コメントを残す

メールアドレスが公開されることはありません。

ご覧いただきありがとうございます。どうぞお気軽にコメント下さい。ただし、コメントでのご質問の方は、記事内容に関することだけに限定させていただきます。ご了承下さい。