WordPress CSSの編集方法を初心者向けに解説｜反映されない原因とカスタマイズ手順

はじめに

WordPress CSSを編集できるようになると、テーマのデザインを自分好みに細かく調整できます。たとえば、見出しの装飾を変える、本文の文字サイズを読みやすくする、リンクやボタンの色を変更する、スマホ表示だけ余白を調整する、といったカスタマイズが可能です。

一方で、CSSを編集したのに「変更が反映されない」「どこにCSSを書けばいいかわからない」「テーマ更新で消えないか不安」と悩む初心者も少なくありません。WordPressでは、追加CSS、テーマファイル、子テーマ、プラグイン、サイトエディターなど、CSSを編集する方法が複数あるためです。

この記事では、WordPress CSSの編集方法を初心者向けにわかりやすく解説します。CSSの基本的な書き方から、編集前の準備、反映されない原因と対処法、よく使うカスタマイズ例まで順番に紹介します。

1. WordPressのCSS編集でできること

WordPressのCSS編集とは、サイトの見た目を調整するためにCSSコードを追加・変更する作業です。記事本文や画像そのものを変えるのではなく、表示のされ方を変えるのがCSSの役割です。

1-1. CSSとはサイトの見た目を調整するコード

CSSは「Cascading Style Sheets」の略で、Webページのデザインを指定するための言語です。HTMLが文章や画像などの構造を作るのに対し、CSSは色、サイズ、余白、配置、線、背景、アニメーションなどの見た目を調整します。

たとえば、以下のCSSを書くと、本文の文字色を黒に近いグレーへ変更できます。

CSS
body {
  color: #333;
}

このように、どの部分に、どのデザインを、どの値で適用するかを指定するのがCSSです。

1-2. WordPressでCSSを編集すると変更できるデザイン例

WordPressでCSSを編集すると、以下のようなデザイン変更ができます。

・見出しの文字サイズや装飾を変える
・本文の行間や余白を調整する
・リンク色を変更する
・ボタンの背景色や角丸を変える
・サイドバーやウィジェットの余白を整える
・ヘッダーやフッターの背景色を変える
・スマホ表示だけレイアウトを調整する
・特定の固定ページや投稿ページだけデザインを変える

テーマの設定画面だけでは変更できない細かな部分も、CSSを使えば調整できる場合があります。

1-3. HTML・PHP・テーマ設定との違い

CSSと混同しやすいものに、HTML、PHP、テーマ設定があります。

HTMLは、見出し、段落、画像、リンクなど、ページの構造を作るための言語です。CSSは、そのHTMLに対して見た目を指定します。

PHPは、WordPressテーマやプラグインの動作に関わるプログラムです。記事一覧を表示する、条件に応じてコンテンツを出し分ける、テンプレートを読み込むといった処理に使われます。

テーマ設定は、WordPress管理画面から色やフォント、レイアウトなどを変更できる機能です。コードを書かずに変更できるため便利ですが、テーマ側が用意していない細かな調整まではできないことがあります。

つまり、デザインの細部を調整したいときに使うのがCSSです。ただし、構造や機能そのものを変えたい場合は、HTMLやPHP、テーマファイルの編集が必要になることもあります。

1-4. 初心者がCSS編集前に知っておくべき注意点

初心者がWordPress CSSを編集するときは、いきなりテーマファイルを直接変更しないことが重要です。CSSの記述ミスだけなら表示が少し崩れる程度で済むこともありますが、編集場所を間違えると、テーマ更新時に変更内容が消えたり、管理画面から元に戻しにくくなったりします。

特に、親テーマのstyle.cssを直接編集する方法は慎重に扱うべきです。テーマ更新によって変更が上書きされる可能性があるため、長く使うカスタマイズは「追加CSS」や「子テーマ」に書くのが安全です。

2. WordPressでCSSを編集する前の準備

CSS編集は比較的取り組みやすいカスタマイズですが、事前準備をせずに作業すると、表示崩れが起きたときに原因を見つけにくくなります。編集前に、バックアップ、子テーマ、キャッシュ、変更履歴を確認しておきましょう。

2-1. 編集前に必ずバックアップを取る

CSSを編集する前に、必ずバックアップを取りましょう。最低限、以下を保存しておくと安心です。

・現在のCSSコード
・編集するテーマファイル
・WordPress全体のバックアップ
・データベースのバックアップ

追加CSSに数行書くだけであれば、変更前のコードをテキストエディタにコピーしておくだけでも復旧しやすくなります。本格的にテーマファイルを編集する場合は、バックアッププラグインやサーバーのバックアップ機能を使うのがおすすめです。

2-2. 親テーマを直接編集しない

WordPressテーマには、親テーマと子テーマがあります。親テーマとは、サイトのデザインや機能の土台になるテーマです。多くの場合、WordPress管理画面からインストールして有効化しているテーマが親テーマです。

親テーマのファイルを直接編集すると、テーマ更新時に変更内容が上書きされる可能性があります。そのため、長期的に残したいCSSは、親テーマではなく、追加CSSや子テーマに記述するのが基本です。

