WordPressでCSSを追加する4つの方法：特徴と選び方を徹底解説
WordPressでデザインを微調整したいとき、避けて通れないのが「CSSの追記」です。 しかし、初心者からプロまで、どこにコードを書くべきか迷うことは少なくありません。
今回はWordPressのCSSの記入場所とおすすめの方法を解説していきます。
まず、WordPressでCSSを記述できる場所は主に以下の4つです。
- WordPress標準機能「追加CSS」
- テーマ・サイトエディターの独自機能
- CSS管理プラグイン
- 子テーマ（style.css）
それぞれの特性を理解し、プロジェクトの規模や目的に合わせて適切に選ぶことが、後のトラブルを防ぐ秘訣です。今回は、それぞれのメリット・デメリットを詳しく解説します。
WordPress標準機能「追加CSS」
最も手軽で、最初の一歩として推奨されるのが「追加CSS」です。
- どんな場所？: 「外観」＞「カスタマイズ」＞「追加CSS」
- メリット: どんなテーマでも必ず存在し、プレビュー画面で変更が即座に反映されるため、視覚的に確認しやすいのが最大の特徴です。
- デメリット: 記述量が増えると入力エリアが狭く、編集がしづらくなります。また、データベースに保存されるため、数千行といった大規模なCSSには向きません。
こんな人におすすめ: 簡単なデザイン調整をしたい方や、プラグインを極力増やしたくない方。
テーマ・サイトエディターの独自機能
近年のWordPressは「ブロックテーマ」へと進化しています。それに伴い、CSSの記述場所も変化してきました。
- どんな場所？: テーマの設定画面、またはサイトエディター（FSE）内の「グローバルスタイル」
- メリット: 特定のブロックやページ限定のCSS設定ができる場合があります。直感的にデザインできることが多く、現代のWordPress制作では主流になりつつあります。
- デメリット: テーマによって設定できる範囲が異なります。「全体を一括で変えたい」という場合には向かないことも。
こんな人におすすめ: 最新のテーマ（SWELL、Arkheなど）を使用している方、ブロックエディター中心にサイト制作をする方。
CSS管理プラグイン（おすすめ）
「テーマを切り替えてもデザインを維持したい」「特定のページだけにCSSを適用したい」という場合に欠かせないのが管理プラグインです。特に、コードの記述量が増えてきた際の管理画面の使いやすさは、標準機能よりも圧倒的に優れています。
【2026年現在のおすすめ】
- WPCode (旧 Insert Headers and Footers): 現在、世界的に最も利用されているコード管理プラグインです。CSSだけでなく、PHPやJavaScriptも安全に管理でき、万が一コードにエラーがあってもサイトが真っ白にならない「エラー防止機能」がついているのが最大のメリットです。
- Simple Custom CSS and JS: 以前から定評のあるプラグインで、CSSを「外部ファイル」として出力できるのが特徴です。ブラウザキャッシュを効かせることができるため、表示速度を重視するプロに根強い人気があります。
メリット:
- テーマ依存がない: テーマを変更しても、書いたCSSが消えずに引き継がれます。
- 出し分けが自由自在: 「トップページだけ」「スマホだけ」といった条件指定が簡単にできます。
- コードの整理が楽: 複数のCSSを「ボタン用」「レイアウト用」など名前をつけて小分けに保存できます。
デメリット:
- プラグインを一つ増やすことになるため、管理の手間がわずかに増えます。
- プレビュー機能がないものが多いため、別タブで確認しながらの作業になります。
こんな人におすすめ: 将来的にテーマを変更する可能性がある方や、LP制作のように特定のページだけ特殊なデザインにしたいWebデザイナーの方。
子テーマ（style.css）
通常、WordPress内でテーマを適用するときはテーマ本体、いわゆる「親テーマ」を入れるのですWordPressで最も「王道」とされるカスタマイズ方法が、この子テーマのスタイルシート（style.css）への記述です。 親テーマ（テーマ本体）を直接編集すると、テーマのアップデート時に全ての変更が上書きされて消えてしまいます。それを防ぐために、カスタマイズ専用の「子テーマ」を作成して運用します。
メリット:
- 制作の自由度が最大: CSSだけでなく、PHP（機能の追加）やJavaScriptも一括で管理できるため、サイトの構造自体をカスタマイズできます。
- 表示速度への影響が最小: 外部プラグインを経由しないため、サイトの表示パフォーマンスにおいて最も有利です。
- 一元管理が可能: 全てのデザインルールを一つのファイルにまとめられるため、コードの全体像を把握しやすくなります。
デメリット:
- 致命的なエラーのリスク: 「テーマファイルエディター」での操作ミスは、サイト全体が表示されなくなる（真っ白になる）などの大きなトラブルに直結します。
- サーバーの知識が必要: 万が一エラーが起きた際、FTPソフトなどを使ってサーバー上のファイルを直接修正するスキルが求められます。
- 親テーマとの競合: 親テーマの大規模なアップデートにより、子テーマに書いたコードがうまく機能しなくなる場合があります。
【補足】テーマを変更したとき、書いたCSSはどうなる？
カスタマイズを始める前に知っておきたいのが、「テーマを変えたときのデータの行方」です。実は、CSSを書き込む場所によって、テーマ変更時の挙動が大きく異なります。
| 記入場所 | テーマ変更後の状態 | 理由 |
|---|---|---|
| 1. 追加CSS | 消える（非表示になる） | そのテーマ専用のデータとして保存されるため |
| 2.テーマの独自機能 | 消える | テーマ内の設定画面に依存しているため |
| 3.子テーマ (style.css) | 適用されなくなる | 子テーマは「特定の親テーマ」とセットであるため |
| 4.管理プラグイン | そのまま維持される | テーマの外側でコードを管理しているため |
【ここがポイント】初心者は慎重に！
子テーマの編集画面は非常に広く、本格的なコーディングには最適です。しかし、そこはサイトの「心臓部」でもあります。バックアップの取り方や、FTPでの復旧方法を習得するまでは、安易に触れるのは避けた方が良いでしょう。 「まずはWPCodeや追加CSSで慣れ、大規模なサイト制作に挑戦する段階で子テーマへ移行する」というのが、最も安全で着実なステップアップです。
結論：どう使い分けるべきか？
ここまでWordPressでCSSを変更できる4つの場所について解説しました。それぞれの特徴を改めて一覧表で比較してみましょう。
| 手法 | 手軽さ | 安全性 | 管理性 |
| 追加CSS | ★★★ | ★★☆ | ★☆☆ |
| WPcode | ★★☆ | ★★★ | ★★★ |
| 独自機能 | ★★★ | ★★☆ | ★☆☆ |
| 子テーマ | ★☆☆ | ★☆☆ | ★★★ |
私は、保守性と利便性を両立させる「ハイブリッド管理」を最終的な答えとして提案します。
- 10行以内のちょっとした修正: プレビューが即座に反映される「追加CSS」
- それ以外のすべてのカスタマイズ: 安全性と整理に優れたプラグイン「WPCode」
このように、「一時的なメモ（追加CSS）」と「正式な記録（WPCode）」を使い分けることで、数年経っても迷わないプロ仕様のメンテナンス性が手に入ります。
最後に
冒頭でも触れた通り、どの手法にもメリットとデメリットが存在します。しかし、保守管理の観点から言えば、CSSをあちこちバラバラの場所に書くのはおすすめしません。
「CSSの記入場所に唯一絶対の正解はありません。しかし、『管理のしやすさ』と『サイトの安全性』を天秤にかけたとき、自分にとって最適な場所を選ぶことが、長くサイトを愛でる秘訣です。
まずは追加CSSやWPCodeから始めて、少しずつ自分だけの理想のサイトを作り上げていきましょう！
