WordPressのデザインをカスタマイズしたいけれど、「どこにCSSを書けばいいの？」 と迷ったことはありませんか？
WordPressには「style.css」「追加CSS」「カスタムCSS」などの編集方法があり、それぞれ適用範囲や使い分けが異なります。
本記事では、CSSの適用範囲・編集場所・読み込み順を分かりやすく解説し、初心者でもスムーズにカスタマイズできるように説明します。
また、テーマの更新時にCSSが消えない方法についても詳しく解説します。
WordPressは、どのテーマでもCSSの編集方法は共通しています。そのため、無料テーマと有料テーマで違いはありません。
各CSSの適用範囲と編集場所
WordPressでCSSを編集する方法は主に3つあります。
| CSSの種類 | 適用範囲 | 編集場所 |
|---|---|---|
| style.css | サイト全体 | 「テーマファイルエディター」 |
| 追加CSS | サイト全体 or 特定の要素 | 「カスタマイズ」→「追加CSS」 |
| カスタムCSS | 特定のページやブロック | 投稿記事の下 |
編集方法の選び方ポイント
- サイト全体を変更するなら
- style.css
- 簡単な調整をするなら
- 追加CSS
- 特定のページの編集をするなら
- カスタムCSS
- カスタムCSS
それでは実際に各CSSの編集場所を解説していきます。
WordPressの各CSSの編集方法
style.css（テーマのCSS）の編集手順
style.cssはサイト全体のデザインを統一する基本のCSSファイルです。主に、レイアウトやフォント、色などのスタイルを設定します。
注意！ 親テーマの「style.css」を直接編集すると、テーマの更新時に変更が上書きされてしまいます。子テーマの「style.css」を編集するようにしましょう。
「外観」→「テーマファイルエディター」を開く
下の画像の右上赤枠内、編集するテーマが「子テーマ」なっていることを確認してください。
Cocoonの場合 → cocoon child
SWELLの場合 → SWELL CHILD
※赤枠で囲っている、コードの部分を編集や削除したり、その上にコードを記述したりしないでください。
必ず下の画像のスペースに入力するようにしてください。
ポイント！
- 既存のコードを削除・編集せず、ファイルの末尾に追加するのが安全です。
- 大規模なデザイン変更やサイト全体のスタイルを適用したい場合におすすめ。
追加CSSの編集手順
追加CSSは、「外観」→「カスタマイズ」→「追加CSS」から編集できます。
テーマの更新に影響されず、安全にカスタマイズできますが、大量のコードを書くのには向いていません。
「外観」→「カスタマイズ」を開く
記述後に「公開」をクリックして保存します。
ポイント！
- 簡単なデザイン変更や一時的な調整に最適。
- style.cssを編集するのが不安な場合は、追加CSSを活用すると安全。
- 大規模なCSSカスタマイズには向いていないため、適度に使用するのがおすすめ。
カスタムCSSの編集手順（特定のページ・要素のカスタマイズ）
カスタムCSSは、特定のページや要素だけに適用できるCSSです。
下のステップは、既に公開済みの記事に対して、CSS編集を行う場合の例です。
新規記事でも似たような手順となります。
「投稿」→「投稿一覧」をクリック
記述後に「保存」をクリックして保存します。
ポイント！
- 特定のページやブロックだけデザインを変更したい場合に便利。
CSSの読み込み順と適用の仕組み
WordPressのCSSの読み込み順
WordPressのCSSは、以下の順に読み込まれます。
- テーマ、子テーマのstyle.css（最初に適用）
- 追加CSS（style.cssより優先される）
- カスタムCSS（最も優先される）
基本的に、後から読み込まれるCSSが優先されるため、適用の仕組みを理解することが重要です。
CSSの優先順位
CSSの適用優先度は、後から読み込まれるスタイルが優先されます。また、詳細度（セレクタの強さ）や!importantの使用によっても変わります。
例：優先順位の高い順
#id名（idセレクタ）.class名（クラスセレクタ）div（タグセレクタ）!important（すべてを上書き）
後から読み込まれるCSSほど優先されるため、style.cssより追加CSSやカスタムCSSの方が適用されやすくなります。特定のスタイルを強制的に適用したい場合は、!important を利用するのも手です。ただし、乱用すると管理が複雑になるため、適切な場面でのみ使用しましょう。
まとめ
各CSSの適用範囲と編集場所の整理
- サイト全体を変更 → style.css（子テーマを利用）
- 一時的な変更や細かいカスタマイズ → 追加CSS
- 特定のページや要素をカスタマイズ → カスタムCSS
CSS編集のよくある疑問と対策
- CSSが反映されない？ → キャッシュをクリア、セレクタの詳細度を確認
- テーマの更新で変更が消える？ → 子テーマを使えば安心
- どの方法が最適？ → サイトの目的に応じて選ぶ
効率的なCSS編集のコツ
- 変更を試す前にブラウザの開発ツール（DevTools）を活用
- 不要な
!importantの使用は避ける - 子テーマやプラグインを活用し、管理しやすい環境を作る
WordPressのCSS編集にはさまざまな方法がありますが、それぞれの特徴を理解し、適切な手法を選ぶことで、効率的にデザインを調整できます。
