WordPressのテーマを触りはじめると、必ず出会うのが style.css というファイルです。名前からして「デザインの中心はこれでしょ？」と思いますよね。
ところがブロックテーマの時代になって、この style.css の役割は大きく変わりました。かつての主役は、いまや表札になっています。この記事では、その「格下げ」の正体と、それでも style.css が消えずに残っている理由をお話しします。
そもそも style.css って何をするファイル？
昔ながらのWordPressテーマでは、style.css はまさに主役でした。
見出しの色、余白の大きさ、文字の太さ——サイトの見た目に関わることは、ほとんどすべてこの1枚に書き込んでいました。デザインを変えたければ style.css を開く。それが当たり前の入り口だったんです。
いわば、家じゅうの設計図が全部つまった1冊のノート。ここを見れば、その家がどんな見た目になるかが分かる。それくらい中心的な存在でした。
ブロックテーマで style.css は「表札」になった
ところがブロックテーマになって、状況が一変します。
見た目を決める仕事の大半を、theme.json という新しいファイルが引き受けるようになったんです。色のパレットも、文字の大きさも、余白のルールも、今は theme.json が管理しています。かつて style.css が握っていた主役の座を、まるごと譲り渡したかたちです。
では style.css は空っぽになって消えたのかというと、そうではありません。ちゃんと残っています。ただし、中身がガラッと変わりました。
ブロックテーマの style.css を開くと、いちばん上にこんな「コメント」が書かれています。
css
/*
Theme Name: Naniwa-No-Code
Version: 1.0.2
*/これは表札です。「この家はNaniwa-No-Codeという名前で、いまバージョンは1.0.2ですよ」という自己紹介。WordPressはこの表札を読んで、管理画面のテーマ一覧に名前を並べています。
つまり style.css は、家じゅうの設計図がつまったノートから、玄関にかかった名札へと役割が変わったんです。これが「格下げ」の正体です。
では、CSSはもう要らないの？
「主役の座を降りたなら、CSSなんてもう書かなくていいのでは？」——そう思いますよね。でも、そうはいきません。theme.json も、前の記事で紹介した register_block_style も、じつは共通の前提があります。それは「ブロックを相手にする道具」だということ。
- theme.json … いつもこうしたい、を決める（サイト全体のルール）
- register_block_style（ブロックスタイル） … ときどきこうしたい、を選べるようにする（ブロックの着せ替え）
- CSS … そのどちらでも届かないとき
この3段構えの、いちばん最後を守っているのがCSSです。順番でいうと、まず theme.json、次に register_block_style、それでも無理なら最後にCSS。この記事のタイトルで「最後の切り札」と呼んでいるのは、この位置づけのことです。
では「どちらでも届かない」とは、具体的にどんな場面なのか。実例を2つ見てみましょう。
例1：ページ全体をなめらかにスクロールさせたい
css
html {
scroll-behavior: smooth;
}これは、目次のリンクを押したときにページがスッと滑らかに移動するようにする設定です。ここで狙っているのは html という、ページそのものを表す一番外側の要素。これはブロックではありません。だから theme.json にも register_block_style にも、そもそも手が届かないんです。
例2：太字にマーカーを引いたような下線をつけたい
css
strong {
background: linear-gradient(transparent 70%, var(--wp--preset--color--gray-medium) 0);
}文章の中で 太字にした部分に、蛍光ペンでスッと引いたようなマーカーをつける設定です。狙っているのは strong という、文章中の太字を表す要素。これもブロックではなく、文の中に埋もれている小さなパーツなので、ブロック相手の道具では捕まえられません。
このふたつに共通しているのは、ブロックではない、素のHTML要素そのものを相手にしているということ。ブロック相手の道具では届かない。だからCSSの出番なんです。「なんとなくCSSで書いた」のではなく、「他に手段がないからCSSで書いた」——この違いが大事です。
そしてもうひとつ、例2でこっそり効いている工夫があります。マーカーの色に注目してください。
var(--wp--preset--color--gray-medium)これは色をベタ書き（#E5E1D8 のように直接指定）していません。theme.json に登録したパレットの色を、名前で呼び出しています。
最後の切り札であるCSSに落ちてもなお、色だけは theme.json から借りてきている。CSSは theme.json から逃げ出したのではなく、最後まで色見本を握って離さないんです。テーマ全体で色を一元管理するというルールが、最終手段のCSSの中でもちゃんと生きている。
どうしてもCSSを書くとき、どこに書く？
さて、書く中身は決まりました。では、この style.css、書けば自動で効くのでしょうか。
WordPressが style.css から自動で読み取るのは、じつは表札の部分（テーマ名やバージョン）だけなんです。その下に書いたCSSのルールは、放っておいても効きません。中身を実際に効かせるには、functions.php から「このCSSを読み込んでね」と自分でお願いする必要があります。
add_action( 'wp_enqueue_scripts', function() {
wp_enqueue_style(
'naniwa-no-code-style', // 好きな名前（ハンドル）
get_stylesheet_uri(), // = style.css の場所
array(), // 依存なし
wp_get_theme()->get( 'Version' ) // ← 表札のバージョン番号を借りてくる
);
} );そして、この読み込みにはもうひとつ大事な仕事が隠れています。いちばん最後の行を見てください。
wp_get_theme()->get( 'Version' )これは、表札に書いてあるバージョン番号を引っぱってきている部分です。この番号が、読み込むファイルのURLの後ろに style.css?ver=1.0.2 のようにくっつきます
なぜこれが大事かというと、キャッシュ対策になるからです。
ブラウザは、一度読み込んだCSSを「これはもう持ってるから」と手元に保存(キャッシュ)して、次からは再利用します。速くなる仕組みですが、困ったことに——あなたが style.css を書き換えても、ブラウザは古いキャッシュを使い続けて、変更が反映されないことがあるんです。
ここでバージョン番号が効きます。style.css を修正したら、表札のバージョンを 1.0.2 → 1.0.3 に上げる。するとURLが ?ver=1.0.3 に変わり、ブラウザは「番号が違う、別のファイルだ」と判断して、新しく読み直してくれます。
名札だと思っていた表札が、じつはキャッシュ対策という裏の仕事もこなしていた——これが表札の意外な二役です。「テーマの自己紹介」と「キャッシュ番号」、ひとつの番号が両方を兼ねているわけです。
※もっと自動化したい人向けに、ファイルの最終更新時刻を使う filemtime() という手もあります。書き換えるたびに自動で番号が変わって便利ですが、まずは手でバージョンを上げるやり方で十分。慣れてきたら試してみてください。
まとめ：CSSは「最後の切り札」
ブロックテーマでは、CSSは主役ではありません。
- theme.jsonで決められることはtheme.jsonで。
- register_block_style（ブロックスタイル）で表現できることはブロックスタイルで。
- それでも届かない、最後のわずかな隙間だけをCSSで埋める。
この記事では、いちばん分かりやすい例として html と strong——ブロックではない、素のHTML要素を狙う2つを紹介しました。この2つは、クラスも要らず、まっすぐ要素そのものを狙える、いわば最も純粋な最終手段です。
もちろん、実際にサイトを運営していると、CSSの出番はこの2つだけではありません。たとえば私自身、ページネーション（記事一覧の「次のページ」ボタン）の見た目を整えたり、スマホで見たときのレイアウトの折り返し位置を微調整したりするのに、CSSを使っています。
ただ、これらは今回の2つとは少し勝手が違います。html や strong は「その要素をまるごと狙う」ので、撃てば必ず当たりました。でもこうした調整は、たくさんあるブロックの中から「この1個だけ」を狙い撃ちしたい。そのためには、狙う目印になるクラス（名前）が必要になります。この目印の見つけ方が、大きく2通りあります。
ひとつは、WordPressが最初からつけてくれているクラス（名前）を借りる方法。たとえばページネーションのボタンには、もともと wp-block-query-pagination のような名前がついています。自分で用意しなくても、この名前を目印にすれば、その部分だけをCSSで狙えます（名前はブラウザの「検証」機能でのぞくと分かります）。
もうひとつは、自分で目印（クラス）をつける方法。狙いたいブロックの設定パネルにある「高度な設定 → 追加CSSクラス」に好きな名前をひとつ書いておくと、それが目印になります。WordPressが名前を用意してくれていない場所や、「ここだけ特別扱いしたい」というときは、この自分でつけるやり方の出番です。
そしてどちらの場合も、狙ったのに「なぜか効かない」という壁にぶつかることがあります。これはたいてい、複数のCSSがぶつかって優先順位の取り合いが起きているから。この「どのルールが勝つか」の仕組みを詳細度（しょうさいど）と呼びます。
まずは、AIに相談するのがおすすめです。AIは心強い相棒になってくれます。
大事なのは、書く前にいつも一度立ち止まること。「これは theme.json でできないかな？」「ブロックスタイルで選べるようにできないかな？」——そう自問して、それでも無理なものだけをCSSに任せる。
CSSは、減らすこと自体が目的ではありません。必要な場所だけに使うことが、長くメンテナンスしやすいテーマへの近道です。
切り札は、むやみに切らず、ここぞという場面で使うからこそ価値があります。