WordPressのCSS編集完全ガイド！方法、おすすめプラグインなど徹底解説！

2025年8月16日

「サイトのデザインをもっと自分好みに変えたいけど、どこを編集すればいいのかわからない……」
「テーマのCSSをいじってみたけど、変更が反映されずイライラする……」
「子テーマって言われても、作り方やメリットがピンとこない」

そんなお悩みを抱えていませんか？

WordPressでサイトを運営していると、見た目のちょっとした調整だけで一気にプロっぽく見せられる場面がたくさんあります。

しかし、CSS編集の手順やベストプラクティスを知らずにいきなりコードをいじるのは不安がつきもの。

プラグインを使うタイミングや、親テーマ・子テーマの違い、さらには反映されないトラブル対策など、「知らないと怖い」ポイントがいくつもあります。

本記事では、初心者でも迷わないようCSS編集の基本から応用までを網羅的に解説！

おすすめプラグインやトラブルシュートのコツもあわせてご紹介します。

この記事を読めば、あなたのWordPressサイトが思い通りにカスタマイズできるようになります😊

CSSの基礴知識とWordPressでの役割

CSSとは何か？

CSS（Cascading Style Sheets）は、Webページの「見た目」を指定する言語です。

HTMLがページの骨組み（構造）を担い、CSSが色・レイアウト・フォントなどの装飾を担当します。
分離のメリット：
- HTMLは内容、CSSは装飾に専念できる
- デザイン変更が容易になる
- 複数ページで同じスタイルを一括管理できる

🎨 基本構造

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

セレクタ：どの要素に対して適用するかを指定
プロパティ：変えたいスタイル項目（色、余白、文字サイズなど）
値：プロパティに設定する具体的な数値や色

📊 CSSの例

スクロールできます

セレクタ	プロパティ	値	説明
`h1`	`color`	`#333333`	見出し1の文字色をダークグレーに
`.button`	`background`	`#ff6600`	クラス「button」の背景色をオレンジに
`#header`	`padding`	`20px`	ID「header」の内側余白を20pxに

WordPressテーマにおけるスタイルシートの位置づけ

WordPressではテーマ内にCSSファイルが配置され、サイト全体のデザインを制御します。

親テーマ（Parent Theme）
- テーマフォルダ直下の style.css がメインのスタイルシート
- テーマ情報（名前やバージョンなど）もこのファイル先頭に記述
子テーマ（Child Theme）
- 親テーマを上書きせずにカスタマイズ可能
- 子テーマ内にも style.css を配置し、親テーマより後に読み込まれる
- 安全にアップデートができる
追加CSS（カスタマイザー）
- 管理画面の「外観 > カスタマイズ > 追加CSS」から直接コードを追記
- テーマファイルを触らずに、即時プレビュー＆反映が可能

🔧 読み込み順序（優先度）

親テーマの style.css
子テーマの style.css
「追加CSS」の内容

⚠️ 同じセレクタに異なるスタイルがある場合、後から読み込まれたものが優先されます。

スタイルを記述できる主な場所

親テーマのstyle.css

WordPressテーマの基本スタイルが記述される場所です。

役割：テーマ全体のデザインを定義
メリット：すべてのページに一括で適用される
デメリット：テーマアップデートで上書きされやすい ⚠️

/* テーマの最上部にテーマ情報を記載 */
 /*
 Theme Name: Twenty Twenty-Five
 Version: 1.0
 */
body {
  margin: 0;
  font-family: sans-serif;
}

子テーマのstyle.css

親テーマを壊さずにカスタマイズするためのファイルです。

役割：親テーマのstyle.cssを上書きできる
メリット：親テーマの更新に影響されない 🔒
基本構成：

スクロールできます

ファイル名	内容
style.css	カスタムスタイル、テーマ情報ヘッダー
functions.php	子テーマのstyle.cssを読み込む設定

/* 子テーマのstyle.css冒頭 */
 /*
 Theme Name: My-Child-Theme
 Template: twentytwentyfive
 */
