Cocoonでサイドバーの見出しのカラーだけを変更する方法

 

Cocoon設定内では、サイドバーの見出しのカラー変更は個別ではできません。でも、ほんの少しだけCSSコードを書き加えると、個別で思い通りのカラーに変更することができます。

 

書き加えるCSSコード

.sidebar h3 {
    background-color: #fdeff2;
}

コピーOKです！
#fdeff2　の部分をお好きなカラーコードに変更してください。

カラーコード掲載サイト
配色の見本帳
https://ironodata.info/

和色大辞典
https://www.colordic.org/w

 

CSSコードを書き加える場所

  1. WordPress管理画面 左側メニュー 外観 → カスタマイズ をクリック
  2. 現在のテーマが Cocoon Child になっている事を確認
  3. 追加CSSをクリック
  4. 上記のCSSコードを書き加えて（ペーストして）「公開」をクリック

カラーコードの後の「;」や「}」が抜けないように注意してくださいね。

これで完成です！

 

Cocoon設定の「全体」でキーカラーを変更すると
ヘッダー、フッター、サイドバー見出しのカラーが変わるのですが
アイキャッチ画像内のカテゴリー表示や各ページの下部にあるパーツの罫線まで
キーカラーになってしまいます。

ヘッダー、フッターはCocoon設定内で個別にカラー変更ができます。

コメント