WordPress追加CSSの書き方ガイド！反映されない？どこ？と迷った時の対処法

WordPressの追加CSSを書いているのにまったく見た目が変わらない、そもそも追加CSSってどこから開けばいいのか分からない、という相談をよくもらいます。

この記事では「追加CSSの場所」「CSSの基本的な書き方」「反映されないときの原因」を順番に解説していきます。

WordPressの追加CSSはどこにある？まず場所を確認しよう

追加CSSの場所はどこ？クラシックテーマの場合

いわゆるクラシックテーマ（従来型のテーマ）を使っている場合は、追加CSSは管理画面から簡単に開けます。よくある操作の流れをまとめると、次のようになります。

やりたいこと	操作の手順	補足
追加CSSを開きたい	ダッシュボード → 外観 → カスタマイズ → 追加CSS	「追加CSSはどこ？」への定番の答えです
CSSを書きたい	追加CSS欄にコードを入力 → 右上の「公開」ボタン	「公開」を押さないと本番画面に反映されません
元に戻したい	追加CSS欄から該当のコードを削除 → 公開	追加CSSを消せば、その変更は元のデザインに戻ります

追加CSSは、基本的にはテーマごとに管理されています。テーマを変更すると、前のテーマの追加CSSがそのまま表示される場合もあれば、新しいテーマの追加CSSとして別管理になる場合もあります。テーマを乗り換える前に、追加CSSの内容を一度コピーしてメモしておくと安心です。

ブロックテーマや「カスタマイズ」が見えない場合

最近はブロックテーマやフルサイト編集に対応したテーマも増えていて、その場合は「外観」の中に「カスタマイズ」が表示されないことがあります。このときに「追加CSSが消えた」と勘違いしやすいので注意です。

ブロックテーマなどでよくあるパターンは、次のようなイメージです。

• テーマ独自の設定画面に「カスタマイズ」や「デザイン」項目があり、その中に「追加CSS」や「カスタムCSS」が用意されている
• サイトエディタ（サイト編集）で、ブロックごとにデザインを切り替える設計になっている
• テーマやサービスの仕様として、追加CSS欄を表示していない

もし「外観 → カスタマイズ」が見当たらない場合は、まず外観メニューの中に「エディター」「サイト編集」「テーマオプション」といった項目がないか確認してみてください。それでも見つからなければ、テーマの公式マニュアルで「CSS」「カスタムCSS」などのキーワードを探してみるのがおすすめです。

どうしても追加CSS欄が見つからないときは、後ほど紹介するように、子テーマのstyle.cssに書く方法や、カスタムCSSプラグインを使う方法も選択肢になります。

追加CSSとstyle.css、プラグインの違いをざっくり理解する

ここで一度、「CSSをどこに書くか」という視点で、追加CSS・style.css・CSSプラグインの違いを整理しておきます。ざっくりとしたイメージは次のとおりです。

書き場所	特徴	向いているケース
追加CSS欄	管理画面からすぐ編集でき、プレビューも見やすい	数行〜数十行のちょっとしたデザイン調整
子テーマのstyle.css	ファイルで管理でき、量が増えても整理しやすい	サイト全体のデザインをしっかり作り込みたいとき
カスタムCSSプラグイン	テーマと独立してCSSを保持できる	テーマを変える予定がある、または複数テーマで同じCSSを使いたいとき

最初のうちは、管理しやすい追加CSSから始めるのがおすすめです。ある程度行数が増えてきて、「どこに何を書いたか分かりにくいな」と感じてきたら、子テーマのstyle.cssへ移していく、という流れが現実的だと思います。

WordPress追加CSSの書き方の基本

CSSの超基本ルールをさらっと押さえる

CSSは「どの部分を」「どういう見た目にするか」を指定するためのルールの集まりです。基本の形は、とてもシンプルです。

セレクタ { プロパティ: 値; }

よく出てくる用語を、表にして整理すると次のようになります。

用語	役割	具体例
セレクタ	どこに効かせるかを指定	h2、.btn-primary、#header など
プロパティ	何を変えるかを指定	color、font-size、background など
値	どう変えるかを指定	red、16px、#333、bold など

例えば、見出し2の文字色を赤にしたいなら、追加CSSに次のように書きます。

h2 { color: red; }

中カッコの「{」「}」や、行の最後の「;」を一つでも忘れると、そこから後ろのCSSがうまく読まれなくなることがあるので、ここだけは慎重にチェックしてください。

よくある「やりたいこと」と追加CSSの書き方

ここからは、「こういう見た目にしたい」という場面別に、よく使う書き方の例をまとめます。最初は丸暗記する必要はなく、気になったものをコピペして数字や色だけ変えるイメージで大丈夫です。

