STORK19に移したら、見た目が崩れて機能も使えなかった話｜旧STORKからの移行で知った子テーマの仕組み

先に結論を書きます。KAKERUの公式サイトでは、STORK19を入れていたのに、実は使われていませんでした。原因は、子テーマ（自分用に手を入れた部分）が、古いSTORKを「親」として指したままだったことです。

しかも、親を替えれば済む話ではありませんでした。替えた瞬間に見た目が崩れ、ページの部品が空になり、色の設定も消えました。この記事では、何が起きて、どう直したのかを、WordPressのテーマの仕組みとあわせて書きます。

※この記事にはプロモーション（広告）が含まれます。

STORK19を入れていたのに、使われていなかった

STORK19は、OPENCAGEが販売しているWordPressのテーマです。テーマとは、サイトの見た目と基本の機能をまとめた「ひな形」のことです。

僕がSTORK19を買ったのは、2025年6月ごろです。ほかのブログでSTORK19を使っていて、かなり使い勝手がよくなっていたので、KAKERUの公式サイトにも導入したくなりました。

KAKERUのサイトは、もともと旧STORK（STORK19の前のテーマ）で作っていました。そこへSTORK19を入れた、つもりでした。

ところが2026年9月、STORK19の吹き出しを使おうとして、呼び出せないことに気づきました。はじめは、新しいSTORKと古いSTORKがぶつかり合っているのだと思っていました。調べてみると、そうではありませんでした。サイトはずっと旧STORKのまま動いていて、STORK19は「入っているだけ」だったのです。

決め手は、子テーマのstyle.css（見た目を決めるファイル）の先頭にある、たった1行でした。

Template: jstork

「jstork」は旧STORKのフォルダの名前です。STORK19は「jstork19」です。この1行が、「親は旧STORKです」と言い続けていました。吹き出しはSTORK19の中にある部品なので、親が旧STORKのままでは読み込まれません。呼び出せないのは当然でした。

原因：子テーマは、親テーマの3つのものに頼っている

親テーマは、テーマの本体です。旧STORKやSTORK19がこれにあたります。子テーマは、親テーマの上に自分用の変更を重ねるための、小さな追加のテーマです。親テーマを直接書き換えると、テーマを更新したときに変更が上書きされて消えてしまいます。そのため、自分の変更は子テーマに分けて置くのが一般的です。

KAKERUの子テーマは、旧STORKに合わせて育ててきたものでした。そして子テーマは、親テーマの次の3つに頼っています。

① CSS：見た目の指定。文字の大きさ、色、並び方など
② テンプレートの部品：ページを組み立てる部品。記事一覧の並べ方や、記事の下の部分など
③ PHPの機能：WordPressの裏側で動く仕組み。たとえば、管理画面で決めた色をサイトに出す処理

親を替えると、この3つがまとめて入れ替わります。同じ「STORK」という名前でも、旧STORKとSTORK19は中身が別のテーマです。旧STORK専用に育てた子テーマを、別のテーマの上に載せる。親を替えるとは、そういうことでした。

新旧のSTORKが干渉していると思っていましたが、そうではありませんでした。
旧STORK専用に育てた子テーマを、別のテーマの上に載せただけの状態だったんです。

切り替えた瞬間に消えたもの

親をSTORK19に替えたのは、ローカル環境です。ローカル環境とは、自分のパソコンの中だけで動かす、練習用のサイトのことです。ここで何を変えても、本番のサイトには影響しません。

切り替えると、さっきの3つがそのまま消えました。

デザインの指定が消えて、見た目が崩れた

子テーマのページの作りは、旧STORKの形のままです。旧STORKのCSSが無くなると、その形に合う見た目の指定がなくなります。

さらに、STORK19本体のCSSは、旧STORKと同じ名前の場所（本文の欄、サイドバー、記事のタイトルなど）に、別の指定を当てます。古い形と新しい指定がぶつかって、レイアウトが崩れました。

部品が「黙って」空になった

旧STORKにはあって、STORK19には無いテンプレートの部品が10個ありました。記事一覧の並べ方、トップページの上の部分、SNSのボタンなどの部品です。

やっかいなのは、部品が無くてもエラーが出ないことです。その場所が、何も言わずに空になります。画面を見比べないと、気づけません。

カスタマイザーの色の設定が消えた

カスタマイザーは、WordPressの管理画面で、サイトの色などを選べる画面です。旧STORKでは、ここで決めた色をサイトに出す仕組みが、親テーマの中にありました。STORK19ではその仕組みが動かないため、配色が全部消えました。

解決策：見た目は今のまま、STORK19からは「機能だけを借りる」

選んだ方法は、見た目は旧STORKの形のまま残し、STORK19からは吹き出しなどのブロックの機能だけを借りる、というものです。ブロックとは、WordPressの編集画面で、見出しや画像、吹き出しなどを1つずつ積み上げていく部品のことです。

作業は、僕がルールを渡したうえで、Claudeとやり取りを重ねながら進めました。いきなり本番は触らず、ローカル環境で試して、本番と見た目が同じになったことを確かめてから反映しています。

