こんなことで困っていませんか？
Cocoonのスキン「てがきノート」のカラー設定を変更して使っていて、更新がくる度に、設定した色が元に戻ってしまう。
そして、気づくたびに style.css を開いて、カラーコードを修正する……。
私の場合、あまりに頻繁に起こるので、2024年から回数を記録していました。
その結果、2026年8月までの2年ちょっとで、36回。
平均すると月1.2回程度です。
しかも2026年は、8月時点ですでに9回。
さすがに「これはもう、何とかしよう」と思いました。
「てがきノート」のカラー変更はどこでする？
なぜ、設定した色が元に戻るの？
Cocoon親テーマの中にあるスキンの style.css。
└ skins
└ てがきノート・skin-tegakinote-○○○
└ style.css
ここでカラー変更していると、Cocoonやスキンの更新によって、このファイルが更新されることがあります。
すると、自分で変更した部分も上書きされて(初期化されて)しまいます。
↓
更新
↓
親テーマのファイルが更新
↓
カラー設定が元に戻る
親テーマを直接編集するのをやめました
「親テーマが更新されるたびに消えてしまうなら、親テーマで調整するのをやめよう」
そう思って、ようやく重い腰を上げました。
……実は、そう考えてから実行するまで2年以上かかっています（笑）。
もっと早くやればよかった。
そんな中で「てがきノート」に移行してみたところ、「親テーマで変更を」との案内があり、実は最初に「ん？」と感じてしまったんです。
WordPressでは、子テーマでカスタマイズすることで、親テーマを更新しても自分で加えた変更を残しておけます。
私は「スキンなし」にしました
私が選んだのは、単純に「子テーマにカラー設定だけを書く」という方法ではありません。
「てがきノート」のデザインを気に入って、
・カラー変更
・文字サイズの変更
・見出しの変更
・ボタンやボックスの調整
・その他いろいろなCSSの追加
を重ねて、自分の希望するサイトデザインを作り上げてきました。
そのため、目指したのは、
今まで作ってきたデザインをそのまま残しながら、毎月のカラー修正だけをなくすこと。
そこで、Cocoonの設定を「スキンなし」に変更し、「てがきノート」のCSSを必要な部分だけ子テーマへ移しました。
「てがきノート」のCSSを全部コピーする必要はありません
「てがきノート」の「style.css 全部」をそのままコピーしません。
現在運営しているサイトで必要な部分を子テーマへ移植するのです。
「これは残したい」というデザインだけを、子テーマの style.css に移します。
私の場合は、たとえば「てがきノート」の特徴的な見た目は残しつつ、
・方眼紙のような背景
・目次の方眼背景
・H2のもじゃもじゃ線
・フェードイン表示
など、使っていなかった装飾は移植しませんでした。
こうすると、自分のサイトに必要なCSSだけを、自分で管理できるようになります。
やらないほうがいいこと
私が今までやっていた方法です。
親テーマの style.css を直接編集する。
一時的には、これで問題なくカラーを変更できます。
でも、更新が来る度に、また最初から設定し直すことになります。
私はこれを2年以上繰り返して、36回以上修正してきました。
やること
親テーマではなく、Cocoon Childの style.css を編集します。
子テーマでカスタマイズしておけば、親テーマの更新が来ても、自分で加えたCSSは上書きされずに残ります。
├ 親テーマ
│ └ skins
│ └ てがきノート
│ └ style.css ← もう編集しない
│
└ Cocoon Child
└ style.css ← こちらを自分で管理
まとめ
「てがきノート」のカラー変更そのものは、公式サイトの説明どおり、スキンの style.css にある :root で変更できます。
ただ、私は長期間使ううちに、
「更新の度にカラーを入れ直すのは、もうやめたい」と思うようになりました。
そこで、カラー変更の方法を模索し、毎月の修正から解放される道を見つけました。
↓
Cocoonを「スキンなし」にする
↓
必要な「てがきノート」のCSSを子テーマへ移す
今後は、更新が来る度に style.css を開いてカラーコードを書き直す必要がありません。
もっと早くやればよかった。
というのが、今の一番の感想です。