@import url("../twentytwentyfive/style.css");

/* ここからカスタム */
h1 {
  color: #0073aa;
}

カスタマイザーの「追加CSS」機能

管理画面から手軽にスタイルを追記できるインターフェースです。

場所：外観 > カスタマイズ > 追加CSS
メリット：即時プレビュー＆保存 🎉
注意点：大量のスタイル管理には向かない

追加CSSの例

/* ボタンのホバー色を変更 */
button:hover {
  background-color: #005177;
}

ページ単位でのカスタムCSS

特定のページや投稿だけにスタイルを当てたい場合に使用します。

方法例：
1. 投稿編集画面の「追加CSS」欄（テーマやプラグインによる）
2. 固有のクラス・IDを付与し、style.cssや追加CSSで記述
メリット：ページごとのレイアウト調整が容易 🛠
デメリット：管理が煩雑になりやすい

スクロールできます

対象ページ	適用例
投稿ID	`.postid-123 .entry-title { font-size: 2em; }`
固定ページ	`#page-about .hero { background: #f0f0f0; }`

プラグインによる独自CSS領域

専用プラグインが用意する管理画面内の編集エリアです。

代表例：
- Simple Custom CSS and JS
- WPCode
- CSS Hero
メリット：CSS以外にJS編集や条件分岐設定なども可能 ✨
インターフェース：コードエディタ風、スニペット管理ができる

スクロールできます

プラグイン名	主な特徴
Simple Custom CSS and JS	CSS/JS両方を追加、バージョン管理機能あり
WPCode	フックやショートコードで読み込み制御が柔軟
CSS Hero	GUIでドラッグ＆ドロップ感覚のビジュアル編集が可能

以上の5つの場所を使い分けることで、安全かつ効率的にWordPressサイトの見た目を調整できます😊。

基本的な編集方法

カスタマイザーで追加CSSを反映させる

管理画面から手軽にスタイルを追記し、リアルタイムプレビューで確認できます。

外観 > カスタマイズ を開く
左メニュー下部の 「追加CSS」 を選択
エディタにCSSを記述し、画面右で即時プレビューを確認
問題なければ 「公開」 をクリック

メリット：

コードを書く場所が一箇所で分かりやすい 😊
プレビュー反映がスピーディ

注意点：

大量のCSS管理には向かない
テーマやプラグインで追加CSS欄が制限される場合がある

子テーマを作成してCSSを上書きする

親テーマを壊さず、更新にも強い方法です。

テーマフォルダ内に 子テーマ用ディレクトリ（例：twentytwentyfive-child）を作成
以下のように style.css を用意

   /*
   Theme Name: Twenty Twenty-Five Child
   Template: twentytwentyfive
   */
   /* ここからカスタムスタイル */
   h2 {
     color: #0073aa;
   }

functions.php を作成し、親テーマのCSSを読み込む

   <?php
   add_action( 'wp_enqueue_scripts', function() {
     wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
   } );

管理画面の 外観 > テーマ で子テーマを有効化

スクロールできます

ファイル名	役割
style.css	子テーマのスタイル上書き／テーマ情報ヘッダー
functions.php	親テーマCSSの読み込み

メリット：

親テーマ更新でカスタマイズが消えない 🔒
複雑なカスタムも整理可能

テーマエディタから直接編集する

WordPress管理画面内でテーマファイルをそのまま編集します。

外観 > テーマファイルエディター を開く
右側のファイル一覧から style.css を選択
コードを追記・修正し、「ファイルを更新」 をクリック

メリット：

管理画面だけで作業完結

注意点：

誤編集でサイトが真っ白になるリスク ⚠️
テーマ更新で変更が上書きされる

FTPでCSSファイルを上書きアップロードする

ローカル環境で編集し、安全に反映させる方法です。

