はじめに
「テーマのデザインを少し変えたい」「フォントや色をサイト全体で統一したい」——WordPressのCSSカスタマイズは目的に応じた正しい方法を選ぶことで、テーマ更新後も維持できる安全な変更が可能です。
症状・原因
WordPressのデザインをCSSで変更しようとしたとき、「どこにCSSを書けばいいか分からない」「CSSを書いたのに反映されない」「テーマ更新で消えた」という問題が発生します。目的と規模に応じた正しい追加方法を選択することが重要です。
解決手順
ステップ1：追加CSSの場所を目的で選ぶ
| 方法 | 場所 | 適切な用途 |
|------|------|-----------|
| カスタマイザー「追加CSS」 | 外観→カスタマイズ→追加CSS | 少量の調整（〜50行） |
| 子テーマのstyle.css | テーマファイル | テーマ全体の大幅変更 |
| wp_enqueue_style() | functions.php | 外部CSSファイルを読み込む |
| ページビルダーCSS | Elementor等の設定 | ページビルダー使用時 |
// functions.phpで外部CSSファイルを読み込む（推奨）
add_action( 'wp_enqueue_scripts', function() {
wp_enqueue_style(
'my-custom-style',
get_stylesheet_directory_uri() . '/css/custom.css',
[ 'parent-style' ], // 依存するスタイルシートのハンドル
filemtime( get_stylesheet_directory() . '/css/custom.css' ) // バージョン（キャッシュバスト）
);
} );ステップ2：正しいCSSセレクターを特定する
【ブラウザの開発者ツールでセレクターを特定する手順】
1. Chromeで変更したい要素を右クリック
2. 「検証」（Inspect）をクリック
3. Elementsタブで要素のHTML構造を確認
4. Stylesタブで現在適用されているCSSを確認
5. セレクターをコピーして自分のCSSに追加/* よく使うWordPressのCSSセレクター */
/* サイト全体 */
body { }
.site-content { }
.container { }
/* ヘッダー */
#site-header { }
.site-title { }
.site-title a { }
/* ナビゲーション */
.nav-menu { }
.nav-menu li { }
.nav-menu a { }
.nav-menu a:hover { }
/* 投稿リスト */
.post { }
.entry-title { }
.entry-title a { }
.entry-meta { }
.entry-content { }
.entry-content p { }
/* サイドバー */
.widget { }
.widget-title { }
/* フッター */
#site-footer { }ステップ3：詳細度（Specificity）の問題を解決する
/* CSSが反映されない場合の対処法 */
/* ❌ 詳細度が低くて上書きできない */
p { color: red; }
/* ✅ より具体的なセレクターで詳細度を上げる */
.entry-content p { color: red; }
/* ✅ または親要素を追加する */
#main .entry-content p { color: red; }
/* !importantは最終手段（多用しない） */
.entry-content p { color: red !important; }
/* WordPressのブロックエディタースタイルを上書き */
.wp-block-paragraph { color: #333 !important; }
/* Gutenbergブロックの余白を調整 */
.wp-block-group {
padding: 2rem;
}
.wp-block-columns {
gap: 2rem;
}ステップ4：レスポンシブデザインを実装する
/* css/custom.css: レスポンシブ対応のカスタムCSS */
/* ベーススタイル（モバイルファースト） */
.site-content {
padding: 16px;
font-family: 'Noto Sans JP', sans-serif;
line-height: 1.8;
}
.entry-title {
font-size: 1.5rem;
color: #1d2327;
border-left: 4px solid #2271b1;
padding-left: 12px;
}
/* タブレット（768px以上） */
@media (min-width: 768px) {
.site-content {
padding: 32px;
}
.entry-title {
font-size: 2rem;
}
.entry-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
}
/* デスクトップ（1024px以上） */
@media (min-width: 1024px) {
.site-content {
max-width: 1200px;
margin: 0 auto;
padding: 48px 32px;
}
.entry-grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* ダークモード対応 */
@media (prefers-color-scheme: dark) {
body {
background: #1d2327;
color: #f0f0f1;
}
.entry-title {
color: #f0f0f1;
}
}ステップ5：CSS変数でテーマカラーを管理する
/* :root でCSS変数（カスタムプロパティ）を定義 */
:root {
--color-primary: #2271b1;
--color-secondary: #1d2327;
--color-accent: #d63638;
--color-success: #00a32a;
--color-background: #f0f0f1;
--color-text: #3c434a;
--font-base: 'Noto Sans JP', sans-serif;
--font-size-base: 16px;
--line-height-base: 1.8;
--spacing-sm: 8px;
--spacing-md: 16px;
--spacing-lg: 32px;
--spacing-xl: 64px;
--border-radius: 4px;
--shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
/* 変数を使ってスタイルを定義 */
body {
font-family: var(--font-base);
font-size: var(--font-size-base);
line-height: var(--line-height-base);
color: var(--color-text);
}
.btn-primary {
background: var(--color-primary);
color: #fff;
padding: var(--spacing-sm) var(--spacing-md);
border-radius: var(--border-radius);
}
.btn-primary:hover {
background: color-mix(in srgb, var(--color-primary) 80%, black);
}注意事項
- カスタマイザーの「追加CSS」はデータベースに保存されます。テーマを切り替えると消えることがあるため、大規模なCSSは子テーマの
style.cssまたは外部CSSファイルで管理してください。 !importantの多用は後のメンテナンスを困難にします。まずは詳細度（Specificity）を上げることで解決できないか試してください。- テーマのCSSを直接編集すると、テーマ更新時に消えます。必ず子テーマか
wp_enqueue_style()で追加したCSSファイルを使ってください。
まとめ
WordPressのCSSカスタマイズは「目的に応じた追加場所の選択→開発者ツールでセレクター特定→詳細度の調整→レスポンシブ対応→CSS変数で管理」の流れで整備できます。関連記事：WordPressで子テーマを正しく作成する方法、WordPressのフォントをカスタマイズする方法。