「ネットで見つけたCSSをコピペしたいけれど、どこに貼ればいいの？」「テーマを更新したらCSSが消えてしまった…」WordPressのデザインを少し変えようとして、こんな壁にぶつかったことはありませんか？
実は、WordPressにはテーマファイルを直接編集せずに安全にCSSを追加できる「追加CSS」という機能が標準で用意されています。この記事では、追加CSSの場所と基本的な使い方から、初心者がつまずきやすい注意点までを一度にまとめました。ブックマークして、CSSを書くときの「困ったとき」に何度でも見返せる保存版として活用してください。
WordPressの「追加CSS」とは？
テーマを壊さずにデザインを上書きできる機能
「追加CSS」は、WordPressのカスタマイザー（外観のカスタマイズ機能）に標準搭載されているCSS入力欄です。ここに書いたCSSは、テーマが本来持っているスタイルに後から上乗せして適用されます。テーマファイル（style.css など）を直接書き換える必要がないため、コードの知識が浅い段階でも、デザインの微調整を安全に試せます。
「追加CSS」が初心者に向いている3つの理由
- テーマ更新で消えない：CSSはテーマファイルではなくデータベースに保存されるため、テーマをアップデートしても設定が残ります。
- リアルタイムでプレビューできる：入力すると右側のプレビュー画面にすぐ反映され、結果を見ながら調整できます。
- 元に戻しやすい：問題が起きてもCSSを削除するだけで元の状態に戻せるため、サイトが壊れにくいです。
追加CSSはどこにある？開き方をステップで解説
追加CSSの入力欄は、次の手順で開けます。
- 管理画面で「外観」→「カスタマイズ」を開く
WordPressの管理画面（ダッシュボード）にログインし、左メニューから「外観」→「カスタマイズ」を選択します。
- 左パネルの「追加CSS」を選択する
カスタマイザーの左パネルをスクロールし、最下部付近にある「追加CSS」をクリックします。テーマによって表示位置が前後する場合があります。
- CSSを入力して「公開」する
入力欄にCSSを記述すると、右側のプレビューに即時反映されます。問題なければ右上（環境により上部）の「公開」ボタンを押すと、実際のサイトに反映されます。
CSSが書ける場所はどう違う？編集場所の比較
WordPressでCSSを書く方法はいくつかあります。それぞれの違いを理解すると、追加CSSがなぜ初心者に勧められるのかが分かります。
| 書く場所 | 安全性 | 特徴 |
|---|---|---|
| カスタマイザーの追加CSS | 高い | テーマ更新で消えない。プレビュー可。少量〜中量の調整に最適 |
| 親テーマの style.css を直接編集 | 低い | テーマを更新すると上書きされて消える。非推奨 |
| 子テーマの style.css | 高い | 更新で消えず大規模な変更に向く。作成にひと手間かかる |
まずは追加CSSから始め、CSSの量が増えて管理が大変になってきたら子テーマへ移行する、という流れがおすすめです。子テーマについては関連記事で詳しく解説しています。
追加CSSの基本的な書き方
CSSは「どこを」「どう変えるか」の3点セット
CSSは「セレクター（どこを）」「プロパティ（何を）」「値（どうするか）」の組み合わせで成り立っています。基本の形は次のとおりです。
セレクター {
プロパティ: 値;
}たとえば「本文中のリンクの文字色を赤くする」場合は、次のように書きます。
/* 本文中のリンクの色を変える */
.entry-content a {
color: #e2403d;
}/* ここはコメント */ の部分は、何のためのCSSかを書き残すメモです。ブラウザには影響せず、後から見返したときに役立ちます。
変えたい場所のセレクター（クラス名）を調べる
CSSで最も難しいのは「どこを変えるか」を表すセレクターを正しく指定することです。変更したい要素のクラス名は、ブラウザの開発者ツールで確認できます。変更したい場所を右クリックして「検証」（または「要素を調査」）を選ぶと、その要素のHTMLとクラス名が表示されます。
（Apura使用時のスクリーンショット例：開発者ツールでリンク要素のクラス名を確認している画面）
追加CSSを書くときの7つの注意点
ここからが、この記事で最もお伝えしたい「保存版」の中身です。初心者がつまずきやすいポイントを7つにまとめました。
1. 公開前に必ずバックアップを意識する
追加CSSは元に戻しやすい機能ですが、大量のCSSを貼り付ける前には、今の追加CSSの内容をテキストファイルにコピーしておくと安心です。万が一おかしくなっても、元のCSSに戻せます。
2. セミコロン「;」と波カッコ「{ }」の閉じ忘れに注意
CSSは記号のミスで動かなくなります。とくに多いのが、行末のセミコロン ; の付け忘れと、波カッコ } の閉じ忘れです。1か所間違えると、それ以降のCSSがすべて効かなくなることもあります。
/* 悪い例：セミコロンと閉じカッコが抜けている */
.entry-content a {
color: #e2403d
font-weight: bold
/* 良い例：きちんと閉じている */
.entry-content a {
color: #e2403d;
font-weight: bold;
}カスタマイザーの追加CSSには簡易的な文法チェック機能があり、エラーがあると該当行に「!」マークが表示されます。マークが出たら、その行の前後を見直してください。
3. コピペしたCSSの「全角スペース」に気をつける
WebサイトからコピーしたCSSに、見えない全角スペースが混ざっていると、CSSが正しく解釈されません。コピペしたのに効かないときは、インデント部分を一度すべて削除し、半角スペースで打ち直すと直ることがあります。
4. セレクターが大まかすぎると想定外の場所まで変わる
たとえば a { color: red; } のように要素名だけを指定すると、サイト内のすべてのリンクが赤くなり、メニューやフッターまで変わってしまいます。「本文だけ」「特定のボタンだけ」のように、変えたい範囲を絞ったセレクターを書くことが大切です。
/* 範囲が広すぎる：全リンクが対象になる */
a {
color: #e2403d;
}
/* 範囲を絞る：記事本文のリンクだけが対象 */
.entry-content a {
color: #e2403d;
}5. テーマのCSSに勝てないときは「詳細度」を上げる
追加CSSを書いたのに反映されないとき、その多くはテーマ側のCSSのほうが優先されているのが原因です。CSSには「詳細度（セレクターの強さ）」というルールがあり、より具体的なセレクターのほうが優先されます。親要素を加えるなどして、セレクターをより具体的にすると上書きできます。
6. スマホ表示はメディアクエリで分けて調整する
パソコンでは綺麗でも、スマホで見ると文字が大きすぎる・余白が広すぎることがあります。画面幅に応じてCSSを切り替えるには、@media（メディアクエリ）を使います。
/* 画面幅が782px以下（スマホ・タブレット）のときだけ適用 */
@media (max-width: 782px) {
.entry-content h2 {
font-size: 1.4rem;
}
}追加CSSを変更したら、必ずパソコンとスマホの両方で表示を確認しましょう。
7. 反映されないときはキャッシュを疑う
公開したのに変化がないときは、ブラウザやキャッシュ系プラグインが古い表示を保持している場合があります。Ctrl + Shift + R（Macは Cmd + Shift + R）でキャッシュを無視して再読み込みし、キャッシュプラグインを使っている場合はキャッシュを削除してから確認してください。
追加CSSが効かないときのチェックリスト
「書いたのに変わらない」ときは、次の順番で確認するとほとんどの原因が見つかります。
| 確認する箇所 | 対処方法 |
|---|---|
| 「公開」を押したか | カスタマイザーの公開ボタンを押したか確認する |
| 文法エラーがないか | セミコロン・波カッコの閉じ忘れ、全角スペースを確認する |
| セレクターが合っているか | 開発者ツール（F12）で実際のクラス名を確認する |
| テーマCSSに負けていないか | 打ち消し線が出ているプロパティを確認し、セレクターを具体的にする |
| キャッシュが残っていないか | スーパーリロードとキャッシュ削除を行う |
追加CSSとテーマの設定機能、どう使い分ける？
そもそも、すべてをCSSで書く必要はありません。最近のテーマは、色やレイアウト、フォントなどをカスタマイザーの設定画面からCSSを書かずに変更できるものが増えています。設定画面で変えられるものは設定画面で、細かい微調整だけを追加CSSで行うと、コードが少なく済み、管理もラクになります。
たとえばWordPressテーマ「Apura」では、基本的な色・余白・タイトルやボタンの表示などをカスタマイザーの設定項目から調整できます。まずは設定で変えられないか確認し、足りない部分だけを追加CSSで補うのがおすすめです。
（Apura使用時のスクリーンショット例：カスタマイザーの設定項目で色やレイアウトを変更している画面）
よくある質問
追加CSSはテーマごとに保存されるため、別のテーマに切り替えると引き継がれません。テーマを乗り換える際は、必要なCSSを事前にコピーしておき、新しいテーマの追加CSSに貼り直してください（セレクターのクラス名が変わる場合があるため、調整が必要なこともあります）。
数十行〜数百行程度であれば問題ありません。ただし、CSSが大量になり管理が大変になってきたら、子テーマの
style.cssに移すことを検討しましょう。コメントで区切りを入れておくと、後から見返しやすくなります。追加CSSはあくまでデザインの上書きなので、原因となったCSSを削除して「公開」すれば元の表示に戻ります。テーマファイルを壊すことはありません。心配な場合は、変更前のCSSをテキストファイルに控えておくとさらに安心です。
まとめ
カスタマイザーの「追加CSS」は、テーマを壊さずにデザインを微調整できる、初心者にとって心強い機能です。要点をおさらいしましょう。
- 追加CSSは「外観 → カスタマイズ → 追加CSS」から開き、必ず「公開」して保存する
- テーマ更新で消えず、削除すればすぐ元に戻せる安全な方法
- セミコロン・波カッコ・全角スペースのミスに注意する
- セレクターは範囲を絞り、効かないときは詳細度・キャッシュを確認する
- 設定で変えられるものはCSSを書かず、微調整だけ追加CSSで補う
まずは小さな変更から試して、追加CSSに慣れていきましょう。気づけば、見つけたCSSをコピペして自分好みにアレンジできるようになっているはずです。