2-3. 子テーマを用意するべきケース

子テーマは、親テーマのデザインや機能を引き継ぎながら、カスタマイズ内容を別ファイルとして管理できる仕組みです。WordPress公式のテーマハンドブックでも、子テーマは親テーマを直接編集せずにカスタマイズするための方法として説明されています。子テーマを使うと、親テーマの更新を受けてもカスタマイズ内容を失いにくくなります。

以下のような場合は、子テーマを用意するのがおすすめです。

・CSSを大量に追加する
・functions.phpも編集する予定がある
・テンプレートファイルもカスタマイズしたい
・長期間同じテーマを使う予定がある
・制作案件や企業サイトなど、管理性を重視したい

一方で、見出しの色を少し変える、本文の余白を微調整する程度なら、追加CSSでも十分です。

2-4. 変更箇所をメモして元に戻せる状態にする

CSS編集では、「いつ」「どこに」「何の目的で」コードを追加したかをメモしておくと、後から修正しやすくなります。

たとえば、以下のようにコメントを入れておくと管理しやすくなります。

CSS
/* 記事本文の行間調整 */
.post-content p {
  line-height: 1.9;
}

変更内容が増えるほど、どのCSSがどのデザインに影響しているのか分かりにくくなります。小さな変更でも、目的別にコメントを入れて整理しておきましょう。

2-5. キャッシュ系プラグインやサーバー設定を確認する

CSSを変更しても反映されない原因として多いのがキャッシュです。WordPressでは、ブラウザ、プラグイン、サーバー、CDNなど、複数の場所でキャッシュが使われることがあります。

編集前に、キャッシュ系プラグインを使っているか、サーバー側に高速化機能があるか、CDNを利用しているかを確認しておきましょう。CSS編集後に反映されない場合、キャッシュ削除が必要になることがあります。

3. WordPressでCSSを編集・追加する主な方法

WordPressでCSSを編集する方法は複数あります。初心者向けの方法から、上級者向けの方法まで、それぞれの特徴を理解しておきましょう。

3-1. 外観カスタマイズの「追加CSS」から編集する方法

初心者にもっともおすすめなのが、WordPress管理画面の「追加CSS」を使う方法です。

クラシックテーマの場合、一般的には以下の手順で編集できます。

1. WordPress管理画面にログインする

2. 「外観」→「カスタマイズ」を開く

3. 「追加CSS」を選択する

4. CSSコードを入力する

5. プレビューで確認する

6. 「公開」をクリックする

追加CSSは、現在のテーマにCSSを追加して上書きするための機能です。WordPress公式ドキュメントでも、追加CSSは現在のテーマを上書きするCSSコードを追加できるパネルとして説明されています。

追加CSSのメリットは、管理画面から編集でき、変更内容をプレビューしながら確認できることです。テーマファイルを直接触らないため、初心者でも比較的安全に使えます。

3-2. テーマファイルエディターでstyle.cssを編集する方法

WordPress管理画面の「外観」→「テーマファイルエディター」から、テーマ内のstyle.cssを編集する方法もあります。

style.cssは、WordPressテーマにとって重要なファイルです。WordPress公式のテーマハンドブックでは、すべてのテーマにstyle.cssが必要であり、テーマ情報を登録する役割を持つほか、多くのテーマではフロントエンド用CSSとしても使われると説明されています。

ただし、初心者が親テーマのstyle.cssを直接編集するのはおすすめしません。テーマ更新時に変更が消える可能性があり、記述ミスをした場合に原因を探しにくくなるためです。

この方法は、子テーマを使っている場合や、テーマ構造を理解している場合に限定して使うとよいでしょう。

3-3. 子テーマのstyle.cssにCSSを追加する方法

子テーマを作成している場合は、子テーマのstyle.cssにCSSを追加できます。

子テーマのstyle.cssには、親テーマを指定するためのヘッダー情報が必要です。WordPress公式ドキュメントでは、子テーマのstyle.cssにTemplateフィールドを追加し、親テーマのフォルダ名と一致させる必要があると説明されています。

例として、以下のように記述します。

CSS
/*
Theme Name: My Child Theme
Template: parent-theme-folder
*/

その下に、カスタマイズ用のCSSを追加していきます。

CSS
/* 見出しデザイン */
.entry-content h2 {
  border-left: 5px solid #333;
  padding-left: 12px;
}

子テーマを使うと、カスタマイズ内容を親テーマと分けて管理できるため、長期運用に向いています。

3-4. CSS追加用プラグインを使う方法

CSS追加用のプラグインを使う方法もあります。追加CSSと似ていますが、テーマに依存せずCSSを管理しやすいプラグインもあります。

プラグインを使うメリットは、テーマを変更してもCSSを残しやすいこと、管理画面上でコードを整理しやすいことです。一方で、プラグインを増やしすぎると管理が複雑になったり、表示速度に影響したりする場合があります。

すでに多くのプラグインを使っている場合は、本当に必要か検討してから導入しましょう。

3-5. FTP・ファイルマネージャーでCSSファイルを編集する方法

