【調べてみた】CSS 見出し[吹き出しタイプ] の色を変える方法【カスタマイズ】
しえです。
今回は、私が使っている見出しデザインの変更について、ご紹介します。
どこを変更すればいいのか、少し苦労したので、
ご参考になれば。
見出しとはこれのことです。
そして、私が使ってるこの見出しのcssの記述はコチラ。
※変更した箇所を色分けしました。
.entry-content h3 {
position: relative;
color: #333333;
background: #ffffff;
font-size: 16pt ;
border: 3px solid #FFFF00;
margin: 10px 10px 23px 10px;
padding: 10px 5px 10px 10px;
border-radius: 3px;
}
.entry-content h3:after, .entry-content h3:before {
content: "";
position: absolute;
top: 100%;
height: 0;
width: 0;
}
.entry-content h3:after {
left: 40px;
border: 10px solid transparent;
border-top: 10px solid #ffffff;
}
.entry-content h3:before {
left: 37px;
border: 13px solid transparent;
border-top: 13px solid #FFFF00;
}
こちらからお借りしました。
上記の記述を参考に、
下記の＃から始まる箇所を、色見本を参考に自分好みに変更してください。
色のコードについては、次のようなサイトをご参考ください。
もう何がなんだか分かんねえよって人は、
＃○○○○○○ってなってる箇所を、とにかく色見本からコピペしって変更！！！！
※変更を保存して、確認しながらごちゃごちゃしてみてください。
変更する箇所
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
▼文字の色
color: #333333;
▼背景（枠の中） ※私のは白になってます。
background: #ffffff;
border-top: 10px solid #ffffff;
※ background が「背景」のことを指しています。
※2箇所、変更する必要があります。
▼枠線
border: 3px solid #FFFF00;
border-top: 13px solid #FFFF00;
※ border が「枠線」のことを指しています。
※2箇所、変更する必要があります。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
これで、さらに、あなたらしいブログとなるはずです！
役に立ってればいいな！！
