読者です 読者をやめる 読者になる 読者になる

しえのにっき

何者にもなりたくないし、何者にもなりたい

【調べてみた】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;

}

 

こちらからお借りしました。

www.north-geek.com

 

 

上記の記述を参考に、

下記の#から始まる箇所を、色見本を参考に自分好みに変更してください。

色のコードについては、次のようなサイトをご参考ください。

www.colordic.org

 

もう何がなんだか分かんねえよって人は、

#○○ってなってる箇所を、とにかく色見本からコピペしって変更!!!!

※変更を保存して、確認しながらごちゃごちゃしてみてください。

 

変更する箇所

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

▼文字の色

color: #333333;

 

 

▼背景(枠の中) ※私のは白になってます。

background: #ffffff;

border-top: 10px solid #ffffff;

 ※ background が「背景」のことを指しています。

 ※2箇所、変更する必要があります。

 

 

▼枠線

border: 3px solid #FFFF00;

border-top: 13px solid #FFFF00;

 ※ border が「枠線」のことを指しています。

 ※2箇所、変更する必要があります。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

 

これで、さらに、あなたらしいブログとなるはずです!

役に立ってればいいな!!