FTPソフトやレンタルサーバーのファイルマネージャーを使って、CSSファイルを直接編集する方法もあります。

この方法では、wp-content/themes/テーマ名/内のstyle.cssや、テーマ独自のCSSファイルを編集します。管理画面に入れない場合でもファイルを修正できるため、トラブル復旧に役立つことがあります。

ただし、誤って必要なファイルを削除したり、別のテーマのファイルを編集したりすると、サイト表示に影響する可能性があります。初心者は、バックアップを取ったうえで慎重に作業しましょう。

3-6. ブロックテーマ・サイトエディター利用時のCSS編集方法

ブロックテーマを使っている場合は、「外観」→「エディター」からサイトエディターを開き、「スタイル」機能でデザインを調整できます。WordPress公式ドキュメントでは、サイトエディターのスタイル機能からサイト全体のカスタムCSSを追加でき、ブロックごとの追加CSSも設定できると説明されています。

ブロックテーマでは、まずスタイル設定で色、タイポグラフィ、余白、レイアウトなどを調整し、それでも対応できない部分にCSSを追加するのがおすすめです。

サイト全体にCSSを適用したい場合は、スタイル画面内の「追加CSS」を使います。特定のブロックだけにCSSを適用したい場合は、ブロックごとの「追加ブロックCSS」を使う方法があります。

4. 初心者におすすめのCSS編集方法

WordPress CSSの編集方法はいくつかありますが、初心者は安全性と復旧しやすさを優先するのがおすすめです。

4-1. まずは「追加CSS」から始めるのがおすすめ

初心者が最初に使うなら、「追加CSS」がもっとも扱いやすいです。管理画面から編集でき、テーマファイルを直接変更しないため、比較的安全にカスタマイズできます。

また、変更をプレビューしながら確認できるため、CSSを書いた結果をすぐにチェックできます。失敗した場合も、追加したCSSを削除すれば元に戻せます。

4-2. 小さなデザイン変更なら追加CSSで十分

以下のような小さな変更であれば、追加CSSで十分です。

・見出しの色を変える
・本文の文字サイズを変える
・リンク色を変更する
・ボタンの角丸を調整する
・スマホ表示の余白を少し変える

数行から数十行程度のCSSであれば、追加CSSにまとめても管理しやすいでしょう。

4-3. 本格的にカスタマイズするなら子テーマを使う

サイト全体のデザインを大きく変えたい場合や、CSS以外にPHPテンプレートも編集したい場合は、子テーマを使うのがおすすめです。

子テーマを使えば、親テーマの更新を受けながら、独自のカスタマイズを維持できます。カスタマイズ内容をファイル単位で管理できるため、制作会社やチームで運用するサイトにも向いています。

4-4. テーマ更新でCSSが消えないようにする方法

テーマ更新でCSSを消さないためには、親テーマのファイルを直接編集しないことが重要です。

おすすめの保存場所は、以下のいずれかです。

・追加CSS
・子テーマのstyle.css
・CSS管理用プラグイン
・独自のCSSファイルを子テーマから読み込む方法

なお、サイトエディターのカスタムCSSはテーマ更新で上書きされない一方、テーマを切り替えるとクリアされる場合があると公式ドキュメントで説明されています。 テーマ変更の予定がある場合は、CSSを別途バックアップしておきましょう。

4-5. 編集方法ごとのメリット・デメリット比較

追加CSSは、初心者でも扱いやすく、小さな変更に向いています。ただし、CSSが増えると管理しにくくなることがあります。

テーマファイルエディターは、管理画面からstyle.cssを編集できるのが便利ですが、親テーマを直接編集すると更新で消えるリスクがあります。

子テーマは、本格的なカスタマイズに向いています。管理性が高く、テーマ更新にも強い一方、初期設定に少し知識が必要です。

CSS追加用プラグインは、テーマに依存せずCSSを管理しやすい場合があります。ただし、プラグイン管理が増える点には注意が必要です。

FTPやファイルマネージャーは、自由度が高く復旧作業にも使えますが、初心者にはやや難しく、誤操作のリスクがあります。

5. WordPress CSSの基本的な書き方

CSSを編集するには、基本構造を理解しておく必要があります。難しく見えるかもしれませんが、基本は「どこを」「何を」「どう変えるか」の3つです。

5-1. CSSの基本構造「セレクタ・プロパティ・値」

CSSは、以下のような形で書きます。

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

たとえば、本文の文字色を変える場合は以下のようになります。

CSS
body {
  color: #333333;
}

この場合、bodyがセレクタ、colorがプロパティ、#333333が値です。

セレクタは「どの部分に適用するか」、プロパティは「何を変更するか」、値は「どのように変更するか」を表します。

5-2. 色を変更するCSSの書き方

色を変更するときは、colorやbackground-colorを使います。

文字色を変更する例です。

CSS
.entry-content p {
  color: #333;
}

背景色を変更する例です。

CSS
.site-header {
  background-color: #f5f5f5;
}

リンク色を変更する場合は、以下のように書きます。

CSS
a {
  color: #0066cc;
}

