AIにサイト修正でCSSを直してもらったら、別の場所まで変わった。まず何を確認する？

スマホの余白を少し狭くしたくて、AIに相談。提案されたCSSを追加したら、直したかった部分は整ったのに、ほかのページの見出しまで変わってしまった——。

こんなときは、修正コードを追加し続ける前に、今回変更した内容と影響が出た場所を整理することから始めましょう。

AIの提案を使う場合も、CSSが「どこに効く指定なのか」を確認すると、原因を絞り込みやすくなります。

まず、今回追加したコードを控える

表示が崩れると、すぐに直したくなります。ただ、原因が分からないまま別のコードを重ねると、どの指定が効いているのか追いにくくなります。

最初に、次の3つを残してください。

・今回追加・変更したコード

・追加した場所と、分かれば変更前の内容

・直したかった場所と、意図せず変わった場所の画像

コードは、メモ帳などに別途コピーしておくと比較しやすくなります。

追加した箇所が明確で、元に戻す方法も分かる場合は、追加した分だけを戻して表示を確認します。

戻す場所が分からないときは、テーマのファイルや既存のCSSを手当たり次第に削らないでください。編集を続けるより、変更履歴やバックアップの有無を確認する方が先です。

「どの部分に効く指定か」を見る

例えば、見出しの余白を変えるつもりで、CSSの対象に「h2」が指定されていたとします。

h2は見出しを表す要素です。条件を絞らずに指定すると、直したい見出しだけでなく、同じCSSが読み込まれる別のページのh2にも影響する可能性があります。

イメージとしては、次の違いです。

対象が広い指定

「このサイトのh2の余白を変える」

対象を絞った指定

「このページの、この案内枠の中にあるh2の余白を変える」

ただし、実際にどう絞るかは、サイトのHTMLやテーマの構成によって変わります。「特定ページだけにしたつもり」でも、共通の部品や別のCSSが関係していることがあります。

AIへ相談する際も、直したい場所だけでなく、次の条件まで伝えると、提案を確認しやすくなります。

・どのページの、どの部分を変えたいか

・PCとスマホのどちらを変えたいか

・ほかのページや共通の見出しは変えたくないこと

・追加する場所が「追加CSS」なのか、別の場所なのか

「ほかは変えないで」と伝えるだけで、影響を防げるわけではありません。

提案されたコードを適用した後の確認は必要です。

直した場所と「似た部品がある別ページ」を確認する

直したかった場所が整っていても、それだけで確認完了にはしない方が安心です。

今回のような見出しの調整なら、少なくとも次を見ておきましょう。

・修正したページのPC表示とスマホ表示

・同じような見出しがある別ページ

・ヘッダー・メニュー・フッターなどの共通部分

・ボタンやメニューの開閉など、変更箇所に関係する操作

スマホ向けの指定なら、画面幅を変えた確認に加えて、可能であれば実際のスマートフォンでも確認してください。

見た目だけでなく、必要な操作ができるかまで確認するのがポイントです。

変更したのに表示が変わらない場合は、キャッシュも切り分ける

コードを戻したのに変化がない、管理画面と公開ページで見え方が違う。そんな場合は、保存状態やキャッシュも確認します。

キャッシュは、一度取得したデータを再利用する仕組みです。主に、次のような場所にあります。

・パソコンやスマートフォンのブラウザ

・WordPressのキャッシュ機能・プラグイン

・サーバーやCDN

まず変更が保存されているか確認し、そのうえでブラウザ側のキャッシュを除外して再読み込みします。慣れている方なら、Chromeの開発者ツールでNetworkの「Disable cache」を有効にし、ツールを開いたまま再読み込みする方法もあります。

ただし、ブラウザ側のキャッシュを除外しても、サーバーやCDN側のキャッシュまでなくなるわけではありません。

シークレットモードや別ブラウザでの確認も、表示の比較には役立ちますが、それだけでキャッシュの影響を完全に除外できるとは限りません。

キャッシュ機能がどこにあるか分からない場合は、設定を一括で変更せず、サイトの構成を確認してから進めましょう。

自分で進めるか、相談するかの目安

追加したコードと戻し方が分かり、影響する範囲も確認できるなら、一つずつ切り分けて進められます。

一方、次のような状態なら、変更を重ねる前に相談を検討してください。

・何を追加・変更したのか分からなくなった

・元に戻したつもりでも表示が直らない

・別ページや共通部分にも影響が出ている

・メニューやフォームなどの操作に支障が出た

・本番サイトでこれ以上変更するのが不安

AIを使って、自分で調整できる範囲を広げることには賛成です。そのうえで、影響範囲や戻し方に迷ったときには、調査や確認を任せる選択肢も持っておくと進めやすくなります。

ご相談の際は、この4つがあると助かります

1. サイトURLと、問題が出ているページURL

2. 直したい場所・意図せず変わった場所の画像

3. 追加したコードと、追加した場所

4. 変更前後の違いと、すでに試したこと

分からない項目は、そのままで構いません。最初のご相談で、パスワードや認証コードを送る必要はありません。 コードや画像を共有する際も、秘密情報・個人情報が含まれていないかご確認ください。

Sole Collectでは、WordPressの表示崩れやCSS調整について、状況を伺い、調査・修正の対応範囲をご案内します。

「AIの提案を試したあとからおかしい」「自分で直そうとして、どこまで変えたか分からなくなった」という場合も、下のサービスから見積り相談をご利用ください。

【WordPressの表示崩れ・CSS修正のご相談はこちら】