【simplicity】見出しタグをカスタマイズ。h2,h3,h4を色変更でブログをあなた色に染める

h2タグのカスタマイズ

h2タグはインパクト重視。濃い目のカラーに白抜きの文字にしました。

.article h2 {
  background-color: #1eae93;/* 見出し背景色 */
  border-left: 0 none;
  color: #fff;/* 文字の色 */
  padding: 15px 30px;/* 文字の位置 */
    margin-bottom: 35px;/* 見出し下の空白*/
}

h3タグのカスタマイズ

h3タグはh2タグを目立たせたいので薄い線にしました。

.article h3 {
    border-bottom: 10px solid #b5f2e7;
    padding: 10px 0 0 0;
    margin-bottom: 30px;
}

h4タグのカスタマイズ

h4タグはわたしのサイトのテーマカラーでワンポイントのアクセントにしました。

.article h4 {
    border-left: 30px solid #b5f2e7;
    border-bottom: 0px;
    padding: 5px 0 5px 10px;
    margin-bottom: 30px;
}

サイドバーの見出し変更

サイドバーは少し遊んでみました。

#sidebar h4 {
    position: relative;
    color: #444;
    font-size: 1.143em;
    font-weight: bold;
    margin: 0 0 1.5em;
    padding: 0.5em 0.5em 0.5em 1.7em;
    border-bottom: 3px solid #0cdfb9;
}
 
#sidebar h4:before{
    content: "";
    position: absolute;
    background: #0cdfb9;
    top: 0;
    left: 0.4em;
    height: 12px;
    width: 12px;
    transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
}
 
#sidebar h4:after{
    content: "";
    position: absolute;
    background:#0cdfb9;
    top: 1.0em;
    left: 0;
    height: 8px;
    width: 8px;
    transform: rotate(15deg);
    -moz-transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
    -o-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
}

Q. CSSを変更したのにブログに反映されないんですけど？

わたしはあまり詳しくないのですが、下記の方法で大体解決します。

Q. 見出しタグの下の空白が空きすぎてイヤなんですけど？

当ブログはシンプリシティのデフォルトの設定より文字間の空白を多く取ってます。

margin-bottom:が見出しタグ下の空白の量になります。pxの前の数字をあなた好みに調節してください。

【例】　margin-bottom: 30px;　⇒　margin-bottom: 10px;

Q. こんな色はうちのブログに合わないんだけど？

「#6ケタの文字」の部分が色を表します。ここを変更するとあなた好みの色に変更できます。

【例】 background-color: #1eae93;　⇒　 background-color: #ffa500;　

色に関してはコチラのサイトが参考になります。

Q. もっと違う見出しデザインはないの？

もっと別の見出しデザインにしたいと思うあなたにオススメのサイトはコチラ。17種類の見出しデザインが一覧になっております。

わたしも参考にしております。