【WordPress】オリジナルページ作成後、メインページのCSSが効かない時の対処法まとめ

私はWordPressでサイトを作成しており、下層ページ１ページだけオリジナルのページを作成しています。

テーマとかは一切無視してまっさらな状態からデザインコーディングしています！

オリジナルページの作り方は別記事で説明しているので説明を省きます👇

ただ、そんな中「テーマを使用したメインページ」の修正を行おうとしたら、子テーマの style.css が反映されない問題に遭遇しました。

今回はそのときの原因と解決方法のまとめです。

私は無料テーマ「Lightning」を使用しています。

反映されない原因候補
方法① 切り分け方法（すぐできるテスト）
方法② 検証ツールでエラーが出てないか確認
方法③ FileZillaでファイルがあるか／内容更新されてるか確認
まとめ

反映されない原因候補

1. 子テーマの style.css が実際に読み込まれていない

子テーマの functions.php で親テーマCSSしか読み込んでいない可能性があります。
正しくはこんな形で両方読み込む必要があります👇

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style') );
}

👉 もし子テーマのCSS について functions.php で記述されていなければ、style.css を更新しても一切反映されません。

2. CSSが読み込まれているが優先度で負けている

親テーマのCSSやプラグインCSSが 子テーマのCSSより後に読み込まれている と、上書きされてしまいます。
この場合は 子テーマのCSSを強制的に最後に読み込む か、!important を付けて試してみると確認できます。

👉 試しに body { background: red !important; } と書いても変わらなければ、子テーマCSSが読み込まれていない可能性大。

3. 編集しているファイルが別物

Lightning の子テーマが複数ある（child-theme と child-theme-master など）
実際に有効化している子テーマと、編集した子テーマが違う

👉 有効化しているテーマ名を「外観 → テーマ」から再確認してみてください。

4．WordPressテーマエディタの保存が反映されない（サーバー権限問題）

私は、オリジナルページのCSSを、FileZillaを使ってファイルをサーバーにあげていたのですが、FileZillaを確認してみると、ちゃんとオリジナルのCSSも、子テーマのCSSも、更新日時がテーマファイルエディタで変更した日時と一緒でした。

FileZilla 上は更新日時が変わっていても、実際の中身が古いままのケースもあります。
FileZilla で直接 style.css を開いて、中身が本当に変更されているか確認する（後述参照）

5. キャッシュに邪魔されている（今回の解決ポイント！）

私はまさにここでハマりました。
管理画面やFTPからCSSを更新しても、ブラウザには古いCSSがキャッシュされていて新しいスタイルが適用されない状態でした。

👉 解決方法は「スーパーリロード」

Mac：⌘ + Shift + R
Windows：Ctrl + Shift + R

これで強制的にブラウザキャッシュを無視して読み込んでくれるので、編集内容が反映されました！

リロードについて、他の記事で詳しく解説しているので、気になる方はご参照ください！

方法① 切り分け方法（すぐできるテスト）

ここからは、スーパーリロードで解決する前にやったことなどをまとめたのでご紹介します。

スーパーリロードをやっても反映されない場合は試してみてください！

子テーマの style.css にこう書いて保存
　body { background: yellow !important; }
ブラウザでサイトを確認
- 背景が黄色になる → 読み込まれている
- 変化なし → 読み込まれていない（functions.phpやテーマ設定を要チェック）

方法② 検証ツールでエラーが出てないか確認

私は最初に検証ツールで確認しましたが、何度再読み込みしても、テーマファイルエディタで変更した内容が反映されませんでした。

エラーを確認

エラーを確認すると

https://test-wp.wew.jp/wp-content/themes/lightning/_g3/style.css?ver=6.8.2 net::ERR_ABORTED 404 (Not Found)

というエラーが出ていました。

どういうことか

WordPress（Lightning 親テーマ）が 存在しないCSSファイル _g3/style.css を読み込もうとしている
でもサーバー上にそのファイルが無いので「404エラー（見つかりません）」になっている

その結果、CSSが正しく読み込まれず、子テーマのCSSもうまく反映されない可能性が高いのです。

考えられる原因

（１）Lightning 親テーマの更新で、CSSのパスが変わった

_g3/style.css というディレクトリ/ファイルがなくなった or 別の場所に移動した。

（２）キャッシュやバージョン違いで古いファイルを参照している

以前のバージョンでは _g3/style.css があったが、今は削除されている。
でも子テーマやWordPress設定がまだそれを読み込もうとしている。

方法③ FileZillaでファイルがあるか／内容更新されてるか確認

WindowsではWinSCPを使用していましたが、MacBookに変更したので、FileZillaを使用しています。

FileZillaを使用した、ファイルが入っているかの確認手順について簡単にご説明します。

① FileZillaを開く

左側が「ローカルPCのファイル」
右側が「サーバー上のファイル」になっています。

② ホスト名などを入力して接続

一番上の入力欄に、「ホスト」「ユーザー名」「パスワード」「ポート番号」を入力して、クイック接続

（ホスト名などは、サーバー管理画面で確認できると思います。私は初回契約時にメールに送られてきたので、それを使用しました！）

③ 右側（サーバー側）で子テーマのフォルダを開く

通常は：/wp-content/themes/子テーマ名/
その中に style.css があれば、OK！

④ 表示／編集

style.css ファイルを右クリック → 表示/編集を選ぶ

FileZillaが自動でエディタ（通常はメモ帳やVSCode）でファイルを開いてくれます。

「ファイルの種類に関連づけられたプログラムがありません」と出た

👉　「FileZillaでcssファイルを開こうとしたけど、どのアプリで編集する？」という確認画面

MacでCSSを編集するなら、以下のどれかを選ぶとOKです。

テキストエディットで開く
- 選択肢にある「テキストファイルにデフォルトのエディターを使用」を選べば、標準の「テキストエディット」で開けます。
- ただし、改行やインデントが見づらいので、CSS編集にはあまり向きません。
VSCodeで開く（おすすめ）
- すでにVSCodeを入れているなら、カスタムプログラムを使用 にチェックを入れて、参照からVSCodeのアプリを指定すれば、次回からFileZillaの「表示/編集」ボタンで直接VSCodeが開きます。
Sublime Textや他のコードエディタ
- 他のエディタを持っているなら、それを指定してもOKです。