ブロックテーマの子テーマでCSSが一切効かなかった原因

症状：書いたCSSが一行も効かない

WordPressのブロックテーマ（Twenty Twenty-Five）で子テーマを作りました。やりたかったのは、表に罫線を引くことと、コードの背景に色を付けることです。どちらもCSSで書けば済む話なので、子テーマの style.css に書きました。

ところが、保存して表示を確認してもまったく変化がありません。罫線も出ないし、コードの背景も白いままです。

ここで最初に疑ったのは、いつもの「セレクタが違う」「詳細度が足りない」「キャッシュが残っている」あたりでした。CSSが効かないときの原因としては、まずそこを見るのが普通です。でも、書き方を変えても、セレクタを変えても、何をやっても結果が変わりませんでした。

原因：style.css がそもそも読み込まれていなかった

方針を変えて、ブラウザでページのHTMLを直接確認しました。すると、子テーマの style.css を読み込む記述がどこにも出ていませんでした。

つまり、CSSが効かなかったのではなく、CSSがブラウザに届いていなかったということです。ファイルは確かに存在していて、中身も書かれているのに、ページからは一度も参照されていませんでした。

調べて分かったのは、ブロックテーマの子テーマは、style.css を自動では読み込まないということです。子テーマを作ってCSSを置けば当然読まれる、と思い込んでいたのが間違いでした。

「効かない」と「届いていない」は別物

この2つは症状が同じに見えます。画面が変わらないという意味では区別がつきません。ですが原因はまったく別で、対処も別です。

状態	見え方	直す場所
CSSが届いていない	何を書いても変化なし	読み込みの設定
CSSは届いているが効かない	一部だけ効かない／上書きされる	CSSの中身

「何を書いても変化がない」というのは、届いていない側のサインでした。一部だけおかしいのではなく全部おかしいときは、中身ではなく経路を疑ったほうが早いです。

対処：functions.php で明示的に読み込ませる

子テーマの functions.php で wp_enqueue_style を書いて、style.css を明示的に読み込ませました。これで、それまで一切反映されなかったCSSがそのまま反映されました。罫線もコードの背景も、書いた通りに出ました。

キャッシュ対策にファイル更新時刻を使う

読み込ませたあとに問題になるのがキャッシュです。CSSを修正しても古いものが表示されると、また「効かない」と勘違いします。

そこで、バージョン指定に filemtime(get_stylesheet_directory().'/style.css') を使いました。ファイルの更新時刻をバージョンとして渡す形です。style.css を編集すればバージョンが変わるので、更新のたびに手でバージョン番号を書き換える必要がなくなります。

同じ日にもう一つ：アイキャッチ画像も「作っただけ」では出ない

同じ日に、まったく同じ構造の問題にもう一度ぶつかりました。アイキャッチ画像です。

画像を作って、記事にアイキャッチとして登録しました。それでも表示されませんでした。ここでも最初は画像そのものや設定を疑いましたが、原因は別のところにありました。

ブロックテンプレートに post-featured-image ブロックを置いて、初めて表示されました。登録することと、表示することは別の作業だったわけです。

• 子テーマに style.css を置く → それだけでは読み込まれない
• 記事にアイキャッチを登録する → それだけでは表示されない

• functions.php で wp_enqueue_style を書く → 反映された
• テンプレートに post-featured-image ブロックを置く → 表示された

この日に学んだ考え方

2件とも構造が同じでした。「用意した」だけで、「出力する側に置いていなかった」のです。ファイルは存在する、設定は済んでいる、それでも画面に出ない。この状態のとき、用意したものをいくらいじっても何も変わりません。

ブロックテーマでは、出力されるHTMLがテンプレート側で決まります。だから「置いたものが自動で出てくる」という前提を捨てて、出力される側に自分で置いたか確認するのが確実でした。CSSなら読み込みの記述、アイキャッチならブロックです。

なお、これはTwenty Twenty-Fiveで子テーマを作った私の環境で確認した内容です。他のブロックテーマでも同じかどうかは試していないので分かりません。