ミックススキン、サムライブルー、ダークスキンを適用した後に、Cocoonのサイトキーカラーを設定すると、次のようにサイドバーの見出しの背景がサイトキーの色に変わります。
サイトキーカラーを赤に設定した場合
このままでもいいのであれば、この記事を読む必要はありません。
もし、サイドバーの見出しをスキンの見出しのままにするか、スキンの見出しを消してサイトキーのカラーに変更したいのであれば、今回紹介する方法をためしてください。
サイトキーのカラーとは?
サイトキーカラーというのは、Cocoon設定の「全体」で設定できる「キーカラー」のことです。
↓
サイトキーカラーのところにも書いているように、サイト全体のポイントなる部分に適用され、サイドバーの見出しの色や、投稿本文の見出しや「次のページ」ボタンなどの色が変更されます。
子テーマのCSSにコードを追加する手順
今から紹介する方法は、子テーマのCSSにコードを追加する必要があります。
追加手順は次の通り。
1. WordPressの管理画面にログインし、左のメニューの『外観』→『テーマエディター』を選択。
2. 「テーマの編集」画面の右上にある「編集するテーマを選択」が「Cocoon Child(子テーマ)」になっていることを確認。
3. そして、編集画面の一番下にCSSのコードを追加し、「ファイルを更新」ボタンを押します。
※下の画像は実際にコードを追加した後のイメージ。
以降で、追加するコードを紹介していきます。
サイトキーのカラーを変更してもスキンの見出しを残したい場合
サイトキーのカラーを変更しても、スキンの見出しを残す時のCSSコードです。
サムライブルースキンの見出しを残す
以下は、サムライブルー(無印、褐色)の追加CSSコードです。
/* サムライブルースキンのサイドバーを残す */ .sidebar h3 { color: #282d48; background: none; }
このコードを前述の「テーマエディター」の一番下に追加して「ファイルを更新」すると、次のようにスキンの見出しが残ります。
ミックススキンの見出しを残す
ミックスシリーズ(グリーン、ブルー、レッド)用の追加CSSコード。
/* ミックススキンのサイドバーを残す */ .sidebar h3 { color: #333435; background: none; }
こちらもコードを適用すると、スキンの見出しが残ります。
ダークスキンの見出しを残す
ダークスキン(エンジ、リル、カモノハ)の追加CSSコード。
/* ダークスキンのサイドバーを残す */ .sidebar h3 { color: #d3d3d3; background: none; }
コード適用で、スキンの見出しが残ります。
サイトキーのカラーを変更してスキンの見出しを消したい場合
次は、スキンの見出しを消したい場合です。
以降のCSSのコードを適用すると、次のようにスキンの見出しが消えて設定したサイトキーカラーの見出しとなります。
サムライブルースキンの見出しを消す
サムライブルー(無印、褐色)の追加CSSコードです。
/* サムライブルースキンのサイドバーを消す */ .sidebar h3 { border: none; padding: 16px 10px; margin: 16px 0; } .sidebar h3:before, .sidebar h3:after { content: none; }
このコードを前述の「テーマエディター」の一番下に追加して「ファイルを更新」すると、スキンの見出しが消えます。
ミックススキンの見出しを消す
ミックスシリーズ(グリーン、ブルー、レッド)用の追加CSSコード。
/* ミックススキンのサイドバーを消す */ .sidebar h3 { border: none; padding: 16px 10px; margin: 16px 0; } .sidebar h3:after { content: none; }
同様に、このコードを「テーマエディター」に追加すると、スキンの見出しが消えます。
ダークスキンの見出しを残す
ダークスキン(エンジ、リル、カモノハ)の追加CSSコード。
/* ダークスキンのサイドバーを消す */ .sidebar h3 { border: none; padding: 12px; margin: 16px 0; } .sidebar h3::before, .sidebar h3::after { content: none; }
このコードを「テーマエディター」に追加してください。
まとめ
今回初回した方法は、「子テーマ」のCSSにコードを追加するので、今後Cocoonをバージョンアップしても問題ありません。(コードは消えない)
冒頭でも書きましたが、サイトキーカラーを設定するとサイドバーの見出し以外にも色が変わる項目があるので、スキンを適用した後にサイトキーカラーを設定する場合は、十分気をつけましょう。
コメント