すごく見栄えがよくなった！Bloggerの見出し＜h2＞、小見出し＜h3＞、順見出し＜h4＞活用方法のCSSデザイン

おすすめ記事ピックアップ

やって見たらすごく見栄えが良くなりました。同じ文章を2つ比較で掲載しています。比べて見てください。

Bloggerには、見出し＜h2＞、小見出し＜h3＞、順見出し＜h4＞という、3つの見出し設定が用意されています。エディター画面から簡単に設定できます。見出し＜h2＞は、テンプレートのタイトルなどの設定に使われていることもあり、Bloggerの多くの人は小見出し＜h3＞を使っているような気がします。どうでしょうね。

エディターから選択できるよ

この＜h2＞＜h3＞＜h4＞という見出しは、重要度が高い順に、階層のように使います。でも実際には、ブログの文章を階層化して、重要度ごとに分類するのは難しいです。ダラダラ書くのがブログですから。結局、見出しは1つしか使わないことが多いです。

例：
＜h2＞大見出し
　＜h3＞小見出し
　　　＜h4＞順見出し
　　　＜h4＞順見出し
　＜h3＞小見出し
　　　＜h4＞順見出し
　　　＜h4＞順見出し

なので、あまり必要性が少ないのですが＜h2＞＜h3＞＜h4＞のCSSデザインを作ってみました。本来SEO的には良くないとされている装飾的な使い方です。

見出しタグを使わずに、DIVタグでデザインすれば？という意見もごもっともですが、HTML画面から追記するのは面倒くさいのです。見出しタグならエディターから指定できます。

こんな割り振りにしてみました。

＜h2＞－まとめた意見
＜h3＞－文章の見出し
＜h4＞－画像等に対する吹き出し

CSSはこちらです。もちろん使う時は、それぞれ最適に変更してください。

/*------------------------------------------------------
見出し
------------------------------------------------------*/
.post-body h2{
text-align: center;
font-size: 25px;
position: relative;
color: #fff;
background: #2A3042;
line-height: 1;
text-shadow: 1px 1px 1px #000;
border: 1px solid #2A3042;
margin: 20px 0px 10px 0px;
padding: 15px 5px 12px 14px;
border-radius: 0px;
border: 12px solid #3498db;
}

.post-body h2:after {
content: "";
position: absolute;
top: 100%;
left: 50%;
height: 0;
width: 0;
border: 10px solid transparent;
border-top: 10px solid #2A3042;
}



/*------------------------------------------------------
小見出し
------------------------------------------------------*/

.post-body h3 {
font-size:25px;
border-left: 5px solid #F15252;
margin: 30px 0 30px;
padding-left: 10px;
font-weight: bold;
}



/*------------------------------------------------------
順見出し
------------------------------------------------------*/

.post-body h4 {
  position: relative;
  color: #111;
  background: #fff;
  font-size: 20px;
  line-height: 1;
  border :2px solid #555;
  margin: 0px 0px 16px 0px;
  padding: 15px 5px 12px 10px;
  border-radius: 3px;
}
.post-body h4:after,h4:before {
  content: "";
  position: absolute;
  top: 100%;
  height: 0;
  width: 0;
}
.post-body h4:after {
  left: 33px;
  border: 11px solid transparent;
  border-top: 11px solid #fff;
}
.post-body h4:before {
  left: 30px;
  border: 14px solid transparent;
  border-top: 14px solid #555;
}

上記の設定を使って同じ文章を装飾してみました。想像以上に良くなりました！

見出しの使い方

Bloggerには、見出し＜h2＞、小見出し＜h3＞、順見出し＜h4＞という、3つの見出し設定が用意されています。エディター画面から簡単に設定できます。見出し＜h2＞は、テンプレートのタイトルなどの設定に使われていることもあり、Bloggerの多くの人は小見出し＜h3＞を使っているような気がします。どうでしょうね。

エディタから指定できます。

重要度の高い順

この＜h2＞＜h3＞＜h4＞という見出しは、重要度が高い順に、階層のように使います。でも実際はブログの文章を階層化して、重要度ごとに分類するのは難しいです。ダラダラ書くのがブログですから。結局、見出しは1つしか使わないことが多いです。

こんな風に使います！

＜h2＞大見出し
　＜h3＞小見出し
　　　＜h4＞順見出し
　　　＜h4＞順見出し
　＜h3＞小見出し
　　　＜h4＞順見出し
　　　＜h4＞順見出し

装飾的な使い方

なので、あまり必要性が少ないのですが＜h2＞＜h3＞＜h4＞のCSSデザインを作ってみました。本来SEO的には良くないとされている装飾的な使い方です。

見出しタグを使わずに、DIVタグでデザインすれば？という意見もごもっともですが、HTML画面から追記するのは面倒くさいのです。見出しタグならエディターから指定できます。

こんな割り振りにしてみました。

＜h2＞－まとめた意見
＜h3＞－文章の見出し
＜h4＞－画像等に対する吹き出し

/*------------------------------------------------------
見出し
------------------------------------------------------*/
.post-body h2{
text-align: center;
font-size: 25px;
position: relative;
color: #fff;
background: #2A3042;
line-height: 1;
text-shadow: 1px 1px 1px #000;
border: 1px solid #2A3042;
margin: 20px 0px 10px 0px;
padding: 15px 5px 12px 14px;
border-radius: 0px;
border: 12px solid #3498db;
}

.post-body h2:after {
content: "";
position: absolute;
top: 100%;
left: 50%;
height: 0;
width: 0;
border: 10px solid transparent;
border-top: 10px solid #2A3042;
}



/*------------------------------------------------------
小見出し
------------------------------------------------------*/

.post-body h3 {
font-size:25px;
border-left: 5px solid #F15252;
margin: 30px 0 30px;
padding-left: 10px;
font-weight: bold;
}



/*------------------------------------------------------
順見出し
------------------------------------------------------*/

.post-body h4 {
  position: relative;
  color: #111;
  background: #fff;
  font-size: 20px;
  line-height: 1;
  border :2px solid #555;
  margin: 0px 0px 16px 0px;
  padding: 15px 5px 12px 10px;
  border-radius: 3px;
}
.post-body h4:after,h4:before {
  content: "";
  position: absolute;
  top: 100%;
  height: 0;
  width: 0;
}
.post-body h4:after {
  left: 33px;
  border: 11px solid transparent;
  border-top: 11px solid #fff;
}
.post-body h4:before {
  left: 30px;
  border: 14px solid transparent;
  border-top: 14px solid #555;
}

良いと思ったらシェアください！

＜h2＞など、見出しタグで装飾してはいけないのですが、装飾したらとっても見栄えがよくなりました。比べて見てください。http://t.co/KUVDX586eq
— Saijo－ふりむけばコウホウ (@furimuke) 2014, 8月 17

吹き出しはこちら参考にしました。

CSSの擬似要素を使った見出しデザイン
http://weboook.blog22.fc2.com/blog-entry-348.html

追記：装飾のカラーなどを変更したかったら

Chormeなどで、ブラウザーの要素検証を使いCSSの情報を確認して、色などの要素をリアルタイムで変更して、良くなったらそれをコピーすれば、うまく変更できますよ。IEやFireFoxでも似たような機能があります。

Chormeの場合は、右クリックをして「要素を検証」を選ぶと、したにコードのエリアが出てきます。「虫めがね」を選択して、該当箇所にカーソルを合わせて選択すると、その部分のCSSが出てきます。そこの色や数値を変更すれば、リアルタイムで反映されます。

良いバランスになったら、右下のCSSをコピーすればOKです。