SiteGuardでデザインが崩れる・保存できない？WordPressのWAF誤検知を直す方法

せっかく作り込んだデザインのHTMLを、WordPressの投稿画面に貼って「更新」を押したら――「403 Forbidden」で保存できない。あるいは保存はできたのに、公開ページを見るとレイアウトがぐちゃぐちゃに崩れている。HP制作を自分で進めていると、かなりの確率でぶつかる壁です。

結論から言うと、その多くはセキュリティプラグイン（WAF）の「誤検知」が原因です。あなたのHTMLが悪いのではなく、正しいデザインコードを、WAFが「攻撃」と勘違いしてブロックしているだけ。今回は、実際にこの壁を突破したときの手順を、そのままガイドにします。

なぜ「正しいHTML」がブロックされるのか
まず切り分け：本当にWAFが原因か確認する
誤検知を起こしやすい7つのパターンと直し方
保存は通ったのにデザインが崩れるとき（自動整形対策）
直すときの順番（ステップまとめ）
大事な注意：WAFは「切らずに」直す
まとめ
1. 写真はあるけれど、構成や編集まで手が回らない方へ

なぜ「正しいHTML」がブロックされるのか

WAF（ワフ）は、フォームやエディタから送られてくる文字列を見て、SQLインジェクションやXSSといった攻撃のパターンに似ていないかをチェックする仕組みです。問題は、デザイン用のCSSやHTMLの中に、たまたま攻撃コードと同じ文字の並びが含まれてしまうこと。すると本文が攻撃と誤判定され、保存そのものが弾かれます。

なお、WordPress用のWAFとしては「SiteGuard（サイトガード）」系がよく使われます（レンタルサーバーによっては標準で有効化されている場合があります。導入状況はご利用のサーバー公式情報でご確認ください）。以下は、そのWAF環境で実際に弾かれた・崩れた原因と、その直し方です。

まず切り分け：本当にWAFが原因か確認する

直す前に、原因がWAFかどうかを切り分けます。手順はシンプルです。

まず、ごく短いテキストだけの段落を1つ保存してみる。これが通れば、投稿機能そのものは正常です。
次に、デザインHTMLを半分ずつに分けて保存し、どちらでブロックされるかを見る（いわゆる二分探索）。弾かれた側に「原因の文字列」が入っています。
保存自体は通るのに公開ページで崩れる場合は、WAFではなく後述の「自動整形（wpautop）」が原因の可能性が高いです。

誤検知を起こしやすい7つのパターンと直し方

実測でブロックの引き金になっていたのは、次の7つでした。いずれも「正しいコードなのに攻撃に見えてしまう」ものです。1つずつ、置き換え方とセットで挙げます。

① 外部読み込みの link 要素（スタイルシート）

先頭でフォントやCSSを外部から読み込む link 要素が弾かれることがあります。読み込みを外し、システム標準フォントにフォールバックするだけで通ります。見た目は少し変わりますが、崩れて公開できないよりは確実です。

② CSS変数（ダブルハイフン）

CSS変数の頭に付くダブルハイフンが、SQLのコメント記号と誤判定されます。変数をやめて、色やサイズを実際の値に展開して書けば回避できます。

③ select という単語

テキスト選択を制御するプロパティなどに含まれる select の並びが、SQLのSELECTと見なされることがあります。その指定自体を外すか、別の書き方に変えます。

④ 均等配置の指定（BETWEEN）

要素を両端揃えにするFlexboxの指定が、SQLのBETWEENに引っかかります。両端揃えを「均等割り付け」系の別指定に変更すると、見た目をほぼ保ったまま通せます。

⑤ backdrop（DROP）

背景をぼかす装飾に使う backdrop の中の並びが、SQLのDROPと誤判定されます。その装飾を外すのが最短です。ぼかしは無くても本体のデザインは成立します。

⑥ HTMLコメント

コメントアウトの記号も、SQLのコメントと同じ形なので弾かれることがあります。不要なコメントは公開前に削除しておきましょう。

⑦ @import と直後のCSSの組み合わせ

CSSを取り込む @import と、その直後に続くコードの組み合わせでブロックされることがあります。①と同じく外部読み込みをやめて、必要なスタイルを直接書く方向で解決します。

保存は通ったのにデザインが崩れるとき（自動整形対策）

WAFを通過しても、公開ページで余白がおかしくなる・スタイルが効かない場合は、WordPressの自動整形機能（wpautop）が改行を勝手に段落に変換し、CSSを壊しているケースがあります。対策はスタイル指定と本文を、改行を含まない1行にまとめて貼ること。これで自動整形に割り込まれず、意図した見た目を保てます。

直すときの順番（ステップまとめ）

短いテキストで保存が通るか確認（投稿機能の正常性チェック）。
二分探索で、弾かれるブロックを特定する。
上の7パターンに当てはめ、外部読み込み・CSS変数・select・両端揃え・backdrop・コメントを順に置き換える。
保存が通ったら、公開ページで表示を確認。崩れていれば1行化で自動整形対策。
最後に、装飾を削った箇所の見た目を微調整して仕上げる。

大事な注意：WAFは「切らずに」直す

ここで強調したいのは、これは「自分のサイトの正しいデザインが、誤って攻撃と判定されるのを直す」話だということ。面倒だからとWAF（セキュリティ）そのものをオフにするのは、家の鍵を外して出かけるようなものです。WAFは有効なまま、誤検知される書き方の方を安全側に直す――これが、公開後も安心して運用するための正しい向き合い方です。

まとめ

「デザインが保存できない・崩れる」は、あなたの腕のせいではなく、WAFの誤検知が原因のことがほとんどです。外部読み込み・CSS変数・select・両端揃え・backdrop・コメント――この6〜7点を安全な書き方に置き換え、必要なら1行化で自動整形を回避する。順番に切り分ければ、セキュリティを保ったまま、狙いどおりのデザインを公開できます。まずは「短いテキストが保存できるか」から始めてみてください。