「ワードプレスのCSSって、結局どこにあるの？」――この疑問、実はとても本質的です。
管理画面にも、サーバーにも、テーマにも、プラグインにもCSSは存在します。
だからこそ初心者は迷い、上級者は“正しい置き場所”にこだわります。
本記事では「場所・理由・安全性・反映の仕組み」まで、専門家視点で徹底的に解説します。
結論：「ワードプレス cssどこ」の正解は、初心者は“追加CSS”、本格改修は“子テーマのstyle.css”です。
理由は明快で、親テーマやプラグインのCSSは更新で上書きされる一方、追加CSSと子テーマは変更が残るからです。
実体ファイルは原則/wp-content/themes/テーマ名/style.cssにあります。
ワードプレスのCSSは「どこ」に存在するのか（全体像）
① WordPress本体のCSS（触ってはいけない）
WordPressコアは複数のCSSを持ち、主に /wp-includes/css/ に配置されています。
例：dashicons.min.css、admin-bar.min.css、blocks/navigation/style.min.css。
これらは更新のたびに書き換わるため、直接編集は厳禁です。
② テーマのCSS（場所は固定）
デザインの中核はテーマにあり、必ず /wp-content/themes/テーマ名/style.css が存在します。
ここがいわゆる「原本CSS」ですが、親テーマを直接編集すると更新で消えます。
③ プラグインのCSS（触ってはいけない）
例：/wp-content/plugins/contact-form-7/includes/css/styles.css。
アップデートや再インストールで必ず上書きされるため、編集は非推奨です。
管理画面でCSSを書ける場所は3つ（どこ？）
1) 追加CSS（最優先の正解）
場所：管理画面 → 外観 → カスタマイズ → 追加CSS。
全ページの <head> 内に <style id="wp-custom-css"> として出力されます。
リアルタイムプレビュー、ロールバックの容易さ、更新耐性の三拍子が揃っています。
2) テーマファイルエディタ（非推奨）
場所：外観 → テーマファイルエディタ → style.css。
直接編集は危険で、原則は閲覧のみにとどめましょう。
3) プラグイン系CSSエディタ
例：Simple Custom CSS、Simple Custom CSS and JS、WP Add Custom CSS。
テーマ変更後も残したい場合は、プラグイン管理が最も安全です。
サーバー上の「実体ファイル」はどこ？
標準テーマの場合
例（Twenty Twenty-Two）：/wp-content/themes/twentytwentytwo/style.css。
Cocoonなら /wp-content/themes/cocoon-master/style.css が原本です。
子テーマの場合（推奨ルート）
例：/wp-content/themes/cocoon-child/style.css。
親テーマのCSSを上書きでき、更新しても消えないのが最大の利点です。
アップデートに負けない「正しい書き場所」
初心者：追加CSSが最適解
小〜中規模の調整（数十行程度）なら、管理画面だけで完結します。
失敗しても削除すれば即復旧できるのが強いです。
中上級者：子テーマのstyle.css
手順：
① 子テーマフォルダを作成（例：cocoon-child）。
② style.css と functions.php を配置。
③ functions.php に親テーマ読み込み処理を記述。
④ 管理画面で子テーマを有効化。
以後のCSSはすべて子テーマに集約します。
「このページだけ」CSSを書きたいときはどこ？
推奨：カスタムHTMLブロック
ブロックエディタの「カスタムHTML」に直接記述します。
例：
<style>
.page-id-123 h2 { color: #d00000; }
</style>
検索可能で管理しやすく、実務的に理にかなっています。
ブロックエディタの見た目用CSSはどこ？
多くのテーマは editor-style.css または assets/css/editor.css を持ちます。
さらに最近は theme.json がデザイン設定の中心です。
場所例：/wp-content/themes/テーマ名/theme.json。
CSSが反映されないときの「診断フロー」
チェック1：キャッシュ
ブラウザのスーパーリロード、キャッシュ系プラグインの一時停止を実施。
サーバーキャッシュ（例：LiteSpeed、WP Rocket）も疑います。
チェック2：優先順位
優先度は 追加CSS ＞ 子テーマ ＞ 親テーマ。
それでも効かない場合はセレクタの強度不足を疑います。
チェック3：記述ミス
よくある失敗：セミコロン抜け、括弧不一致、クラス名の誤字。
チェック4：検証ツールの使い方
Chromeで対象要素を右クリック → 「検証」。
Stylesタブで適用CSSと打ち消し線（上書き）を確認します。
必要ならセレクタをコピーして追加CSSに貼り付けましょう。
よくある質問（FAQ）
Q1.style.cssは必ず存在しますか？
はい。WordPressテーマの要件として必須ファイルです。
Q2.子テーマは必須ですか？
軽微な調整だけなら不要です。大規模改修なら強く推奨します。
Q3.追加CSSはパフォーマンス的に不利？
数十行程度なら影響は軽微です。大量CSSは外部化が望ましいです。
まとめ：次にやるべきこと
まずは追加CSSで小さく試してください。
本格化したら子テーマのstyle.cssに移行しましょう。
そして必ず検証ツールでクラス名を特定し、根拠あるCSSを書くこと。
これが「ワードプレス cssどこ」に対する、現場で通用する正解です。
