cocoon備忘録

【初心者】cocoonの見出し2と3、見た目同じなのでcssで変更してみた

見出し

 

こんにちは、ごま子です。

前回せっかく見出しの色を揃えたのに、よく見ると見出し2と3の区別がつかない(汗)

↓ ↓

 

ということで、今回は「見出し3だけ変更」してみました。

本当に初心者なので、他の方のこだわりの見出しをみると寂しいですが・・・備忘録なので気にしないでね!

 

 

スポンサーリンク

見出し3を下の図のようにしたい

 

見出し

今回は上の見出しのように「見出し3」だけ細い線に変更してみました。

 

css行きますね。

では、早速css書きます。

「cocoon設定>外観>カスタマイズ>追加css」を開く。

 

1、まず下記のcssをカスタマイズ欄にコピペ。

これで元の見出しの設定を一旦リセットできます(実行したら見出しが消えてるはず)

/*見出しをリセット*/
.article h3{
padding: 0.6em;/*余白*/
background: none;/*背景色をリセット*/
border: none;/*線をリセット*/
}

2、続いて二本線に書き換えるので、下記をコピペ。

.article h3 {
color: #808000; /*文字の色を変更*/
padding: .5em 0.5;
margin-top: 40px;
border-top: 1px solid #727171; /*線の色を変更*/
border-bottom: 1px solid #727171; /*線の色を変更*/
}
これで見出し3が上下の二本線になりました。
今回もカスタマイズって程ではないけど、シンプルな見た目になりました~!
初心者さん是非参考にされて下さいね。
スポンサーリンク
シェアしてもらったら嬉しいです
ひきこも日記