やりたいこと	追加CSSの例	コメント
見出し2に下線を付けたい	h2 { border-bottom: 2px solid #333; padding-bottom: 8px; }	シンプルな下線付き見出しになります
本文の行間を広げたい	body { line-height: 1.8; }	可読性がぐっと上がります
ボタンの色を変えたい	.btn { background: #ff6600; color: #fff; }	.btnの部分はテーマごとのクラス名に合わせてください
画像を丸くしたい	.avatar { border-radius: 50%; }	プロフィール画像などを丸く見せたいときに便利です

こうしたサンプルを少しずつ試していくうちに、「このクラス名を変えれば別の場所にも効くな」「この数字を変えると印象が変わるな」と感覚的に分かってきます。焦らず、一つずつ慣れていきましょう。

スマホだけデザインを変えたいときの書き方

「スマホで見たときだけ文字サイズを変えたい」「小さい画面では余白を減らしたい」という相談もよくあります。このときは、メディアクエリと呼ばれる書き方を使います。

例えば、画面幅がある程度小さいときだけ本文の文字サイズを少し小さくする場合は、次のように書きます。

@media (max-width: 768px) {
body { font-size: 14px; }
}

いきなりメディアクエリを多用すると混乱しやすいので、最初は「PCとスマホ共通のスタイル」をしっかり整えることを優先し、本当に必要なところだけスマホ用のCSSを足していくくらいの気持ちで進めると、管理が楽になります。

WordPress追加CSSが反映されないときの原因チェックリスト

よくある原因と対処法の一覧

まずは、代表的な原因と対処の方向性を一覧で見てみましょう。

原因	典型的な症状	対処法の方向性
ブラウザやプラグインのキャッシュ	何度更新しても古いデザインのまま表示される	ブラウザ・プラグイン・サーバーのキャッシュを削除して再読み込みする
CSSの記述ミス	その行以降のCSSがまったく効かない	中カッコやセミコロンの抜け、全角文字の混入などを確認する
セレクタの指定ミス	特定の場所だけCSSが効かない	検証ツールでクラス名やIDを確認し、正しいセレクタに書き直す
優先度（詳細度）で負けている	追加CSSを書いても、テーマのデザインが上書きしてしまう	より具体的なセレクタにする、または最終手段として!importantを検討する
別のCSSに上書きされている	ページによって効き方が違う、特定のテンプレートだけ効かない	読み込み順や子テーマstyle.cssの内容を確認する

このあたりを順番に見ていくと、「どこで詰まっているか」がかなり絞り込めます。

一番多いのはキャッシュ問題

私の実感として、追加CSSが反映されないときに一番多いのは、キャッシュが原因のケースです。自分では直したつもりでも、ブラウザやサーバーが古いデータを持っていて、それを表示し続けている、というパターンですね。

チェックしてほしいポイントは、次のとおりです。

特に、「ログインした自分の画面では反映されているのに、スマホから見ると反映されていない」といった場合は、サーバーやプラグインのキャッシュが疑わしいです。別のブラウザやシークレットウィンドウから確認するのも、切り分けに役立ちます。

セレクタ間違い・優先度負けを疑ってみる

キャッシュを消しても変化がなければ、次に多いのが「セレクタが間違っている」「優先度で負けている」というパターンです。

よくあるつまずき方を挙げると、次のようなものがあります。

• HTMLが class=”btn primary” なのに、CSSでは .btn-primary と書いてしまっている
• 本当は .entry-content h2 に効かせたいのに、単に h2 だけを書いていて、別のCSSに上書きされている
• ID指定とクラス指定を取り違え、#btn と書くべきところを .btn と書いてしまっている

また、CSSには「どのセレクタがどれくらい強いか」という優先度の考え方があります。あくまでざっくりですが、次のようなイメージで覚えておくと便利です。

セレクタの例	強さのイメージ	コメント
h2	弱い	一番シンプルな指定です
.entry-title	中くらい	クラス指定で少し強くなります
#site-title	強い	ID指定はかなり強い指定になります
.entry-content h2	中〜強い	階層を含んだ指定は、単体のh2よりも強くなります

同じ場所に対して、より強いセレクタで指定したCSSがあると、そちらが優先されます。どうしても勝てないときの最終手段として、プロパティの後ろに!importantを付ける方法もありますが、多用すると管理が難しくなるので、まずはセレクタの見直しから試すのがおすすめです。

テーマや子テーマ、読み込み位置が原因のケース

少しマニアックなケースとして、テーマや子テーマの構成、CSSの読み込み順が原因で、追加CSSが思ったとおりに効かないこともあります。

例えば、次のような状況です。

• 親テーマの後に、さらに別のCSSファイルが読み込まれていて、そこで強い指定がされている
• 子テーマのstyle.css側に、より詳細なCSSが書かれていて、追加CSSよりも強く効いている
• テーマの「色設定」や「デザイン設定」などが、インラインスタイルとしてHTMLに直接CSSを出力している

こういった状況を正確に把握するには、ブラウザの検証ツールで「どのCSSファイルの何行目が効いているか」を確認していく必要があります。少し上級編の作業にはなりますが、「自分の追加CSSがどれとバッティングしているのか」を知ることで、原因が一気にクリアになることも多いです。

とはいえ、現場では「セレクタの見直し」と「キャッシュの削除」だけで解決するケースもかなり多いので、焦らず一つずつ確認してみてください。

追加CSSクラスを使って特定のブロックだけカスタマイズする

追加CSSクラスとは何か

ブロックエディタでブロックを選ぶと、画面右側のサイドバーに「高度な設定」などの項目が表示されます。その中に「追加CSSクラス」という入力欄があり、ここに任意のクラス名を書き込むことができます。

例えば、ボックスブロックの追加CSSクラスに「special-box」と入力し、追加CSS側に次のように書いたとします。

.special-box {
background: #f5f5f5;
padding: 16px;
border-radius: 8px;
}

この状態で、追加CSSクラスに「special-box」と入れたブロックだけが、背景グレー・角丸・余白付きのボックスとして表示されます。同じ投稿の中で、「ここは特に読んでほしい」といった部分にだけクラスを付けていくと、メリハリのあるレイアウトにしやすくなります。

追加CSSクラスの便利な使い方パターン

追加CSSクラスは、一度使い方を覚えてしまうと、あちこちで活躍します。代表的なパターンをまとめると、次のようなイメージです。

シーン	追加CSSクラス名の例	追加CSS側のイメージ
注意書きを目立たせたい	note-box	黄色背景＋左側に太めのラインを付ける
成功事例の枠を作りたい	success-box	緑系の枠線と余白を付けて、ボックス風に見せる
「この記事のポイント」をまとめたい	point-box	太字タイトル＋背景色＋内側に余白を取る

WordPressの追加CSSに慣れてきたら、「共通でよく使うボックスデザイン」をいくつか決めておき、クラス名だけ付け替えて使い回す、という運用にしていくと、記事ごとにデザインがちぐはぐになるのを防ぎやすくなります。

追加CSS・子テーマ・プラグインの使い分け方

どこまでを追加CSSで担当させるか

私がサイト制作やブログ運営の相談を受けるとき、ざっくりと次のような基準で書き場所を分けることが多いです。

状況	おすすめの書き場所	理由
10〜20行程度の軽い調整	追加CSS欄	手軽に試せて、プレビューを見ながら微調整しやすいから
サイト全体の見出しやボタンをしっかり作り込みたい	子テーマのstyle.css	ファイルで整理しやすく、長期的な運用にも向いているから
将来テーマを変える可能性が高い	カスタムCSSプラグイン	テーマを変えてもCSSを引き継ぎやすいから

いままさに「追加CSSが効かない」と困っている段階であれば、まずは追加CSS欄に書いて原因を切り分けるのが先です。そのうえで、「よく使うスタイル」だけを子テーマstyle.cssにまとめる、といった整理をしていくと管理が楽になります。

子テーマに移すときのちょっとしたコツ

追加CSSから子テーマstyle.cssに書き直すときは、次のポイントを意識しておくと、あとから見返したときに分かりやすくなります。

子テーマでCSSを管理しておくと、あなた以外の人がサイトを触るようになったときにも、「どこを編集すればいいか」が伝わりやすくなります。長く運営していくサイトほど、早めに整えておくメリットが大きい部分です。

よくある質問（FAQ）

Q1. 追加CSS欄が見当たりません。どこから開けますか？

A1. クラシックテーマの場合は、多くのケースで「ダッシュボード → 外観 → カスタマイズ → 追加CSS」にあります。ここに見当たらない場合は、ブロックテーマやテーマ独自の設定画面になっている可能性が高いです。

その場合は、外観メニューの中に「エディター」「サイト編集」「テーマオプション」などの項目がないか確認し、そこからCSSに関する設定がないか探してみてください。どうしても見つからないときは、子テーマのstyle.cssやカスタムCSSプラグインを使う方法も検討してみましょう。

Q2. 追加CSSに書いたのに、管理画面のプレビューでは反映されるのに、実際のサイトでは反映されません。

A2. このパターンでは、キャッシュが原因であることが多いです。まずはブラウザのキャッシュ削除、キャッシュ系プラグインのキャッシュ削除、レンタルサーバー側のキャッシュ削除を順番に試してみてください。

それでも反映されない場合は、シークレットウィンドウや別の端末からサイトを開いてみて、本当に変更が反映されていないのかを確認します。それでも反映されていなければ、セレクタの指定ミスや優先度の問題を疑って、検証ツールでどのCSSが効いているかを確認してみると原因に近づけます。

Q3. 追加CSSと子テーマstyle.css、どちらに書いたほうがSEOに有利ですか？

A3. 追加CSSか子テーマstyle.cssかという違いだけで、検索順位が分かれるようなことは基本的にありません。どちらも見た目を整えるためのCSSであり、SEOの評価は、コンテンツの質やサイト構造、表示速度など別の要素で決まることがほとんどです。

ただし、CSSをあちこちに分散しすぎると、管理しづらくなり、結果としてサイトの品質低下につながる可能性はあります。まずは追加CSSで様子を見て、量が増えてきたら子テーマに整理していく、という順番で進めれば問題ありません。

まとめ

ここまでの内容をまとめます

今日できる一歩としては、まず自分のサイトで追加CSS欄を開き、見出しやボタンなど一箇所だけで構わないので、小さなスタイル変更を試してみてください。「自分の手で見た目を変えられた」という感触がつかめると、その先のカスタマイズもぐっと楽しくなっていきます。