マウスを乗せたときの色を変えたい場合は、:hoverを使います。

CSS
a:hover {
  color: #004999;
}

5-3. 文字サイズ・行間・余白を変更するCSSの書き方

文字サイズはfont-size、行間はline-height、余白はmarginやpaddingで指定します。

本文の文字サイズと行間を変更する例です。

CSS
.entry-content p {
  font-size: 16px;
  line-height: 1.9;
}

見出しの下に余白を追加する例です。

CSS
.entry-content h2 {
  margin-bottom: 24px;
}

内側の余白を調整する場合はpaddingを使います。

CSS
.entry-content h2 {
  padding: 12px 16px;
}

marginは要素の外側の余白、paddingは要素の内側の余白です。

5-4. 見出し・本文・リンク・ボタンをカスタマイズする例

見出しを装飾する例です。

CSS
.entry-content h2 {
  border-left: 5px solid #333;
  padding-left: 12px;
  font-size: 24px;
}

本文を読みやすくする例です。

CSS
.entry-content p {
  font-size: 16px;
  line-height: 1.9;
  margin-bottom: 1.6em;
}

リンク色を変える例です。

CSS
.entry-content a {
  color: #0073aa;
  text-decoration: underline;
}

ボタンをカスタマイズする例です。

CSS
.wp-block-button__link {
  background-color: #333;
  color: #fff;
  border-radius: 6px;
  padding: 12px 24px;
}

テーマによってセレクタ名が違うため、うまく反映されない場合は検証ツールで確認しましょう。

5-5. スマホ表示だけCSSを変えるメディアクエリの使い方

スマホ表示だけデザインを変えたい場合は、メディアクエリを使います。

CSS
@media screen and (max-width: 768px) {
  .entry-content p {
    font-size: 15px;
    line-height: 1.8;
  }
}

このCSSは、画面幅が768px以下のときだけ適用されます。

スマホで余白を狭くする例です。

CSS
@media screen and (max-width: 768px) {
  .site-content {
    padding: 16px;
  }
}

レスポンシブ対応のテーマでは、スマホ用CSSが別に指定されていることがあります。そのため、PCでは反映されてもスマホでは反映されないケースがあります。

5-6. コメントアウトでCSSを管理しやすくする方法

CSSでは、以下のようにコメントを書けます。

CSS
/* ここにコメントを書く */

実際には、次のように使います。

CSS
/* 記事本文の調整 */
.entry-content p {
  line-height: 1.9;
}

/* ボタンデザイン */
.wp-block-button__link {
  border-radius: 8px;
}

コメントを入れておくと、後から見返したときに何のためのCSSか分かりやすくなります。CSSが増えてきたら、見出し、本文、リンク、ボタン、スマホ対応など、目的別に整理しましょう。

6. 変更したい場所のCSSセレクタを調べる方法

WordPress CSSを編集するときに重要なのが、正しいセレクタを指定することです。セレクタが間違っていると、CSSを書いても反映されません。

6-1. ブラウザの検証ツールを使う

変更したい場所のセレクタを調べるには、ブラウザの検証ツールを使います。

Google Chromeの場合は、変更したい部分を右クリックして「検証」を選択します。すると、画面の横や下にHTMLとCSSの情報が表示されます。

検証ツールを使うと、以下のことを確認できます。

・要素のHTML構造
・class名やid名
・現在適用されているCSS
・打ち消されているCSS
・どのファイルのCSSが効いているか

CSSが反映されない原因を調べるときにも、検証ツールは非常に役立ちます。

6-2. class名・id名を確認する

CSSでは、class名やid名を使って対象を指定することが多いです。

class名を指定する場合は、先頭に.を付けます。

CSS
.entry-content {
  max-width: 800px;
}

id名を指定する場合は、先頭に#を付けます。

CSS
#site-header {
  background-color: #fff;
}

WordPressテーマでは、記事本文に.entry-content、ボタンに.wp-block-button__linkなどのclass名が使われることがあります。ただし、テーマによって異なるため、必ず自分のサイトで確認しましょう。

6-3. どのCSSが適用されているか確認する

検証ツールでは、選択した要素にどのCSSが適用されているかを確認できます。右側のスタイル欄に、現在効いているCSSが一覧で表示されます。

ここで、どのセレクタが使われているか、どのプロパティが効いているか、どのCSSファイルから読み込まれているかを確認できます。

CSSを追加する前に、すでに適用されているCSSを確認すると、上書きしやすくなります。

6-4. 打ち消されているCSSを見つける

検証ツールでCSSを確認すると、打ち消し線が付いているプロパティがあります。これは、別のCSSに上書きされている状態です。

たとえば、以下のように表示されている場合、color: red;は効いていません。

CSS
color: red;
color: blue;

後から読み込まれたCSSや、より詳細度の高いセレクタが優先されるためです。打ち消されているCSSを見つけることで、なぜ変更が反映されないのかを判断できます。

6-5. WordPressテーマごとにセレクタが違う点に注意する

WordPressでは、テーマごとにHTML構造やclass名が異なります。あるテーマで使えたCSSが、別のテーマでは使えないこともあります。

