ブロックテーマ自作で『やってはいけない』CSS設計

最近のWordPressの進化に触れて、強く感じることがあります。
それは、私たちが慣れ親しんだ「テーマの作り方」が、根本から変わってしまったのではないか、ということです。

今の主流であるブロックテーマにおいて、良かれと思って書き込んだ大量のCSSは、時に便利な機能を殺してしまう「毒」になることがあります。

大げさに言えば、「デザインに合わせる(ピクセルパーフェクト)」から「ルールを決める(デザインシステム)」への移行です。単なる流行りではなく、Webサイトを一回限りの「作品」で終わらせず、無理なく「成長し続けるシステム」にしていくための、必然の進化だと思うのです。

スポンサーリンク

クラシックテーマとブロックテーマ、何がそんなに違うの?

結論から言うと、この二つは「サイトを作る時の考え方」そのものが違います。イメージしやすいように、身近なものに例えてみました。

1. クラシックテーマ

「型が決まった家」と「無理やりな家具」

あらかじめ間取りが決まっている「完成した一戸建て」のようなイメージです。

  • 「ここに窓があるから、この棚しか置けない」という制約がある。
  • CSSの役割: 決まった間取りに無理やり大きな家具を詰め込んだり、壁を塗り替えたりする力技。
  • 悩み: レイアウトを少し変えるのにも、構造(PHP)を壊す必要があり、ハードルが高い。

2. ブロックテーマ

「レゴブロック」と「設計図」

好きなパーツを自由に組み合わせて作る「レゴブロック」のイメージです。

  • 置きたい場所に、好きな形のブロックをカチッとはめるだけ。
  • theme.jsonの役割: 基礎となる「土台」と「パーツのルール(色やサイズ)」。
  • いいところ: 無理に壁を壊す(複雑なCSSを書く)必要がなく、後から間取りを自由に変えられる。

こうして比べるとブロックテーマの方が楽そうに見えるけど、私みたいに「家の壁を壊してなんぼ!」っていうクラシック時代の感覚が染み付いてると、知らず知らずのうちに自由なレゴをアロンアルファ(過剰なCSS)でガチガチに固めてしまいます……。

theme.json という「新しい脳みそ」の役割

全自動で賢く掃除してくれる最新のルンバ(ブロックテーマ)があるのに、わざわざ昔の掃除機の長いホース(過剰なCSS)をガムテープでくっつけて、人間が必死に振り回している……。これでは、せっかくのWordPressの進化が台無しですよね。

この「ホース」を外して、ルンバを自由に走らせるための鍵が theme.json です。これはテーマにおける「新しい脳みそ」のような存在です。
ちなみに、theme.jsonとは、テーマのフォルダに入っている、設定が書かれたファイルのことです。

① 全体のルールを決める

「このサイトのメインカラーはこれ!」「余白はこの5パターンだけ!」というルールを脳みそ(json)に書き込みます。

② エディタに教える

脳みそがルールを知っているから、管理画面のボタン一つで、ルール通りのデザインが正確に反映されます。

③ CSSを減らす

脳みそが賢ければ、力技のCSSは不要。Core(本体)のアップデートにも強い、スッキリした体質になれます。

※「設定をプログラム(CSS)で書く」のではなく、「ルールをリスト(JSON)で渡す」。この発想の転換が、自作テーマをぐっと楽にしてくれます。

なぜ「旧・常識」が「毒」に変わるのか?3つの決定的な理由

かつてのWordPress制作では、「CSSをたくさん書いてデザインを追い込むこと」が正解でした。しかし、ブロックテーマの世界では、その努力が逆にサイトの成長を邪魔する「毒」になってしまうことがあります。

1. エディタの「自由」を奪ってしまう(優先順位の壁)

CSSファイルでガチガチにスタイルを指定すると、管理画面(エディタ)で「ここだけ色を変えたい」「余白を広げたい」と操作しても、自分の書いたCSSが優先されて反映されなくなります。「便利なはずの編集機能が動かない」という、本末転倒な状態を招いてしまいます。

2. 本体のアップデートで「表示崩れ」が起きやすくなる

