2026年7月8日

WordPressのスタイルシートの構造と、CSSを安全に追加・管理する方法

テーマ・デザイン

WordPressの見た目は、テーマの style.css だけでなく、コアのブロック用CSS、theme.json から生成されるスタイル、プラグインのCSS、管理画面から入力した追加CSSが重なって決まります。どこで何が出力されているかが分かれば、「書いたCSSが効かない」「テーマの更新で消えた」といった問題を避けられます。この記事では、CSSが読み込まれる仕組み、目的に合った追加場所の選び方、子テーマでCSSを管理する方法を順に解説します。

WordPressでCSSが出力される仕組み

WordPressのCSSは、wp_enqueue_style() で登録されたファイルが、wp_head のタイミングで <link> タグとして出力されるのが基本です。出力されたタグには id="ハンドル名-css" が付くので、ページのソースを見れば、どのCSSがどのハンドル名で読み込まれているかが分かります。

一般的なサイトで読み込まれるCSSは、おおよそ次のグループに分かれます。

コアのブロック用CSS: 段落・画像・ボタンなど、ブロックエディタで作った部分の見た目です。ハンドル名 wp-block-library などで読み込まれます。ブロックテーマでは、ページで使われたブロックの分だけ個別に読み込む仕組みが既定で有効になっています。
グローバルスタイル: theme.json の設定や、サイトエディターのスタイル画面で選んだ色・文字サイズから生成されます。global-styles-inline-css というidの <style> タグとして出力されます。
テーマのCSS: style.css や、テーマが独自に読み込むCSSファイルです。
プラグインのCSS: フォームやスライダーなど、プラグインごとに読み込まれるものです。
追加CSS: 管理画面から入力したCSSです。クラシックテーマではカスタマイザーの「追加CSS」が、wp-custom-css というidの <style> タグで出力されます。ブロックテーマでは、サイトエディターのスタイル設定の中に追加CSSの入力欄があります（2026年10月現在）。

カスタマイザーの追加CSSは、wp_head の中でも後ろの方（優先度101）で出力されるため、通常のCSSファイルより後に読み込まれます。CSSは詳細度が同じなら後に書かれたものが優先されるので、追加CSSは既存の見た目を上書きするのに向いています。

一方、テーマやプラグインのCSS同士の順番は、登録された順番、wp_enqueue_style() の第3引数で指定する依存関係、使っているフックの優先度によって決まり、サイトごとに違います。「後で読み込まれるはず」と決めつけず、実際の順番はページのソースで確認します。

書いたCSSが効かないときの調べ方

CSSが反映されないときは、ブラウザの開発者ツールで対象の要素を選び、スタイルの一覧を見ます。自分のルールが表示されていて取り消し線が付いているなら、ほかのルールに負けています。表示すらされていないなら、セレクタが要素に当たっていないか、CSSファイル自体が読み込まれていません。

負けている場合の原因は、たいてい次のどちらかです。

詳細度が低い: テーマ側が .entry-content p のように指定していると、p だけのルールは後に書いても負けます。同じかそれより少し高い詳細度のセレクタで書きます。
読み込みが先: 詳細度が同じでも、先に読み込まれたCSSは負けます。依存関係を指定して、自分のCSSを後に読み込ませます。

!important を付けると一時的には効きますが、後から別の場所で上書きしたくなったときにさらに !important が必要になり、管理が難しくなります。最後の手段にとどめます。

CSSファイルを書き換えたのに古い見た目のままという場合は、キャッシュを疑います。ブラウザのキャッシュ、キャッシュプラグインやサーバーのページキャッシュ、CDNのキャッシュのどれかに古いファイルが残っていることが多く、後述するバージョン番号の付け方で起きにくくできます。

CSSを追加する場所の選び方

CSSを書く場所は、量と目的で選びます。

カスタマイザーやサイトエディターの追加CSSは、数行から数十行の調整に向いています。テーマを更新しても消えず、保存前にプレビューで確認できます。ただし、クラシックテーマの追加CSSはテーマごとに保存されるため、テーマを切り替えると新しいテーマには引き継がれません。量が増えると管理画面の入力欄では見通しが悪くなります。

子テーマのCSSファイルは、本格的にデザインを変える場合に向いています。ファイルとして管理できるので、複数ファイルへの分割、バックアップ、Gitでの履歴管理がしやすくなります。

親テーマの style.css を直接書き換える方法は避けます。テーマを更新すると、ファイルごと新しいものに置き換わり、書いた内容が消えます。

なお、特定のプラグインの出力だけを整えるCSSなど、テーマを変えても残したいものは、子テーマではなく自作の小さなプラグインで読み込む方法もあります。

子テーマでCSSを管理する

子テーマのフォルダには、最低限 style.css と functions.php を置きます。style.css の先頭には、次のようなヘッダーを書きます。

/*
Theme Name: My Child Theme
Template: parent-theme
Version: 1.0.0
*/