やったことは、大きく4つです。

旧STORKのCSSを、子テーマの中に複製した。旧STORKのフォルダを消しても、見た目が保てる
STORK19本体のCSSは止めて、ブロック用の部分だけを抜き出して読ませた。吹き出しやボックスの見た目だけをもらう
STORK19に無いテンプレートの部品10個を、旧STORKから子テーマへ移した
色の設定を出す仕組みも、子テーマへ移した

そのうえで、新しく用意した子テーマの先頭の1行を「Template: jstork19」にしました。これで親はSTORK19になり、吹き出しなどのブロックが使えるようになりました。

CSSを読む順番も決めた

CSSは、同じ強さの指定どうしなら、後から読んだものが勝ちます。そこで、STORK19のブロック用 → 旧STORKのCSS → 子テーマのCSS、の順に読ませました。子テーマの指定が最後に効くので、今の見た目が守られます。

確かめたのは、トップページ、お問い合わせ、記事のページです。ローカル環境と本番で、見た目の数値が一致することを確認してから、本番に切り替えました。

踏んだ落とし穴と、やり直さないための確認

作業の途中では、いくつか落とし穴も踏みました。ほかの方にも起きそうなものを4つ挙げます。

① CSSの抜き出しで、1か所のミスから先が全部効かなくなった

STORK19のCSSからブロック用の部分を抜き出すとき、指定をカンマ（,）で区切って分けていました。ところがCSSには、カッコの中にカンマを含む書き方があります。たとえば :not(a, b) のような形です。これを途中で切ったため、カッコが閉じないまま残りました。

カッコが閉じていないと、ブラウザはその位置から後ろのCSSを丸ごと無視します。568ある指定のうち、読み込まれていたのは388だけでした。後ろの方にあった吹き出しの指定が効かず、吹き出しが崩れて、本文が横に回り込みました。

それからは、CSSを作ったら2つ確かめるようにしました。カッコの開きと閉じの数が合っているか。ブラウザが読み込めた指定の数が、作った数と合っているか。

② 子テーマのCSSを作り直して、手書きの指定87か所を落としかけた

子テーマのCSSは、SCSSという「CSSの下書き」のようなファイルから作り直せます。ところが本番のCSSには、下書きを通さずに直接書き足した指定がありました。お問い合わせの表、フッター、見出し、制作実績のカードなど、87か所です。下書きから作り直すと、これが全部消えます。

結局、本番で動いているCSSをそのまま土台にして作り直しました。「元の下書きから作れば、同じものができる」とは限りません。

③ テーマ名が似ていて、古い方を有効にしてしまった

管理画面には「stork_custom」と「stork_custom2 (STORK19)」という、よく似た名前のテーマが並んでいました。一度、古い方を有効にしてしまいました。控えとして残していた、似た名前のフォルダも紛らわしさの原因でした。

テーマ名は見分けがつくように付ける。使わない控えは、テーマの置き場所に並べない。小さなことですが、取り違えを防げます。

④ 子テーマの「見出し情報」が無いと、WordPressが勝手に元へ戻す

子テーマのstyle.cssの先頭には、テーマの名前や親テーマを書いた「見出し情報」が必要です。たとえば、次のような数行です。

/*
Theme Name: （子テーマの名前）
Template: jstork19
*/

これが無いと、WordPressは「壊れたテーマ」と判断して、勝手に元のテーマへ戻します。CSSを作り直すときは、先頭の数行まで消していないか確かめてください。

移してよかったこと

いちばん変わったのは、記事の書き方でした。

旧STORKでは、吹き出しなどの機能を使うとき、ショートコードを書いていました。ショートコードとは、[ ]で囲んだ決まった文字を本文に書くと、その場所に機能が入る仕組みです。

STORK19では、編集画面で行の頭に「/」（スラッシュ）を打つと、使いたいブロックを探して呼び出せます。吹き出しもボックスも、ここから入れられます。

ショートコードを書かずに「/」で機能を呼び出せるので、ちょっとしたことですが、ブログを書くペースが上がりました。

もう1つは、書くことそのものへの集中です。

何より大きいのは、コードを意識しなくていいので、「書くこと！」に集中できることです。

これは、ブログを始めたばかりの人にこそ大きい点だと思っています。決まった書き方を覚えたり、書き間違いを探したりする時間が、そのまま書く時間に回せるからです。

この記事で移したWordPressテーマPR

STORK19（ストーク19）

OPENCAGE／WordPressテーマ・11,000円（税込）

ブロックエディタに合わせて作られていて、吹き出し・ボックス・FAQ・アコーディオンなどの独自のブロックが入っています。スマホで見やすい作り（モバイルファースト）で、旧ストークなどのショートコードも反映できる、と公式サイトで紹介されています。
僕にとっての一番の違いは、コードを意識せずに「書くこと」に集中できるところでした。

公式サイトで見る

※このカードのリンクはアフィリエイトリンクです。価格と内容は2026年10月6日に公式サイトで確認したものです。最新の情報は公式サイトでご確認ください。