FTPクライアント（例：FileZilla）を起動しサーバーに接続
/wp-content/themes/あなたのテーマ/style.css をローカルにダウンロード
エディタでCSSを修正・保存
修正後のファイルをサーバー上にアップロード（上書き）
ブラウザでキャッシュをクリアし、変更を確認 ✨

スクロールできます

手順	操作内容
接続設定	ホスト・ユーザー名・パスワードを入力
ファイル転送	テーマフォルダ → ローカルでダウンロード／アップロード
確認作業	キャッシュ削除後、反映状況をブラウザでチェック

メリット：

安全にバックアップを取りながら編集可能
細かなバージョン管理がしやすい

プラグイン名	コード管理	ビジュアル編集	ページ単位設定	無料／有料
Simple Custom CSS and JS	◎	–	–	無料
SiteOrigin CSS	△	◎	–	無料
WP Add Custom CSS	◎	–	◎	無料
CSS Hero	△	◎	–	有料
WPCode（旧Header Footer Code Manager）	◎	–	◎	無料／有料

ページごとに異なるスタイルを設定する方法

特定のページや投稿だけにスタイルを当てたいときは、以下の5つの方法があります。

それぞれメリット・注意点を踏まえて使い分けましょう。

内でPHP条件分岐して埋め込む

管理画面のテーマファイルエディターなどで、header.php の <head> 内に直接書き込みます。