WordPress本体(Core)は、日々進化しています。本体が書き出すHTML構造が変わった際、無理やり上書きしていたCSSがあると、その瞬間にデザインが崩れます。「アップデートするのが怖いサイト」になってしまうのは、長期的に見て大きなリスクです。

3. 「ピクセルパーフェクト」の呪縛で身動きが取れなくなる

1px単位でデザインを固定しようとすると、デバイスごとの調整や新しいブロックの追加がどんどん苦しくなります。今のWebは「完成品を固定する」のではなく「変化を受け入れる」設計が主流。古いやり方に固執すると、メンテナンスの手間だけが膨れ上がってしまいます。

💡 個人的な気づき:
「CSSを書かない=手抜き」ではなく、「WordPressの標準機能に任せる=スマートな設計」なんだと、失敗を通じてようやく腑に落ちました。こだわりたい部分にこそ力を注げるよう、土台は限りなくシンプルに保ちたいと思っています。

「デザインに合わせる」から「ルールを決める」へ

これからの私の制作スタンス

1. theme.json で「サイトの法律」を作る

「このサイトで使える色はこれだけ」「余白の間隔はこの5種類」といったサイト全体の共通ルールを、すべて theme.json に書き込みます。個別のブロックにCSSを書くのではなく、土台となる「法律」を先に決めておくイメージです。

2. CSSは「微調整」と「HTMLブロック」に限定する

CSSは、Coreブロックの細かい見た目の微調整や、HTMLブロックで作成する特別なパーツだけに限定します。全体のレイアウトはWordPressの標準機能に任せることで、アップデートにも強い構造になります。

3. 「100点の見た目」より「100%の動作」を優先する

デザインカンプに無理やり合わせるために複雑なコードを書くのではなく。WordPress標準のパーツが一番綺麗に動くルールを適用する。

秘策は「register_block_style」の活用

選べる楽しさと壊れにくさを両立

「100点の見た目より100%の動作」を実現するための具体的な方法。それが、WordPressの機能である「ブロックタイル(register_block_style)」の活用です。

これは、管理画面の右側にあるパネルで「ポチッとボタンを押すだけでデザインを切り替えられる」ようにする仕組みです。

無理に全てのブロックのデザインを一律に変える(上書きする)のではなく、「この時はこのスタイル」という選択肢を自分であらかじめ用意しておくのです。

(エディタのイメージ)
通常
キラキラ

この方法の何が素晴らしいかというと、以下の3点に尽きます。

  • Coreの構造を壊さない: WordPress標準のHTMLに「クラス名」を一つ追加するだけなので、アップデートで崩れるリスクが激減します。
  • 書くのが楽しい: 「ここはちょっと目立たせたいな」という時に、エディタ上で視覚的に選べるのは、執筆のモチベーションに直結します。
  • CSSが散らからない: 闇雲にCSSを書くのではなく、「このスタイル用のCSS」と決めて書くので、コードが迷子になりません。

「全部のデザインを完璧に固定しよう」と思うからしんどい。 「基本はシンプル。遊びたいところはスタイルで選ぶ」っていう『余白』を残しとくのが、自作テーマを長く愛するための秘訣やと気づきました。

まとめ:カオスからの脱出。ゆっくり「シンプル」を育てていく

ここまで偉そうに「ルールが大事」「引き算の設計を」なんて書いてきましたが、実を言うと、私の今のブログはまだ「ホースをガムテープでぐるぐる巻きにした」ようなカオス状態です(笑)。

長年積み重ねてきた複雑なコードや設定を、一気にスッキリさせるのは簡単ではありません。でも、だからこそ面白いのだと思っています。

WordPressの進化という波を楽しみながら、一歩ずつ理想の形に近づけていくつもりです。

失敗も、どつぼにはまった経験も、すべては「学び」のスパイス。
この試行錯誤のプロセスも、またこのブログで発信していく予定です!


最後までお読みいただきありがとうございました。もしあなたも「WordPressのカスタマイズで迷走中」なら、一度思い切って「引き算」を考えてみませんか?

スポンサーリンク