たとえば、記事本文のセレクタが.entry-contentのテーマもあれば、.post-contentや.article-bodyのテーマもあります。

ネット上のCSS例をそのまま貼り付けても反映されない場合は、セレクタが自分のテーマと合っていない可能性があります。必ず検証ツールで確認しましょう。

7. WordPressでCSSが反映されない主な原因

WordPress CSSが反映されない原因は、記述ミスだけではありません。キャッシュ、セレクタ、優先順位、読み込み順、テーマ仕様など、複数の要因があります。

7-1. ブラウザキャッシュが残っている

もっとも多い原因のひとつがブラウザキャッシュです。ブラウザは表示速度を上げるために、CSSファイルを一時保存します。そのため、CSSを変更しても、古いCSSが表示され続けることがあります。

この場合、スーパーリロードやキャッシュ削除で解決することがあります。

7-2. WordPressやプラグインのキャッシュが残っている

キャッシュ系プラグインを使っている場合、WordPress側に古いCSSが残っていることがあります。

代表的な高速化プラグインでは、CSSを結合・圧縮・遅延読み込みする機能があります。これらの機能が原因で、変更したCSSがすぐに反映されないことがあります。

7-3. サーバー・CDNのキャッシュが残っている

レンタルサーバーの高速化機能やCDNを使っている場合、サーバー側やCDN側にキャッシュが残っていることがあります。

特に、CloudflareなどのCDNや、サーバー独自のキャッシュ機能を使っている場合は、WordPress側のキャッシュ削除だけでは反映されないことがあります。

7-4. CSSの記述ミスがある

CSSの記述ミスもよくある原因です。

たとえば、以下のようなミスがあります。

・波括弧{}の閉じ忘れ
・セミコロン;の抜け
・プロパティ名のスペルミス
・全角記号を使っている
・コメントアウトの閉じ忘れ
・色コードの指定ミス

1か所のミスが、それ以降のCSSに影響することもあります。

7-5. セレクタの指定が間違っている

セレクタが間違っていると、CSSは対象の要素に適用されません。

たとえば、テーマでは.entry-contentが使われているのに、.post-contentにCSSを書いても反映されません。

ネット上のCSS例を使う場合は、自分のテーマのclass名やHTML構造と一致しているか確認しましょう。

7-6. CSSの優先順位・詳細度で負けている

CSSには優先順位があります。簡単にいうと、より具体的に指定されたCSSが優先されます。

たとえば、以下の場合は、後者のほうが具体的なので優先されやすくなります。

CSS
a {
  color: red;
}

.entry-content a {
  color: blue;
}

そのため、a { color: red; }と書いても、テーマ側で.entry-content a { color: blue; }と指定されていれば、赤にならないことがあります。

7-7. 後から読み込まれるCSSに上書きされている

CSSは、基本的に後から読み込まれた指定が優先されます。同じ詳細度のCSSが複数ある場合、後に書かれたものが有効になります。

追加CSSに書いた内容がテーマやプラグインのCSSより後に読み込まれれば上書きしやすいですが、読み込み順によっては意図通りにならないこともあります。

7-8. テーマやプラグイン側のCSSが強く指定されている

テーマやプラグインによっては、かなり詳細なセレクタや!importantを使ってデザインを指定している場合があります。

その場合、通常のCSSを書いても上書きできないことがあります。検証ツールでどのCSSが優先されているか確認し、必要に応じてセレクタの詳細度を上げましょう。

7-9. 編集しているファイルや場所が違う

意外と多いのが、編集しているファイルや場所が違うケースです。

たとえば、以下のようなミスがあります。

・有効化していないテーマのstyle.cssを編集している
・親テーマではなく別テーマを編集している
・子テーマを有効化していない
・PC用CSSを編集したがスマホ用CSSで上書きされている
・追加CSSではなく別のCSS管理プラグインに書いている

CSSを編集する前に、現在有効化しているテーマと編集場所を確認しましょう。

7-10. レスポンシブ用CSSに上書きされている

PCでは反映されるのにスマホでは反映されない場合、レスポンシブ用CSSに上書きされている可能性があります。

テーマによっては、画面幅ごとにCSSが細かく分かれています。スマホ用のメディアクエリ内で別の指定がされていると、通常のCSSが上書きされることがあります。

8. WordPress CSSが反映されないときの対処法

CSSが反映されないときは、やみくもにコードを増やすのではなく、原因をひとつずつ切り分けることが大切です。

8-1. スーパーリロードで表示を確認する

まず試したいのがスーパーリロードです。スーパーリロードを行うと、ブラウザキャッシュを無視してページを再読み込みできます。

Windowsの場合は、一般的に以下の操作を使います。

Ctrl + F5

Macの場合は、ブラウザによって異なりますが、以下のような操作が使われます。

Command + Shift + R

CSSを少し変更しただけなら、スーパーリロードで反映されることがあります。

8-2. ブラウザキャッシュを削除する

スーパーリロードで解決しない場合は、ブラウザのキャッシュを削除します。Chromeであれば、閲覧履歴データの削除から「キャッシュされた画像とファイル」を削除します。