<?php if ( is_page('about') ) : ?>
  <style>
    /* 固定ページ「about」のみ適用 */
    body { background-color: #f0f8ff; }
    .page-title { color: #0073aa; }
  </style>
<?php endif; ?>

メリット：
- コードがすぐ反映され、プラグイン不要 🎉
注意点：
- テーマ更新時に上書きされやすい ⚠️
- <head> が汚れやすいので整理を忘れずに

functions.phpで表示条件ごとに読み込む

functions.php にCSSファイルの読み込みを追加し、条件に応じて切り替えます。

add_action( 'wp_enqueue_scripts', function() {
  if ( is_single() && in_category('news') ) {
    wp_enqueue_style( 'news-style', get_stylesheet_directory_uri() . '/css/news.css' );
  }
  elseif ( is_page_template('template-contact.php') ) {
    wp_enqueue_style( 'contact-style', get_stylesheet_directory_uri() . '/css/contact.css' );
  }
});

メリット：
- ファイル分割で管理がスッキリ 🗂
- キャッシュ効率も良い
注意点：
- PHPの知識が必要

投稿エディタ内にインライン記述する

ブロックエディタ（Gutenberg）やクラシックエディタのHTMLモードで直接CSSを記述します。

<!-- クラシックエディタの例 -->
<div class="custom-box" style="border: 2px solid #0073aa; padding: 10px;">
  ここだけ枠線を付けたいとき
</div>

メリット：
- 手軽にその場で調整可能 ✏️
注意点：
- 再利用性が低く、コードが散らかりやすい
- 大量のスタイルには不向き

カスタムフィールドでCSSフィールドを追加

Advanced Custom Fields（ACF）などで「CSS」用の入力欄を作り、テンプレート内で出力します。

<?php
$custom_css = get_field('page_css');
if ( $custom_css ) : ?>
  <style>
    <?php echo esc_html( $custom_css ); ?>
  </style>
<?php endif; ?>

メリット：
- 管理画面から誰でも編集できる 🔧
- ページごとに柔軟にカスタム
注意点：
- ACFなどプラグイン導入が必須

専用プラグイン（例：WP Add Custom CSS）を利用

プラグインが用意する投稿・固定ページ専用のCSS入力欄を活用します。

スクロールできます

プラグイン名	特徴
WP Add Custom CSS	投稿・固定ページごとにCSSを入力できる
Simple Custom CSS	グローバル用とページ用の２つを用意

メリット：
- プラグインだけで完結 ✅
- 後から編集しやすい
注意点：
- プラグインに依存するため、サポート終了リスクあり

これらの方法を組み合わせることで、特定ページだけのデザインを安全かつ効率的に実現できます😊。

運用規模やメンテナンス性を考えて最適な手法を選びましょう！

スタイルが反映されない際のチェックと対策

ブラウザの開発者ツールで適用状況を確認

対象の要素を右クリック→「検証」（Chrome）でDevToolsを起動
ElementsパネルでHTML構造を確認
StylesパネルでどのCSSが当たっているか、無効化されているルールをチェック
問題の行をクリックすると、リアルタイムに編集できる

Tip：無効化されたプロパティは打ち消し線が引かれるため、原因をすぐ特定できます🔍

セレクタの詳細度（優先順位）の見方

IDセレクタ（例：#header）は最も強力（100）
クラス・属性・疑似クラス（例：.btn、[type="text"]、:hover）は中程度（10）
タグセレクタ（例：h1、p）は弱い（1）
インラインスタイル（例：style="..."）はさらに強力

スクロールできます

種類	例	優先度スコア
インライン	`<div style="...">`	1000
ID	`#main`	100
クラス・疑似クラス	`.nav`,`:hover`	10
タグ	`p`, `h2`	1

キャッシュをクリアする

保存したスタイルが反映されない場合、ブラウザやサーバーキャッシュが原因かもしれません。

ブラウザ→Ctrl＋F5（Windows）／Cmd＋Shift＋R（Mac）で強制リロード
プラグインやCDNのキャッシュがある場合は管理画面からクリア
キャッシュ系プラグイン（例：W3 Total Cache、WP Super Cache）を一時停止して確認

ポイント：キャッシュは反映遅延だけでなく、古いファイルにアクセスさせる原因にもなります⚠️

セレクタやプロパティの誤記を修正

タイプミスやセミコロンの抜けで反映されないことも多いです。

/* NG例（セミコロン忘れ） */
.button {
  background-color: #ff6600
  padding: 10px;
}

/* OK例 */
.button {
  background-color: #ff6600;
  padding: 10px;
}

よくあるミス
- セミコロン ; の付け忘れ
- 波かっこ {} の閉じ忘れ
- プロパティ名のスペルミス（例：background-colr）

チェックリスト

[ ] セミコロンは全部あるか
[ ] {} の対応は正しいか
[ ] スペルミスがないか

読み込み順の調整と「!important」の活用

同じプロパティが複数箇所で指定されていると、後から読み込まれたものが優先されます。

読み込み順の見直し
- 子テーマや追加CSSが親テーマより後に読み込まれるか確認
- 関数やプラグインでenqueueの順序を調整
!important の使用

   .btn {
     color: #ffffff !important;
   }

メリット：どんなルールよりも優先される
注意点：乱用すると管理が難しくなるため、最終手段として使用する

スクロールできます

対策	優先度	メリット	注意点
読み込み順の見直し	高	根本的に解決できる	functions.phpの編集が必要
`!important` の活用	中	即効性が高い	長期的には可読性・保守性を下げる

上記の手順で順番にチェックすると、多くの場合スタイル未反映の原因を特定し、確実に修正できます😊。

CSSスキル向上のための学習サイト

サイト名	特徴
MDN Web Docs	– 標準仕様に基づく網羅的なリファレンス – 実例コード付きで理解しやすい 👍
CSS-Tricks	– 実践的なチュートリアルやトラブルシュート記事が豊富 – “Complete Guide” 系まとめが便利 🎯
W3Schools	– 入門者向けのステップ・バイ・ステップ形式 – インタラクティブな編集・実行環境付き 🔧
Smashing Magazine	– モダンCSSやUX視点の記事が充実 – ケーススタディで実務に近いスキルを習得できる 💡
CSS Reference	– ビジュアルリファレンスでプロパティの効果を一覧表示 – アニメーションやレイアウト例が見やすい ✨
Envato Tuts+	– 動画・記事のハイブリッド講座 – プロジェクト形式で学ぶ応用例が豊富 🎥
freeCodeCamp	– 実践的なコーディングチャレンジで学ぶ – コース修了後に認定証を取得可能 🏆