CocoonのデザインをCSSで変えたいとき、最初に迷うのが「追加CSSと子テーマのどちらを使うか」です。結論は単純で、少量の見た目調整なら追加CSS、長期運用するコードやPHPを含む変更なら子テーマが向いています。親テーマのファイルを直接編集する方法は、更新時に変更を失う可能性があるため避けてください。
この記事では、Cocoon子テーマの導入と追加CSSの使い分けを、バックアップ、反映確認、元に戻す方法まで含めて解説します。コピーしたコードを貼るだけではなく、「どこへ置けば安全か」を判断できる状態を目指します。
Cocoonの親テーマ・子テーマ・追加CSSの違い
親テーマはCocoon本体です。表示に必要なテンプレートや機能がそろっており、機能改善や不具合修正のために更新されます。子テーマは親テーマを土台として、ユーザー独自の変更だけを分けて保存する仕組みです。
| 方法 | 向いている変更 | 更新への強さ | 注意点 |
|---|---|---|---|
| Cocoon設定 | 色、ヘッダー、一覧、OGPなど | 高い | スキンとの優先関係を確認 |
| 追加CSS | 余白、枠線、文字サイズ | 高い | テーマを替えると適用されない |
| 子テーマ | 継続的なCSS、PHP、テンプレート | 高い | コードの保守が必要 |
| 親テーマ直接編集 | 原則として使わない | 低い | 更新で上書きされる可能性 |
WordPress公式の開発資料でも、子テーマは親テーマを直接変更せずにカスタマイズを分離し、親テーマを更新しても変更を保持するための仕組みと説明されています。ただし、子テーマなら何をしても安全という意味ではありません。古いテンプレートを複製している場合、親テーマ側の改善が自動で入らないことがあります。
追加CSSと子テーマを選ぶ判断基準
変更内容を「見た目だけか」「機能にも関わるか」「別環境へ持ち運びたいか」で分類すると判断しやすくなります。迷う段階では、元へ戻しやすい追加CSSから始めて構いません。
追加CSSが向いているケース
- 見出しの余白や枠線を少し変える
- リンクやボタンの色を調整する
- 数行から数十行程度のCSSを試す
- プレビューしながら変更したい
WordPressのカスタマイザーにある追加CSSは、変更をプレビューしてから保存できます。Cocoonはクラシックテーマなので、通常は「外観」→「カスタマイズ」→「追加CSS」から利用できます。
子テーマが向いているケース
- CSSを用途別に整理し、長く保守する
- functions.phpで機能を追加する
- テンプレートファイルを上書きする
- テスト環境と本番環境へ同じ変更を移す
子テーマはカスタマイズをファイルとして管理できます。変更履歴をGitなどで残したい場合にも適しています。一方、管理画面から見た目を少し変えるだけなら、最初から複雑な構成にする必要はありません。
作業前に必ず行う3つの準備
子テーマの有効化やPHP編集はサイト全体へ影響します。作業前の準備を省くと、画面が真っ白になったときに復旧手段が分かりません。
- ファイルとデータベースをバックアップする：サーバーの自動バックアップ日時だけでなく、復元画面と必要な権限を確認します。
- 現在の有効テーマとバージョンを記録する：「外観」→「テーマ」やCocoonの情報画面で確認します。
- サーバーのファイル管理手段を確保する：管理画面へ入れなくなっても、ファイルマネージャーやSFTPで子テーマを無効化できる状態にします。
可能であれば、本番サイトの複製であるステージング環境を使います。少なくともアクセスが少ない時間を選び、1回の作業で変更する内容を一つに絞ってください。
Cocoon子テーマを導入する手順
Cocoonでは公式サイトから親テーマとは別に子テーマを入手できます。配布元が不明なファイルは使わず、公式配布ページから取得してください。以下はWordPress管理画面から導入する基本の流れです。
- Cocoon公式サイトから子テーマのZIPファイルをダウンロードする
- WordPress管理画面で「外観」→「テーマ」を開く
- 「新しいテーマを追加」→「テーマのアップロード」を選ぶ
- ZIPファイルを選び、「今すぐインストール」を押す
- インストール後、「Cocoon Child」を有効化する
- トップページ、記事、固定ページ、スマートフォン表示を確認する
親テーマは削除しません。子テーマは親テーマの機能を読み込んで動くため、両方がインストールされている必要があります。有効化するのは子テーマです。
すでに親テーマへ直接コードを書いている場合、子テーマを有効化しただけでは変更が移りません。元の変更箇所を特定し、内容を確認したうえで子テーマ側へ移します。親テーマのファイル一式をそのままコピーする方法は、将来の更新を取り込みにくくするため避けましょう。
子テーマ有効化後に設定が変わった場合の確認
テーマを切り替えると、メニューの割り当て、ウィジェット、カスタマイザーの追加CSSなど、テーマに結び付いた設定が変化する場合があります。記事本文が消えたと慌てる前に、表示設定を順番に確認してください。
- 「外観」→「メニュー」で表示位置が割り当てられているか
- 「外観」→「ウィジェット」で部品が別エリアへ移っていないか
- Cocoon設定のスキン、ヘッダー、インデックス設定が意図どおりか
- 追加CSSが現在の子テーマに対して保存されているか
- キャッシュ削除後も表示差が残るか
Cocoon設定のバックアップファイルがある場合でも、サイト全体のすべてが復元されるとは限りません。設定、ウィジェット、メニュー、追加CSS、独自ファイルを別々のものとして考えると、復旧時に迷いにくくなります。
追加CSSへ安全にコードを入れる手順
小さな見た目調整では、「外観」→「カスタマイズ」→「追加CSS」を開きます。プレビュー画面で対象ページへ移動し、変更を確認してから保存します。
- 追加するコードの目的をコメントで書く
- 一つの変更だけを貼り付ける
- PC、タブレット、スマートフォンのプレビューを切り替える
- トップページだけでなく記事と固定ページも確認する
- 問題がなければ公開し、コードの控えを保存する
/* 記事内のH2見出し：上余白と左線の例 */
.article h2 {
margin-top: 2.5em;
padding: 0.7em 0.9em;
border-left: 6px solid #087ec4;
background: #eef9ff;
}これは構造を説明するための例です。スキンによって既存の見出し装飾が異なるため、同じ結果になるとは限りません。既存指定を打ち消すために「!important」を重ねると、後で修正しにくくなります。まずセレクターと読み込み順を確認してください。
子テーマのstyle.cssへ移すタイミング
追加CSSが長くなり、目的別の管理が難しくなったら、子テーマのstyle.cssへ整理する段階です。移行前に追加CSS全文を保存し、コードを機能単位で分けます。
/* =====================
記事見出し
===================== */
/* =====================
ボタン
===================== */
/* =====================
スマートフォン調整
===================== */移したコードを追加CSS側にも残すと二重指定になります。まずテスト環境でstyle.cssへコピーし、表示を確認してから追加CSS側を削除します。ブラウザーやサーバーのキャッシュが残っていると判断を誤るため、変更後に適切なキャッシュを削除してください。
ファイル編集には、WordPress内蔵のテーマファイルエディターより、SFTPやサーバーのファイルマネージャーを使うほうが復旧しやすい場合があります。PHPの構文エラーは管理画面にも入れなくなる可能性があるため、functions.phpは特に慎重に扱います。
functions.phpを編集するときの注意点
子テーマのfunctions.phpは、親テーマのfunctions.phpを置き換えるファイルではありません。通常は親と子の両方が読み込まれます。そのため、親テーマのコードを丸ごとコピーすると、関数名の重複によるエラーが起きる場合があります。
- 親テーマのfunctions.phpを全文コピーしない
- 追加する関数名には独自の接頭辞を付ける
- コードの出典、目的、追加日をコメントで残す
- 1回に1機能だけ追加して動作確認する
- エラー時にファイルを元へ戻せる接続手段を用意する
見た目の変更だけなら、PHPを使わずCSSで解決できないかを先に検討します。ネット上のコードは、公開時点のWordPressやCocoonには合っていても、現在の環境で動くとは限りません。
テンプレートを子テーマへコピーする前に考える
子テーマへ親テーマと同じパスのテンプレートを置くと、子テーマ側が優先される場合があります。自由度は高い反面、親テーマがセキュリティ修正や仕様変更を行っても、コピーした古いファイルには反映されません。
テンプレート変更が必要になったら、まずフック、Cocoon設定、CSSで実現できないか調べます。どうしてもコピーする場合は、元にした親テーマのバージョンと変更行を記録し、Cocoon更新後に差分を確認する運用を決めてください。
表示が崩れたときの戻し方
問題が起きたら、直前の変更だけを戻します。複数の設定やプラグインを同時に触ると原因を切り分けられません。
- 追加CSSなら、直前に追加したブロックを削除して保存する
- style.cssなら、保存しておいた変更前ファイルへ戻す
- functions.phpの編集後にエラーが出たら、サーバー側から変更箇所を戻す
- 子テーマ有効化が原因なら、一時的に親テーマへ切り替えて表示を確認する
- ブラウザー、プラグイン、サーバーのキャッシュを順に確認する
親テーマへ切り替える操作は切り分けのためであり、子テーマのコードを放置したまま原因が消えたと判断しないようにします。エラーログや変更時刻を確認し、どのファイルが原因かを特定してください。
更新後のチェックリスト
WordPress、Cocoon、プラグインの更新後は、カスタマイズが残っているかだけでなく、操作できるかも確認します。短いチェックリストを用意しておくと見落としを減らせます。
- トップページと代表的な記事が表示される
- ヘッダーとモバイルメニューが開く
- お問い合わせフォームを送信できる
- 表、画像、ボタンが画面からはみ出していない
- ブラウザーの開発者ツールに重大なエラーが出ていない
- 管理画面へログインし、投稿を編集できる
よくある質問
Cocoon子テーマは最初から入れたほうがよいですか？
将来CSSやPHPを編集する予定があるなら、早い段階で導入すると変更を整理しやすくなります。Cocoon設定だけで運用する場合、急いでコード編集を始める必要はありません。
追加CSSはCocoon更新で消えますか？
通常、親テーマのファイルを直接編集する場合とは保存場所が異なるため、テーマ更新でそのまま上書きされるものではありません。ただしテーマ切り替え時の扱いやバックアップ漏れに備え、コードの控えは別に保存してください。
子テーマを有効化したら親テーマは削除できますか？
削除できません。子テーマは親テーマの機能とテンプレートを利用するため、親テーマもインストールされた状態が必要です。
CSSが反映されないときはどうしますか？
保存漏れ、セレクターの違い、スキンの強い指定、文法エラー、キャッシュを順番に確認します。いきなり「!important」を付ける前に、ブラウザーの検証機能で対象要素と適用中のスタイルを調べてください。
まとめ：小さな変更は追加CSS、長期管理は子テーマ
Cocoonのカスタマイズは、管理画面の設定で実現できるかを最初に確認し、少量の見た目調整は追加CSS、PHPやテンプレートを含む継続的な変更は子テーマへ分けると安全です。親テーマの直接編集は避けましょう。
最初の一歩は、現在の設定とファイルをバックアップし、追加CSSへ目的が明確な数行だけを入れて表示を確認することです。変更が増えて管理しにくくなった段階で子テーマへ整理すれば、更新しやすさとデザインの自由度を両立できます。
管理画面だけで整えられる範囲を先に確認したい方は、Cocoonカスタマイズ完全ガイドから進めてください。Cocoonの機能全体とSEO設定を知りたい場合は、Cocoonが人気の理由とSEO実践ガイドも役立ちます。
参考：WordPress Developer Resources「Child Themes」、WordPress「Custom CSS」（2026年7月24日確認）
コメント