また、シークレットウィンドウで確認すると、キャッシュの影響を切り分けやすくなります。

8-3. WordPressキャッシュプラグインのキャッシュを削除する

キャッシュ系プラグインを使っている場合は、管理画面からキャッシュを削除します。

プラグインによっては、CSSの結合・圧縮ファイルを再生成する必要があります。CSS編集後は、ページキャッシュだけでなく、CSS・JS最適化関連のキャッシュも削除しましょう。

8-4. サーバー・CDNキャッシュを削除する

サーバーやCDNのキャッシュを使っている場合は、それらも削除します。

レンタルサーバーの管理画面に「高速化」「キャッシュ削除」「コンテンツキャッシュ」などの項目がある場合があります。CDNを使っている場合は、CDN側のキャッシュ削除も必要です。

8-5. CSSの文法ミスをチェックする

CSSが反映されない場合は、文法ミスを確認しましょう。

特に、以下をチェックしてください。

・{と}が正しく閉じているか
・プロパティの後に:があるか
・値の後に;があるか
・全角スペースや全角記号が混ざっていないか
・コメントアウトが閉じているか

たとえば、以下はセミコロンが抜けています。

CSS
.entry-content p {
  color: #333
  line-height: 1.9;
}

正しくは以下です。

CSS
.entry-content p {
  color: #333;
  line-height: 1.9;
}

8-6. セレクタを正しく指定し直す

CSSの文法が正しくても反映されない場合は、セレクタを確認します。

検証ツールで変更したい要素を選択し、実際のclass名やid名を確認しましょう。テーマによってセレクタが違うため、ネット上のサンプルをそのまま使っても反映されないことがあります。

8-7. CSSの詳細度を上げる

テーマ側のCSSに負けている場合は、セレクタの詳細度を上げます。

たとえば、以下で反映されない場合、

CSS
a {
  color: red;
}

より具体的に指定します。

CSS
.entry-content a {
  color: red;
}

さらに必要であれば、以下のように親要素を追加します。

CSS
.single-post .entry-content a {
  color: red;
}

ただし、詳細度を上げすぎると後から管理しにくくなるため、必要最小限にしましょう。

8-8. CSSを後ろに記述して上書きする

同じ詳細度のCSSでは、後に書かれたCSSが優先されます。追加CSS内で同じ対象に複数の指定がある場合は、後ろに書いた内容が有効になります。

たとえば、以下では青が適用されます。

CSS
.entry-content a {
  color: red;
}

.entry-content a {
  color: blue;
}

CSSが増えてきたら、同じセレクタが重複していないか確認しましょう。

8-9. 必要な場合のみ!importantを使う

どうしてもCSSが反映されない場合、!importantを使う方法があります。

CSS
.entry-content a {
  color: red !important;
}

ただし、!importantは強制的に優先度を上げる指定です。多用すると、後からCSSを修正しにくくなります。

まずは、セレクタの見直し、詳細度の調整、読み込み順の確認を行い、それでも必要な場合だけ使いましょう。

8-10. 検証ツールで原因を切り分ける

最終的には、検証ツールで原因を切り分けるのがもっとも確実です。

確認すべきポイントは以下です。

・追加したCSSが読み込まれているか
・対象の要素にCSSが適用されているか
・打ち消し線が付いていないか
・別のCSSに上書きされていないか
・スマホ用CSSが効いていないか
・キャッシュされた古いCSSを見ていないか

CSSが反映されないときは、コードを増やす前に、どこで止まっているのかを確認しましょう。

9. よく使うWordPress CSSカスタマイズ例

ここからは、WordPressでよく使うCSSカスタマイズ例を紹介します。テーマによってセレクタが異なるため、必要に応じて自分のサイトに合わせて調整してください。

9-1. 見出しデザインを変更する

記事内のh2見出しを装飾する例です。

CSS
.entry-content h2 {
  border-left: 6px solid #333;
  padding: 12px 16px;
  background-color: #f5f5f5;
  font-size: 24px;
}

h3見出しに下線を付ける例です。

CSS
.entry-content h3 {
  border-bottom: 2px solid #ddd;
  padding-bottom: 8px;
  font-size: 20px;
}

見出しは記事の読みやすさに大きく影響します。装飾しすぎず、本文との区切りが分かりやすいデザインにしましょう。

9-2. 本文の文字サイズや行間を変更する

本文の文字サイズと行間を調整する例です。

CSS
.entry-content p {
  font-size: 16px;
  line-height: 1.9;
  margin-bottom: 1.6em;
}

スマホでは少し小さくする場合は、以下のように書きます。

CSS
@media screen and (max-width: 768px) {
  .entry-content p {
    font-size: 15px;
    line-height: 1.8;
  }
}

本文は読みやすさが重要です。文字サイズを小さくしすぎたり、行間を詰めすぎたりしないようにしましょう。

9-3. リンク色を変更する

記事本文内のリンク色を変更する例です。

CSS
.entry-content a {
  color: #0073aa;
  text-decoration: underline;
}

