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

  • アメブロ
  • このエントリーをはてなブックマークに追加
アメブロ記事内の見出し

CSS編集用デザイン適用済みのアメブロの記事内の見出し(h2、h3、h4)タグの表示をカスタマイズする方法です。

アメブロの最新版エディタで、以下の見出しタグが、HTMLを記述しなくても簡単に使えるようになりました。

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

そこで当記事では、これら記事内の見出しタグの表示をカスタマイズ方法(一例)をご紹介したいと思います。

初期状態を確認

見出しタグ(h2、h3、h4)は、旧来のエディタでも普通にHTMLタグとして書けばアメブロでも使えましたが、最新版エディタで、とても簡単に使えるようになりました。

これらの見出しタグは、アメブロの記事内で(全くカスタマイズしていない状態)の表示は次の画像のように表示されます(色付きの丸い囲みは表示されません)

大見出しのh2、中見出しのh3、小見出しのh4タグの順に大きい文字で表示されるようになっています。

これはこれでわかりやすいと思うのですが、せっかくなので、当記事では少し装飾を付けてみたいと思います。

枠線を使って装飾する

そこで、CSSのborderという(枠線を付ける)プロパティを利用した、以下のコードをブログデザインCSSの末尾に追加してみましょう。

/* 記事内の見出しタグを装飾する */
.skin-entryBody h2 { /* 大見出しh2 */
  border-left: 8px solid #000;
  border-bttom: 1px solid #000;
  padding-left: 10px;
}
.skin-entryBody h3 { /* 中見出しh2 */
  border-left: 8px solid #999;
  padding-left: 10px;
}
.skin-entryBody h4 { /* 小見出しh2 */
  border-bottom: 1px dashed #999;
}

これで、以下の画像のような表示になります(色付きの丸い囲みは表示されません)

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

もしh2、h3、h4タグだけをCSSセレクタに指定したら

ちなみに、上記コードでは「.skin-entryBody h2」などとなっているCSSのセレクタを単に「h2」のようにしても、記事内の見出しタグの装飾はうまく設定できます。

ですが、ページ内の他の部分に使われている同じ見出しタグが影響を受けてしまいますので、注意してください。

例えば、以下のようなコードです。

/* 問題があるのでおすすめしない版 */
h2 {
  border-left: 8px solid #000;
  border-bttom: 1px solid #000;
  padding-left: 10px;
}
h3 {
  border-left: 8px solid #999;
  padding-left: 10px;
}
h4 {
  border-bottom: 1px dashed #999;
}

これをCSSに追加すると、個別記事ページではサイドバーのウィジェット(サイドバーのパーツ)のタイトルが、記事内の中見出しと同じh3タグなので影響を受けてしまいます。

さらに、トップページを開いてみると、

記事タイトルが記事内の大見出しと同じh2タグになり影響を受けてしまいます。

これは、個別記事ページでは記事タイトルがh1タグが使われています(ブログタイトルには見出しタグはない)が、トップページなどではブログタイトルにh1タグ、記事タイトルにはh2タグが使われているためです。

もちろん、タイルタイプやリストタイプのトップページも同様に、記事タイトルがh2タグなので影響を受けます。

というわけで、CSSのセレクタは単にh2、h3、h4を指定しただけではうまく行きませんのでご注意下さい。

まとめ

以上、アメブロ記事内の見出し(h2,h3,h4)をカスタマイズする方法を、簡単な例を一つあげてご紹介しました。

もしよかったら、これをヒントにもっと素敵なカスタマイズを考えてみてもらえたらと思います。

あと、見出しタグ単体(h2、h3、h4)をCSSセレクタに指定すると、一見うまく行ったように見えます実は使えないことも、どうぞ気をつけてください。

関連記事

  • アメブロ
  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。

コメントを残す