初心者・独学でもわかる！WordPressのCSS編集の基本とおすすめの方法
WordPressでサイトのデザインを変更したいときは、CSSの編集が欠かせません。この記事では、独学者・初心者でも安心して取り組める「style.cssの編集方法」「追加CSSの使い方」「子テーマの活用法」について、わかりやすく解説します。
「ぼくら」の失敗談
1.「追加CSS」での編集とCSSファイル「style.css」の直接編集は、コードの変更が書き込まれる場所が同じだと思っていたので、思うように表示に反映されなかった。⇒「追加CSS」は、CSSファイルでなく、HTMLファイル内の<head>タグ内のコードが編集されている。
2.編集しても表示に反映されないので、編集方法が間違っているのだろうと思い、原因を探すために時間と労力を使ってしまった。⇒以前のキャッシュが残っており、キャッシュ削除で表示に反映される。
はじめに-CSSを編集したいけど、どこに書けばいいの？
WordPressでサイトの見た目を変えたいとき、CSSの編集が必要になります。 初心者がよく悩むのは「どこで編集すればいいのか？」という点です。 この記事では、「style.css」「追加CSS」「子テーマ」の3つの方法をそれぞれ分かりやすく解説します。 つまずきやすいポイントや、反映されないときの原因もまとめているので、安心してカスタマイズを始められます！
CSS編集の方法は3種類あります
① CSSファイル「style.css」を編集する方法
CSSのメインファイル「style.css」は、次の2つの方法で編集できます：
- WordPress管理画面から「style.css」を直接編集：
外観＞テーマファイルエディター - テキストエディタ＋FTPで編集：
一度、VSCodeなどのローカルエディタで編集してから、FTPでアップロード（独学者はこちらのほうが効率がよい。Emmet（エメット）は、VSCodeに標準搭載されている爆速コーディング支援機能。HTMLやCSSを省略記法で入力し、TabキーやEnterキーで展開することで、タイピング量を劇的に減らし、作業効率を大幅にアップできる。）
注意：親テーマを直接編集すると、テーマのアップデートで変更が消えることがあります。
② 追加CSSで編集する方法
追加CSSは「外観」＞「カスタマイズ」の中にある「追加CSS」項目から編集できます。
- 編集がすぐに反映される＆直感的で初心者向きなので、ちょっとしたカスタマイズに使います。また、テーマのアップデートでも上書きされにくいです。
- 実は、「style.css」でなく、 <head>タグ内に<style id=”wp-custom-css”>として追加されます。
- 通常のCSSよりも後に読み込まれるため、基本的には優先されます。
注意：ただし、style.cssの中に「！important」 やより強いセレクタがあると、反映されないこともあるので注意！
③ 子テーマを使って安全にカスタマイズ
親テーマの更新による上書きを防ぐには、「子テーマ」を使って編集します。
- 子テーマは、プラグイン「Child Theme Configurator」なら、1分で作成可能！です。
- 子テーマを有効化したら、style.cssを編集するか、追加CSSを使えばOKです。
注意：子テーマはカスタマイズの“安全対策”として超重要です。
CSSが反映されない？独学者が注意すべきポイントとは
CSSが反映されない原因は、下表のようにいくつかあります
| 原因 | 説明 |
|---|---|
| 読み込み順 | CSSは後から読み込まれたものが優先される |
| セレクタの強さ | .headerや.nav ul li aのように、強い指定は上書きされにくい |
| キャッシュ | ブラウザやWordpressのキャッシュが古いCSSを表示していることもある |
| ！importantの影響 | 他のCSSに、!important が使われていると追加CSSが効かない可能性がある |
まとめ｜CSS編集は焦らず「安全・確実」に
WordPressでCSSを編集する方法は複数ありますが、独学者・初心者にとって最も大切なのは「安全に編集できる環境を整えること」です。 子テーマの導入・追加CSSの使い方・style.cssの編集手順を覚えておけば、焦らずスムーズにデザインを変えていけます。 ぜひ、自分のサイトに合った方法でCSSの編集にチャレンジしてみましょう。
