WordPressテーマにCSSを適用する3つの方法

WordPressテーマで見た目を整えるには、CSSを「どこに」「どの順番で」「どの範囲に」適用するかを整理することが重要です。
CSSの置き場所と読み込み方を正しく選ぶことで、表示崩れや読み込み漏れを防ぎ、保守もしやすくなります。

この記事では、WordPressテーマにCSSを適用する代表的な3つの方法を、役割と使い分けが分かる形で解説します。

1. style.css に書く（テーマの基本スタイル）

1-1. 概要

WordPressテーマの基本ファイルである style.css にCSSを記述する方法です。
テーマの「土台となるスタイル」をまとめる用途に向いています。

style.css は、テーマに必須の情報（テーマヘッダーコメント）を持つファイルでもあるため、テーマ構造の理解にもつながります。

1-2. メリット

• テーマの基本スタイルを1つに集約しやすい
• テーマの最小構成でも成立する
• 追加ファイル管理が不要で分かりやすい

1-3. 注意点

• CSSが増えると肥大化し、管理が難しくなりやすい
• ページ単位・機能単位の分割がしにくい
• 読み込み順（追加CSSとの優先順位）を意識する必要がある

1-4. こんなときに使う

• リセットCSS、タイポグラフィ、共通レイアウトなど「全体の基礎」
• 小規模テーマで、CSSを分割する必要が薄いケース

※style.css の役割やテーマに必要な記述の考え方は、関連して「style.cssの書き方」や「テーマの必須ファイル」も合わせて整理しておくと理解が深まります。

2. functions.php で読み込む（推奨：wp_enqueue_style）

2-1. 概要

WordPressの推奨方法は、functions.php でCSSを登録して読み込む方法です。
具体的には wp_enqueue_style() を使い、必要なCSSファイルを適切なタイミングで読み込みます。

「WordPressテーマでCSSを読み込む正しい方法（enqueueの基本）」を先に確認しておくと、全体像が掴みやすくなります。

2-2. 基本コード例

// functions.php
function mytheme_enqueue_styles() {
  wp_enqueue_style(
    'mytheme-style',
    get_stylesheet_uri(),
    array(),
    filemtime(get_stylesheet_directory() . '/style.css')
  );
}
add_action('wp_enqueue_scripts', 'mytheme_enqueue_styles');

2-3. メリット

• WordPressの仕組みに沿った方法で、他プラグインや子テーマとも整合性が取りやすい
• CSSファイルを複数に分割しやすい（例：layout.css / components.css など）
• 依存関係や読み込み順を管理しやすい

2-4. 注意点

• どのCSSがどこで読み込まれているか、設計ルールがないと追いづらくなる
• キャッシュ対策（バージョン指定）を考慮すると安定する

2-5. こんなときに使う

• CSSを機能単位・役割単位で分割したい
• 速度・保守性・拡張性を重視したい
• 将来的に子テーマや追加機能を見据える

※functions.php の基本やフック（add_action）の考え方が曖昧な場合は、「functions.phpの役割」「フックの基本」も合わせて確認するとスムーズです。

3. 追加CSSとして適用する（インライン・editor・theme.json など）

3つ目は「ファイルとして読み込む」以外の方法でCSSを適用する手段です。
用途は限定的ですが、適切に使うと「微調整」「編集画面の見た目統一」「ブロックテーマの設計」に役立ちます。

3-1. wp_add_inline_style() でインラインCSSを追加する

概要

すでに読み込んだスタイル（ハンドル）に対して、追加のCSSをインラインで差し込む方法です。

function mytheme_inline_css() {
  wp_enqueue_style('mytheme-style', get_stylesheet_uri());

  $css = "
    .site-header { position: sticky; top: 0; }
  ";
  wp_add_inline_style('mytheme-style', $css);
}
add_action('wp_enqueue_scripts', 'mytheme_inline_css');

向いている用途

• ほんの少量の追記（例：条件付きの微調整）
• PHP側の条件分岐で、CSSを出し分けたい場合

注意点

• 大量に書くと管理が崩れやすい
• インラインCSSが増えると可読性・保守性が下がりやすい

3-2. add_editor_style() で編集画面にもCSSを当てる

概要

投稿編集画面（ブロックエディタ）にもテーマの見た目を近づけたい場合は、編集画面用CSSを読み込む方法があります。

function mytheme_editor_style() {
  add_theme_support('editor-styles');
  add_editor_style('assets/css/editor-style.css');
}
add_action('after_setup_theme', 'mytheme_editor_style');

向いている用途

• フロントと編集画面のタイポグラフィを揃える
• エディタ内で見出し・段落の見た目を確認しやすくする

3-3. ブロックテーマでは theme.json を活用する

概要

ブロックテーマでは、デザイン設定を theme.json に寄せることで、CSSを「設定」として管理できます。
カラー・余白・フォントなどを統一しやすく、編集画面との一貫性も高まります。

向いている用途

• ブロックテーマで、設計を体系的に管理したい
• グローバルスタイル（色・文字・余白）を整理したい

注意点

• 従来テーマ（クラシックテーマ）中心の場合は、まず enqueue を優先した方が理解しやすい

3つの方法の使い分け早見表

よくあるつまずきポイント

CSSが反映されない

• 読み込み処理が入っていない（enqueueしていない）
• 読み込み順の問題で上書きされている
• キャッシュ（ブラウザ・プラグイン・CDN）が残っている

※読み込みの基本とチェック手順は「WordPressテーマでCSSを読み込む正しい方法」で整理しておくと原因切り分けが楽になります。

どこに書けばいいか迷う

• 共通の土台 → style.css（ただし肥大化注意）
• 機能単位で整理 → enqueue でファイル分割
• 微調整・条件付き → wp_add_inline_style
• 編集画面にも反映 → editor styles
• ブロックテーマ設計 → theme.json

まとめ

WordPressテーマにCSSを適用する方法は複数ありますが、基本の考え方は次の通りです。

• 土台は style.css（ただし増えすぎ注意）
• **運用の中心は enqueue（functions.php）**が安定
• 追加CSSは目的を限定して使う（inline / editor / theme.json）

CSSの管理が崩れやすいのは「増えたときの整理ルール」がない場合です。最初から読み込み方法と役割分担を決めておくと、テーマ開発がスムーズになります。

関連記事

• WordPressテーマでCSSを読み込む正しい方法（wp_enqueue_styleの基本）
• style.cssの書き方｜テーマに必須の記述と管理のコツ
• functions.phpの使い方｜初心者が最初に押さえるフックと役割
• WordPressテーマの基本構造と必須ファイル一覧
• CSSレイアウト設計の基本（崩れにくい設計の考え方）