すごく見栄えがよくなった!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;
}

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


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

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

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

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

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

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









いいね!と思ったらお願いします。


名前

AddToAny adsence adwords Amazon AmazonFBA Calculator Analytics Blogger BMAG chrome CODEPREP Eclipse envato facebook FAQ feedly Font Awesome Geek Press Gifzo Illustrator kindle LinkWithin Logaster myfonts NAVER Photoshop PHP picasa Premiere Similarweb TOPSY tumblr Wordpress wpX XAMPP zenback ウェブマスターツール ウハウハモウケタイ カスタマイズ ゲストシリーズ ココナラ サイト制作 ドメイン はじめに プレスリリース プレスリリース作成 プレスリリース利点 まとめ ランディングページ リリース送付先の見つけ方 レビュー 考察 子孫セレクタ 思いつきサイト制作 書評 足成 台湾 通販 日記 忍者おまとめボタン 文章の基本
false
ltr
item
ふりむけばコウホウ : すごく見栄えがよくなった!Bloggerの見出し<h2>、小見出し<h3>、順見出し<h4>活用方法のCSSデザイン
すごく見栄えがよくなった!Bloggerの見出し<h2>、小見出し<h3>、順見出し<h4>活用方法のCSSデザイン
http://1.bp.blogspot.com/-BwxZOGOCd6s/U_B29G1573I/AAAAAAAATZ8/fhzoAPZW-Cw/s1600/06.png
http://1.bp.blogspot.com/-BwxZOGOCd6s/U_B29G1573I/AAAAAAAATZ8/fhzoAPZW-Cw/s72-c/06.png
ふりむけばコウホウ
http://www.furimuke.com/2014/08/bloggerh2h3h4css.html
http://www.furimuke.com/
http://www.furimuke.com/
http://www.furimuke.com/2014/08/bloggerh2h3h4css.html
true
8618648785166852656
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All 関連記事:もっと見るはクリック→ LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy