WordPressでCSSを変更する方法は、大きく「外観 > カスタマイズ > 追加CSS」「子テーマのstyle.css」「ブロック単位のカスタムCSS」「FTPでのファイル直接編集」の4つです。初心者や少量の調整なら追加CSSが最も安全で、テーマ更新でも消えません。テーマ本体のstyle.cssを直接書き換える方法は更新時に上書きされるため避けてください。
CSS変更の4つの方法と使い分け
結論から言えば、変更量と目的で選び分けるのが正解です。数行〜数十行の微調整は追加CSS、サイト全体の本格的な改修は子テーマ、1ページだけの調整はブロック単位のカスタムCSSが適しています。
| 方法 | 向いている場面 | 更新耐性 | 難易度 |
|---|---|---|---|
| 追加CSS | 色・余白・文字サイズの微調整 | 強い（テーマ更新で消えない） | 低 |
| 子テーマのstyle.css | 全体のデザイン改修、行数が多い場合 | 強い | 中 |
| ブロック単位のカスタムCSS | 特定ページ・特定ブロックだけの調整 | 強い | 低 |
| FTP／テーマエディターで直接編集 | 子テーマファイルの一括編集 | 親テーマ編集は弱い | 高 |
なお、テーマ本体のファイルを管理画面のテーマエディターから書き換えるのは推奨しません。記述ミスで画面が真っ白になり、管理画面にすら入れなくなることがあります。その他のデザイン調整全般の流れは、初心者向けのカスタマイズ手順をまとめた記事もあわせて確認すると理解が早まります。
追加CSSの具体的な手順
- 管理画面から「外観」→「カスタマイズ」を開く
- メニュー最下部の「追加CSS」をクリック
- 入力欄にCSSを記述する（プレビューで即座に反映を確認）
- 問題がなければ「公開」を押す
ブロックテーマ（フルサイト編集対応テーマ）では「外観 > カスタマイズ」が表示されない場合があります。その際は、ブラウザのアドレスバーに「/wp-admin/customize.php」を直接入力すればカスタマイザーを開けます。
変更対象のセレクタを正確に特定する
CSS変更で最もつまずくのは「どこを指定すればよいか分からない」点です。ブラウザの検証ツール（Chromeなら右クリック→「検証」）を使えば、変更したい要素のクラス名を数秒で特定できます。
検証ツールでの確認の流れは次のとおりです。
- 変更したい文字やボタンを右クリックして「検証」を選ぶ
- ハイライトされたHTMLのclass名（例：
.entry-title）を控える - 右側のStylesパネルで現在効いているCSSと、打ち消し線が付いた無効なCSSを確認する
- Stylesパネル上で値を仮変更し、見た目を確かめてから本番に書き写す
クラス名が汎用的すぎると、意図しない箇所まで変わってしまいます。例えばボタン色を変えたつもりが検索ボタンまで変色するケースです。親要素と組み合わせて.single-post .btnのように範囲を絞ると事故を防げます。
特定ページだけに適用したい場合
WordPressはbodyタグにページ固有のクラスを自動出力します。.postid-123や.page-id-45、.category-newsなどを頭に付ければ、そのページだけにスタイルを当てられます。固定ページごとにデザインを変えたいときは、固定ページの作成手順とあわせて設計しておくと管理が楽になります。
CSSが反映されないときのチェックリスト
反映されない原因のほとんどは、キャッシュ・優先順位・記述ミスの3つです。上から順に確認すれば、大半は5分以内に解決します。
- キャッシュ：キャッシュ系プラグイン、サーバー側のキャッシュ、CDN、ブラウザのスーパーリロード（Ctrl+Shift+R）の順にクリアする
- 優先順位：テーマ側の指定が強い場合はセレクタを具体的にする。
!importantは最終手段にとどめる - 記述ミス：セミコロンや閉じ括弧の抜け。1箇所の抜けで以降すべてが無効になる
- 単位漏れ：
font-size:16のようにpxやremが無い指定は無視される - 読み込み順：子テーマのstyle.cssが親より先に読み込まれていないか確認する
- レスポンシブ：メディアクエリ内の指定がPC表示を上書きしていないか
もう一つの落とし穴が、同じ目的のCSSを追加CSSと子テーマの両方に書いてしまうケースです。後から見返したときにどちらが効いているか分からず、修正に時間がかかります。書き込む場所は最初に1箇所へ決め、変更日と目的をコメントで残しておくのが実務的なコツです。
安全に運用するための事前準備と作業ルール
CSS変更は見た目だけの作業に見えて、サイト全体の印象と可読性を左右します。作業前のバックアップと、変更後の確認手順をルール化しておくことが最大のリスク対策です。
- 変更前に追加CSSの内容をテキストファイルへコピーしておく（即座に戻せる）
- 一度に変更するのは1目的だけ。複数まとめて変えると原因の切り分けができない
- 公開後はPC・スマホ・タブレット幅で表示を確認する
- 本文の文字サイズと行間は最後に調整する（見出しやボタンより影響範囲が広いため）
また、デザインに手を入れる目的が「読まれる記事にする」ことなら、CSSだけで解決できる範囲は限られます。読了率に効くのは目次の有無、見出しの階層、更新情報の明示といった構造面です。当社が提供するAP Writer Proでも、目次の自動生成や構造化データの出力といった機能を用意しており、CSSでの装飾と構造の整備を分けて考えることを推奨しています。装飾は読みやすさの補助、構造は検索エンジンとAI検索の理解を助ける土台、という役割分担で考えると迷いが減ります。
あわせて、AI検索を意識したサイト設計の考え方を押さえておくと、見た目の改善と流入の改善を切り分けて計画できます。
AP Writer Proは、自社サイトのURLを学習して事業内容や強み、語り口を反映した記事を自動生成するWordPressプラグインです。CSSでサイトの見た目を整えたあとは、そこに載せる中身をどう継続的に増やし、育てていくかが課題になります。毎朝の下書き自動生成や、公開済み記事をSearch Consoleと連携して書き直すリフレッシュ機能、目次の自動生成や構造化データ出力といった機能で、見た目と中身の両面からサイト運営を支えます。
This article was drafted with AI assistance and reviewed and edited by APWP before publication.