Template には、親テーマの表示名ではなく、wp-content/themes/ の中にある親テーマのフォルダ名を書きます。ここが違うと、子テーマが壊れたテーマとして扱われます。

次に functions.php でCSSを読み込みます。ここで注意したいのは、親テーマが自分の style.css をどう読み込んでいるかによって、必要なコードが変わることです。

親テーマが get_template_directory_uri() で自分の style.css を読み込んでいる場合、親のCSSはそのまま出力されます。子テーマ側は、親テーマのハンドル名を依存関係に指定して、子の style.css を追加するだけで足ります。
親テーマが get_stylesheet_uri() で読み込んでいる場合、子テーマを有効にするとその指定が子の style.css を指します。その結果、親の style.css は出力されず、子の style.css が親テーマのハンドル名で出力されます。この場合は、親テーマと同じハンドル名で親の style.css を先に登録します。

どちらに当たるかは、子テーマを有効にした状態でページのソースを見て、親テーマのフォルダにある style.css が出力されているかで判断します。後者の場合の例が次のコードです。

<?php
add_action( 'wp_enqueue_scripts', 'my_child_enqueue_styles' );
function my_child_enqueue_styles() {
	$theme         = wp_get_theme();
	$parent_handle = 'parent-theme-style'; // ソースの id="○○-css" で確認した親テーマのハンドル名

	// 親テーマと同じハンドル名で、親の style.css を先に登録する
	wp_enqueue_style(
		$parent_handle,
		get_template_directory_uri() . '/style.css',
		array(),
		$theme->parent()->get( 'Version' )
	);

	// 子テーマの style.css を親の後に読み込む
	wp_enqueue_style(
		'my-child-style',
		get_stylesheet_uri(),
		array( $parent_handle ),
		$theme->get( 'Version' )
	);
}

子テーマの functions.php は親テーマの functions.php より先に読み込まれるため、同じフック・同じ優先度であれば子テーマの処理が先に実行されます。すでに登録済みのハンドル名で後から登録しようとしても無視されるので、親テーマ側の読み込みは、ここで登録した親の style.css を指したままになります。親テーマが別の優先度で読み込んでいるとこの前提が崩れるため、反映後にソースを見て、親と子の style.css が1回ずつ、親、子の順で出力されていることを確かめます。

前者（親が自分で読み込んでいる）の場合は、コードの後半だけを使い、依存関係に親テーマのハンドル名を指定します。前半まで書くと、同じファイルが二重に読み込まれます。依存関係に存在しないハンドル名を書くと、そのCSS自体が出力されなくなる点にも注意が必要です。

CSSファイルを分けてキャッシュ対策をする

記述が増えてきたら、style.css はテーマのヘッダー情報だけにして、実際のCSSを別のファイルに分けると見通しが良くなります。読み込むときにファイルの更新時刻をバージョンとして渡すと、ファイルを書き換えるたびにURLの末尾が変わり、ブラウザに古いCSSが残る問題を防げます。

<?php
add_action( 'wp_enqueue_scripts', function () {
	$path = get_stylesheet_directory() . '/assets/css/custom.css';

	if ( file_exists( $path ) ) {
		wp_enqueue_style(
			'my-child-custom',
			get_stylesheet_directory_uri() . '/assets/css/custom.css',
			array( 'my-child-style' ),
			filemtime( $path )
		);
	}
}, 20 );

特定のページでしか使わないCSSは、is_singular( 'post' ) や is_page( 'contact' ) などの条件分岐で、必要なページだけで読み込むようにすると、ほかのページが軽くなります。

設定値によって色を変えたいときは、PHPでCSSファイルを生成するのではなく、wp_add_inline_style() で短いCSSを追加します。値は出力前にサニタイズします。

<?php
add_action( 'wp_enqueue_scripts', function () {
	$color = sanitize_hex_color( get_theme_mod( 'my_accent_color', '#0066cc' ) );

	if ( $color ) {
		wp_add_inline_style( 'my-child-style', ':root { --my-accent: ' . $color . '; }' );
	}
}, 20 );

編集画面の見た目もサイトに近づけたい場合は、after_setup_theme フックで add_theme_support( 'editor-styles' ) と add_editor_style() を使い、エディタ用のCSSを別に読み込みます。

まとめ

WordPressのCSSは wp_enqueue_style() で登録され、ソースの id="ハンドル名-css" で読み込み元を特定できる
カスタマイザーの追加CSSは後ろの方で出力されるため上書きに向くが、クラシックテーマではテーマごとの保存になる
CSSが効かないときは開発者ツールで、詳細度・読み込み順・キャッシュのどれが原因かを切り分ける
子テーマでは、親テーマが style.css をどう読み込んでいるかを確認してから、依存関係を正しく指定する
ファイルを分けたら filemtime() をバージョンに使い、キャッシュに古いCSSが残るのを防ぐ