SWELLを使っていると、そのうち、
「見出しの余白をもう少し広げたい」
「スマートフォンだけ文字サイズを変えたい」
といった、細かな部分を自分好みに変えたくなることがあります。
ただ、いざテーマのファイルを触ろうとすると、
「CSSをどこに書けばいいのか分からない」
「間違えてサイトが壊れたら怖い」
と、手が止まってしまうこともあると思います。
実際にClaude Codeを使って分かったのは、すべてを任せるのではなく、AIに任せることと、自分で判断することを先に分けておく必要があるということでした。
- AIに任せる：コードを調べる、書く、直す
- 自分で判断する：どのファイルを変更するか、本番へ反映するか
この記事では、Claude Codeへ実際にどのように頼んでいるかと、Claude Codeに任せて壊してしまったところ、そこから決めた安全な作業手順を紹介します。
最初に知っておきたい2種類のカスタマイズ
この記事で扱うSWELLのカスタマイズには、大きく分けて2種類あります。
テーマファイルを変更するカスタマイズ
子テーマのファイルへ、CSSやPHPを追加する方法です。
たとえば、このブログでは次のファイルを変更しています。
- style.css：余白、文字サイズ、色などの見た目を調整する
- functions.php：フォームや記事表示などの機能を調整する
投稿本文のSWELLブロックを変更するカスタマイズ
アコーディオン、ステップ、ブログパーツなど、SWELL独自のブロックを編集する方法です。
こちらは子テーマのファイルではなく、WordPressの投稿本文に保存されているデータを扱います。
同じ「SWELLのカスタマイズ」でも、変更する場所と壊れ方が違います。Claude Codeへ依頼するときは、どちらを変更するのかを最初に明確にすることが大切です。
1．親テーマは変更せず、子テーマに追加する
テーマファイルをカスタマイズするときは、SWELL本体である親テーマを直接変更しません。
親テーマへ書き込んだ内容は、SWELLをアップデートしたときに上書きされる可能性があるためです。
CSSやPHPを追加するときは、基本的に子テーマを使います。SWELL公式からも子テーマが提供されています。
ただし、親テーマは読ませてはいけないわけではありません。
SWELLの仕様や既存の処理を確認するために、Claude Codeが親テーマのファイルを読むことはあります。禁止するのは「参照」ではなく「変更」です。
Claude Codeへは、次のように伝えています。
SWELLの子テーマだけを変更してください。
・親テーマのファイルは、調査のために参照して構いません
・親テーマには書き込まないでください
・変更前に、対象ファイルと修正方針を説明してください
・変更後に、どこを変更したか教えてください「子テーマだけを触って」と伝えるよりも、参照してよい場所と、変更してよい場所を分けて書くほうが正確です。
なお、子テーマであれば何をしても安全というわけではありません。親テーマのテンプレートを丸ごとコピーして大きく変更すると、SWELLの更新後に表示が合わなくなることがあります。
必要な部分だけを追加し、変更範囲を小さくすることも大切です。SWELL公式も「子テーマに親テーマのファイルをコピーして大幅にカスタマイズしていた場合、親テーマのバージョンアップデートにより表示が崩れる可能性がございます」と案内しています（SWELL公式：バージョンアップデートの際の注意点）。
2．本番サイトでいきなり試さない
ぼくは、公開中のサイトとは別にテスト環境を用意し、そこで変更を確認しています。
理由は単純で、表示が崩れても読者には見えないからです。
本番サイトで直接作業すると、修正途中の崩れた画面がそのまま表示される可能性があります。functions.phpの書き方を間違えた場合は、管理画面を含めてサイトが開けなくなることもあります。
テスト環境を用意するのが難しい場合でも、最低限、変更前のファイルを保存しておきます。
- 変更前のファイルをコピーする
- どのファイルを変更するか確認する
- 一度に多くの場所を変更しない
- 問題があったときの戻し方を決めておく
大切なのは、失敗しないことよりも、失敗しても元に戻せる状態を作っておくことです。
3．Claude Codeには変更場所まで指定する
普段のカスタマイズでは、Claude Codeへ「見た目を直して」とだけ頼まず、変更するファイルと条件まで伝えています。
CSSを調整する場合
見出しの余白や文字サイズなど、見た目だけを変える場合は、子テーマのstyle.cssへ追加します。
子テーマのstyle.cssに追記してください。
変更内容：
・記事内のh2見出しの上余白を広げる
・スマートフォンだけ余白を少し小さくする
条件：
・親テーマは変更しない
・既存のCSSを確認し、同じ指定を重複させない
・変更前に、追加するCSSを見せる
・変更後に、確認する画面幅を教える「どこへ書くか」だけでなく、既存のコードとの重複や、確認する画面幅まで指定すると、作業後の確認もしやすくなります。
functions.phpへ処理を追加する場合
functions.phpでは、フォームや記事表示などの機能を調整できます。
ただし、CSSとは違い、PHPの書き方を間違えるとサイト全体へ影響することがあります。
そのため、いきなり反映させず、最初に処理内容を説明してもらいます。
子テーマのfunctions.phpへ追加する処理を考えてください。
・最初はファイルを変更せず、追加するコードと処理内容を見せる
・既存の処理と重複していないか確認する
・親テーマは変更しない
・問題があった場合の戻し方も説明する内容を確認してから変更を許可し、反映後に実際の画面を確かめます。
4．SWELL独自ブロックは推測で書かせない
ここは、Claude Codeに任せて実際に失敗したところです。
SWELLには、アコーディオン、ステップ、ブログパーツなどの独自ブロックがあります。
これらは画面上では簡単に操作できますが、投稿本文には、ブロックの種類や設定を表す専用の記述が保存されています。
ぼくは一度、その記述をClaude Codeに推測で作らせ、アコーディオンを壊しました。WordPressの編集画面で開くと、ブロックエラーが表示される状態になりました。
原因は、実際のSWELLの保存形式を確認せず、「おそらくこの形だろう」と書かせてしまったことです。
それ以降、SWELL独自ブロックを扱うときは、次の順番にしています。
- 同じ種類のブロックをWordPress上で正常に作る
- 正しく保存された投稿データを確認する
- 必要に応じてSWELLの実装ファイルも読む
- 確認した形式に合わせて編集する
Claude Codeへは、次のように伝えます。
SWELL独自ブロックの記述は推測しないでください。
まず、同じブロックが正常に保存されている既存の記事を確認してください。
必要であれば、SWELLの実装ファイルも参照してください。
確認できた形式だけを使い、不明な部分は変更しないでください。テーマのファイルだけでなく、実際にWordPressで正しく保存されたブロックを見本にすることがポイントです。
ブログパーツの呼び出しが表示されなかったときも、原因は指定する値のわずかな違いでした。
SWELL独自の機能を扱うときは、一般的なWordPressの知識だけで書かせず、実際の保存形式を確認してから変更するようにしています。
5．実際に壊したことで決めたルール
編集画面を開いたままにしない
Claude Codeを使って記事本文を更新しているとき、WordPressの編集画面を開いたままにしていたことがあります。
Claude Codeによる更新が終わったあと、開いたままの編集画面で保存してしまい、画面を開いた時点の古い内容で上書きされました。
これは、CSSやPHPの編集ではなく、Claude Codeから投稿本文を変更していたときの失敗です。
それ以降は、Claude Codeへ記事本文を変更させる前に、WordPressの編集画面を閉じています。
ブロックの区切りが本文として表示された
投稿データを編集したとき、本来は画面に表示されないブロック用の記述が、本文の文字として紛れ込んだこともあります。
修正するときは、該当する記述だけを取り除き、本文の文章が減っていないことを確認してから保存しました。
投稿本文を機械的に置換するときは、変更後の文字数や差分を確認するようにしています。
変更前へ戻せるようにする
どちらの失敗も、変更履歴が残っていたため元へ戻せました。
ぼくはテーマファイルを変更履歴が残る形で管理し、本番へ反映するときも、別のサイトへ誤って送らないための確認を入れています。
同じ仕組みを用意できなくても、まずは変更前のファイルをコピーしておくだけで構いません。
戻せる状態を作ってから変更する。
6．Claude Codeが「完了」と言っても、自分で確認する
Claude Codeに任せないのは、最終確認です。
コードに問題がなくても、実際の画面では表示が崩れていることがあります。特にスマートフォンの表示は、コードだけを見ても判断できません。
変更後は、次の場所を確認します。
- パソコンの画面
- スマートフォン幅の画面
- 変更した部分
- 変更していない周辺部分
- WordPressの編集画面
- 公開画面
functions.phpを変更した場合は、対象の機能だけでなく、管理画面やほかの記事も開けるか確認します。
Claude Codeの「変更しました」は、ファイルの編集が終わったという意味です。サイト上で問題なく動くことまで保証するものではありません。
安全に進めるための作業手順
ぼくが現在行っている順番は、次のとおりです。
- 変更する場所と目的を決める
- 変更前の状態を保存する
- Claude Codeに対象ファイルを確認させる
- 最初は変更せず、修正方針を出してもらう
- 子テーマまたは投稿本文の必要な部分だけを変更する
- テスト環境で確認する
- パソコンとスマートフォンの両方で見る
- 問題がなければ本番へ反映する
問題があった場合は、その場で修正を重ねる前に、一度変更前へ戻します。
変更を重ねすぎると、どの修正が原因なのか分からなくなるためです。
まとめ
- テーマファイルと、投稿本文のSWELLブロックは別のものとして考える
- 親テーマは参照してもよいが、直接変更しない
- CSSやPHPは、基本的に子テーマへ追加する
- 子テーマでも、大きな変更やファイルの丸ごとコピーには注意する
- SWELL独自ブロックは推測で書かせず、正常な保存データを確認する
- 本番でいきなり試さず、変更前へ戻せる状態を作る
- Claude Codeが完了したあとも、実際の画面は自分で確認する
Claude Codeを使うようになってから、これまで自分で調べながら書いていた調整を、任せられるようになりました。
一方で、任せきりにすると壊れます。実際に、Claude Codeへ任せた変更で何度か壊しました。
だからこそ、現在は次のように役割を分けています。
コードを調べ、手を動かすのはAI。どこを変更し、公開してよいかを判断するのは自分。
この分け方にしてから、以前より落ち着いてSWELLをカスタマイズできるようになりました。
SWELLの設定そのものを見直したい方は、SWELL完全マスターガイドとSWELLの初期設定もあわせてご覧ください。
ホームページ制作のご相談はこちらから
新しくサイトをつくりたい、いまのサイトを直したい。そんなときは、お気軽にお声がけください。
ホームページ制作・WordPress構築・SWELLのカスタマイズ・コーディングサポートを承っています。
