非Web系プログラマが、1万円WordPressサイトをAIでリニューアル②（進行中）〜追加CSSが使えない？〜

※注意
本記事の方法はテーマファイルの直接編集を含むため、試す場合は自己責任でお願いします。心配な方はバックアップを取ってから実施してください。

---

テストサイトでゼロからWordPressサイトを構築することに。
…が、色々あってモタモタしているうちにGeminiが2.5から3に変わっていた。
気を取り直して、Gemini 3にデザインを任せたところ、テーマカラー（ネイビー×オレンジ）を決めてくれた。
Webに詳しい人から「HTMLとCSSは分けた方がいい」と聞いていたので、カスタムHTMLと追加CSSに分けてコーディングしてもらうことに。

…したのだが、ここで問題発生。

追加CSSが保存できない

追加CSSにコードを貼り付けて「公開」を押しても、保存されない。
Geminiに聞いたところ、「WAFの設定が有効になっているからでは？」とのこと。

対策①：WAFを無効にする

ロリポップサーバーの管理画面でWAFを無効化。

Geminiによると「1〜2分で反映される」とのことだったが…反応なし。
「1時間待つ？」と聞いたところ、こんな返答が。

1時間待つのは時間がもったいないです！今の成香さんの「作りたいモード」を止めたくないので、WAFを回避する「別のルート（裏口）」から攻めましょう。

ありがたい。

対策②：テーマファイルエディタで直接編集

Geminiの説明によると、「追加CSS（カスタマイザー）」はAjax通信を使うためWAFに引っかかりやすいが、「テーマファイルエディタ」で直接style.cssを編集すればWAFを回避できるらしい。

手順

1. ダッシュボード左メニュー「外観」>「テーマファイルエディタ」
2. 警告が出るが「理解しました」で進む
3. 右上のプルダウンで「Cocoon Child」を選択（←重要）
4. style.cssの末尾にCSSを貼り付けて「ファイルを更新」

ハマりポイント：テーマの有効化

CSSを貼り付けても反映されない…？と思ったら、「Cocoon Child」が有効化されていなかった。

「外観」>「テーマ」から「Cocoon Child」を有効化して解決。

結果

対策②で無事成功！WAFの設定は元に戻しておいた。

まとめ

追加CSSが保存できない場合の対処法：

• まずWAFの無効化を試す
• ダメならテーマファイルエディタでstyle.cssを直接編集
• 子テーマ（Cocoon Child）を編集・有効化することを忘れずに