▼・ェ・▼にっき。

ゲームをこよなく愛する▼・ェ・▼のメインBlogデス

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

 

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

 

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

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

 

 

 

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

 

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

 

こんな感じデス。

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

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

 

 

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

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

 

 

design.syofuso.com

 

 

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

他にも可愛いデザインを色々とシェアしてくださっているので少しずつ取り入れちゃおう!

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

 

 

早速、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: '';
}

 

 

▼・ェ・▼が変更したのは色付きの分部ダヨ!

 

 

可愛い色とデザインになって優しい雰囲気になりました!((( *´꒳`* )))ポワワーン


カラーコードは、▼・ェ・▼にっき。では毎度お馴染みのコチラ

 

www.colordic.org



和色大辞典さまデス!
柔らかい印象の色がたくさんあるよ♪٩(ˊᗜˋ*)و
いつもお世話になっております!


ってところで、今日はおしまいデス!

みなさまも 良いBlog Life を!*ଘ(੭*ˊᵕˋ)੭* ੈ✩‧₊˚

 

 

゚*。.ღ ⊹⊱  £ονё & βLёss уoц  ⊰⊹ ღ.。*゚

 

Thank you.

I love you.