見出しのデザインを変更する

f:id:bless-you:20170522101305j:plain

見出しのデザインを可愛くしたい！！

そんなカスタマイズについてのお話しﾃﾞｽ。

Brooklyn の見出しは、デフォルトだと･･･

f:id:bless-you:20170522101631j:plain

こんな感じﾃﾞｽ。

シンプルで悪くはないんですけども！

▼・ｪ・▼のブログでは何だか素っ気なくて浮いちゃう。

なので、「可愛いデザインないかなぁぁん？」

‥と彷徨っておりましたらば！！

可愛いデザインのシェアをしてくださっているブログを発見！！(๑•̀ㅂ•́)و✧

他にも可愛いデザインを色々とシェアしてくださっているので

少しずつ取り入れちゃおう！

先生ありがとうございます♡

早速、h3 & h4 のデザインを変更します！

f:id:bless-you:20170523020821j:plain

h3 （大見出し）のコードは以下。

デザイン ▶ カスタマイズ ▶ 「CSS」に貼り付けます。

/* h3 （大見出し） */
.entry-content h2 {
 font-size: 140%;/* 見出しの文字サイズ */
 color: #fef4f4;/* 見出しの文字色 */
 font-family: "Avenir Next", "century gothic", "Helvetica Neue", Helvetica, Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;/* 見出しのフォント */
 height:40px;
 line-height: 40px;
 position: relative;
 padding: 0.2em 0.5em;
 background-color: #d69090;/* 見出しの色 */
 box-shadow: 0px 0px 0px 5px #d69090;
 border: 1px dashed #fdeff2;/* ステッチの色 */
}
.entry-content h3::before,
.entry-content h3::after {
 content: '';
 position: absolute;
 border-style: solid;
 border-color: transparent;
}
.entry-content h2::before {
 top: 54px;
 left: -6px;
 border-width: 0 15px 15px 0;
 border-right-color: #a86965;/* リボンの折り返し裏側の色 */
}

f:id:bless-you:20170523021038j:plain

h4 （中見出し）のコードは以下。

デザイン ▶ カスタマイズ ▶ 「CSS」に貼り付けます。

/* h4（中見出し） */
.entry-content h4 {
 position: relative;
 color: #316745;/* 見出しの文字色 */
 padding: 8px 12px;
 background-color: #9ba88d;/* 見出しの色 */
 border-radius: 6px;
}
.entry-content h4::before{
 position: absolute;
 top: 100%;
 left: 32px;
 width: 0;
 height: 0;
 border-width: 10px;
 border-style: solid;
 border-color: transparent;
 border-top-color: #9ba88d;/* 見出し吹き出し部分の色 */
 content: '';
}