【Cocoon】見出しを変更したのに反映されない時の対処法(CSSカスタマイズ)

【Cocoon】見出しを変更したのに反映されない時の対処法(CSSカスタマイズ) WordPress
この記事は約2分で読めます。

ブロックプラグインを導入したので、Coccon(コクーン)の見出し(h2、h3)色を揃えようと思い、CSSをカスタマイズしましたが…

変更が反映されませんでした。

今回の原因はCSSの書き方が悪かったので、本記事で紹介していこうと思います。

うめ
うめ

CSS初心者なので勉強になりました…。

この記事でわかること

Cocconで見出しのカスタマイズが反映されない時の対象法!

スポンサーリンク
[ad01]

スタイルシートのカスタマイズ準備

外観」⇒「テーマエディタ」を選択

Cocoon Child: style.css

スタイルシート(style.css)は子テーマの「Cocoon Child: style.css」を使用しましょう。

カスタマイズが反映されない原因

結論は…「border: 0;」を入れないと色が変わらないことがわかりました。

/*見出し2*/
.article h2{
background-color: #6FC7E1;
}

border: 0;をコード内に記載すると「デフォルトの枠線を消す」という指示になるため、次の行で色を指定できるようになります。

/*見出し2*/
.article h2{
border: 0;
background-color: #6FC7E1;
}

注意点

もう一つダメなパターンですが、CSSコードの冒頭を「h2」と記述するとブログ内全ての見出し2(h2)が影響を受けます。

Coccon記事内の見出しだけを指定する場合には必ず「article h2」としましょう。

/*見出し2*/
h2{
background-color: #6FC7E1;
}

まとめ

Cocconの見出しを変えたのに反映されない時の対処法をご紹介しました。

CSSを追加したのに反映されないと焦ってしまいますが、落ち着いてコードの記述を確認しましょう。

この記事が気に入ったら
いいね ! しよう

Twitter で
タイトルとURLをコピーしました