マウスを乗せたときの色を変える例です。

CSS
.entry-content a:hover {
  color: #005177;
}

リンクは、通常のテキストと区別できる色にすることが大切です。色だけでなく、下線を付けるとユーザーにとって分かりやすくなります。

9-4. ボタンの色・角丸・余白を変更する

WordPressのボタンブロックをカスタマイズする例です。

CSS
.wp-block-button__link {
  background-color: #333;
  color: #fff;
  border-radius: 8px;
  padding: 12px 28px;
  font-weight: bold;
}

ホバー時の色を変える例です。

CSS
.wp-block-button__link:hover {
  background-color: #555;
  color: #fff;
}

ボタンはクリックしてもらうための重要な要素です。背景色、文字色、余白、角丸を調整して、押せることが分かるデザインにしましょう。

9-5. サイドバーやウィジェットの余白を調整する

サイドバーのウィジェット間に余白を追加する例です。

CSS
.widget {
  margin-bottom: 32px;
}

ウィジェットタイトルを調整する例です。

CSS
.widget-title {
  font-size: 18px;
  border-bottom: 2px solid #ddd;
  padding-bottom: 8px;
}

サイドバーは情報量が多くなりやすいため、余白を適切に取ると見やすくなります。

9-6. ヘッダーやフッターの背景色を変更する

ヘッダーの背景色を変更する例です。

CSS
.site-header {
  background-color: #ffffff;
}

フッターの背景色と文字色を変更する例です。

CSS
.site-footer {
  background-color: #333;
  color: #fff;
}

フッター内のリンク色を変える例です。

CSS
.site-footer a {
  color: #fff;
}

テーマによって.site-headerや.site-footerでは反映されない場合があります。その場合は検証ツールで正しいセレクタを確認してください。

9-7. 特定ページだけCSSを適用する

WordPressでは、ページごとにbodyタグへ固有のclassが付くことがあります。たとえば、固定ページIDが123の場合、以下のようなclassが付くことがあります。

CSS
.page-id-123

このclassを使うと、特定ページだけCSSを適用できます。

CSS
.page-id-123 .entry-content h2 {
  color: #0066cc;
}

特定の投稿だけに適用したい場合は、投稿IDに応じたclassを確認します。

CSS
.postid-456 .entry-content h2 {
  color: #cc0000;
}

ランディングページやお問い合わせページなど、特定ページだけデザインを変えたいときに便利です。

9-8. スマホ表示だけデザインを調整する

スマホ表示だけ余白を調整する例です。

CSS
@media screen and (max-width: 768px) {
  .entry-content {
    padding-left: 16px;
    padding-right: 16px;
  }
}

スマホ表示だけ見出しを小さくする例です。

CSS
@media screen and (max-width: 768px) {
  .entry-content h2 {
    font-size: 20px;
  }
}

スマホでは画面幅が狭いため、PCと同じ余白や文字サイズでは読みにくくなることがあります。実機やブラウザのレスポンシブ表示で確認しながら調整しましょう。

10. CSS編集で失敗しないためのコツ

WordPress CSSを安全に編集するには、少しずつ変更し、確認しながら進めることが大切です。

10-1. 一度に大量のCSSを書き換えない

一度に大量のCSSを書き換えると、表示が崩れたときに原因を見つけにくくなります。

最初は、1か所変更して確認、問題なければ次を変更、という流れで進めましょう。特に、見出し、本文、ボタン、スマホ表示など複数の箇所を同時に変更する場合は注意が必要です。

10-2. 変更前後を見比べながら作業する

CSS編集では、変更前と変更後を見比べることが重要です。可能であれば、別タブで編集前の状態を開いておき、変更後と比較しましょう。

また、PCだけでなく、スマホやタブレット表示も確認してください。PCではきれいに見えても、スマホでは余白が広すぎる、文字が大きすぎる、ボタンがはみ出すといったことがあります。

10-3. テーマ独自の設定画面も確認する

CSSを書く前に、テーマ独自の設定画面で変更できないか確認しましょう。

多くのWordPressテーマには、色、フォント、見出し、レイアウト、ボタン、ヘッダー、フッターなどを変更できる設定があります。テーマ設定で変更できる内容をCSSで無理に上書きすると、管理が複雑になることがあります。

まずはテーマ設定で対応し、足りない部分だけCSSで補うのがおすすめです。

10-4. プラグインのCSSと競合していないか確認する

お問い合わせフォーム、目次、吹き出し、ランキング、ブロック拡張などのプラグインは、独自のCSSを読み込むことがあります。

プラグインのCSSと自分で追加したCSSが競合すると、意図しないデザインになる場合があります。特定のプラグイン部分だけデザインが崩れる場合は、そのプラグインのCSSが影響していないか確認しましょう。

10-5. 表示速度に影響する不要なCSSを増やさない

CSSを追加しすぎると、管理が難しくなるだけでなく、表示速度にも影響する場合があります。

使っていないCSS、重複したCSS、過去のカスタマイズで不要になったCSSは整理しましょう。特に、追加CSSに長期間コードを足し続けている場合は、定期的に見直すことが大切です。

10-6. テーマ更新後に表示崩れがないか確認する

テーマを更新すると、HTML構造やclass名、既存CSSが変わることがあります。その結果、これまで効いていたCSSが効かなくなったり、逆に予期しない場所に適用されたりする場合があります。

テーマ更新後は、以下のページを確認しましょう。

・トップページ
・投稿ページ
・固定ページ
・カテゴリー一覧
・お問い合わせページ
・スマホ表示
・ヘッダーとフッター
・ボタンやリンク

表示崩れを早めに見つけることで、サイトの品質を保ちやすくなります。

11. WordPress CSS編集に関するよくある質問

ここでは、WordPress CSS編集で初心者が疑問に感じやすいポイントをまとめます。

11-1. WordPressのCSSはどこに書けばいい？

初心者は、まず「外観」→「カスタマイズ」→「追加CSS」に書くのがおすすめです。クラシックテーマであれば、管理画面から簡単にCSSを追加できます。

ブロックテーマを使っている場合は、「外観」→「エディター」→「スタイル」から追加CSSを設定できる場合があります。

本格的にカスタマイズする場合は、子テーマのstyle.cssに書く方法が向いています。

11-2. 追加CSSとstyle.cssはどちらを使うべき？

小さなデザイン変更なら追加CSSで十分です。見出し、本文、リンク、ボタンなどを少し調整する程度であれば、追加CSSのほうが手軽です。

一方で、CSSの量が多い場合や、長期的に管理したい場合は、子テーマのstyle.cssを使うのがおすすめです。

親テーマのstyle.cssを直接編集するのは、テーマ更新で消える可能性があるため避けましょう。

11-3. CSSを編集しても元に戻せる？

追加CSSに書いた内容であれば、追加したコードを削除すれば元に戻せます。ただし、削除前にコードをバックアップしておくと安心です。

テーマファイルを直接編集した場合は、元のファイルが分からないと戻すのが難しくなることがあります。そのため、編集前に必ずバックアップを取りましょう。

11-4. テーマを変更すると追加CSSはどうなる？

追加CSSやサイトエディターのカスタムCSSは、テーマに紐づいて管理される場合があります。テーマを変更すると、以前のテーマで使っていたCSSが反映されなくなることがあります。

また、テーマを変えるとHTML構造やclass名も変わるため、CSS自体が残っていても効かなくなる場合があります。テーマ変更前には、追加CSSをコピーしてバックアップしておきましょう。

11-5. CSSだけでデザイン変更できない場合はある？

あります。CSSは見た目を調整するためのコードなので、HTML構造や機能そのものを変えることはできません。

たとえば、以下のような変更はCSSだけでは難しい場合があります。

・表示する項目を増やす
・記事一覧の出力順を変える
・特定の条件でコンテンツを出し分ける
・テーマのテンプレート構造を変更する
・フォームの機能を変更する

このような場合は、PHP、HTML、JavaScript、テーマ設定、プラグインの利用が必要になることがあります。

11-6. 初心者でもテーマファイルを編集して大丈夫？

初心者がいきなりテーマファイルを直接編集するのはおすすめしません。特に、親テーマのstyle.cssやfunctions.phpを直接編集すると、更新で消えたり、サイトにエラーが出たりする可能性があります。

まずは追加CSSから始め、慣れてきたら子テーマを使うのが安全です。テーマファイルを編集する場合は、必ずバックアップを取り、元に戻せる状態で作業しましょう。

11-7. CSSが一部だけ反映されないのはなぜ？

CSSが一部だけ反映されない場合は、以下の原因が考えられます。

・セレクタが一部の要素にしか合っていない
・テーマ側のCSSに上書きされている
・スマホ用CSSで上書きされている
・記述ミスで途中からCSSが無効になっている
・キャッシュが残っている
・プラグインのCSSと競合している

検証ツールで、反映されない要素にCSSが届いているか、打ち消されていないかを確認しましょう。

まとめ

WordPress CSSを編集すると、テーマ設定だけでは変更できない細かなデザインを調整できます。見出し、本文、リンク、ボタン、ヘッダー、フッター、スマホ表示など、さまざまな部分を自分好みにカスタマイズできます。

初心者は、まず「追加CSS」から始めるのがおすすめです。小さな変更であれば、追加CSSにコードを書くだけで十分対応できます。本格的にカスタマイズする場合や、テーマ更新後も安全に管理したい場合は、子テーマのstyle.cssを使いましょう。

CSSが反映されないときは、キャッシュ、記述ミス、セレクタの間違い、CSSの優先順位、読み込み順、レスポンシブ用CSSの上書きなどを順番に確認することが大切です。特に、ブラウザの検証ツールを使えば、どのCSSが効いているか、どのCSSが打ち消されているかを確認できます。

WordPress CSS編集で失敗しないコツは、一度に大きく変えず、バックアップを取り、変更内容をメモしながら少しずつ進めることです。安全な方法でCSSを追加し、サイトの見た目をより読みやすく、使いやすく整えていきましょう。