WordPressの追加CSSを上書きした体験と、復旧前に確認したいこと

WordPressの追加CSSを全部消し、別サイト用のCSSを貼り付けて公開してしまいました。お客様のサイトを直しているつもりが、実際に開いていたのは自分のサイト「ma+」でした。

今回はXServer上のデータベースに残っていた過去の履歴からCSSを見つけ、追加CSSへ戻せました。この記事では、その経緯と、同じ状況で最初に確認したいことを整理します。どの環境でも同じ方法で復旧できることを保証する手順書ではありません。

何が起きたのか：サイトを取り違えて上書きした

発端は、お客様のサイトのスマートフォン用メニューの修正でした。追加CSSを作り直そうとして、開いていた画面のCSSを削除し、別サイト用のCSSを貼り付けました。表示がおかしくなってからURLを確認し、自分のサイトを編集していたと気付きました。

• お客様のサイトを編集しているつもりだった。
• 実際にはma+の管理画面を開いていた。
• ma+の追加CSSを削除し、別サイト用のCSSで上書きした。
• 変更を公開した後、サイトの取り違えに気付いた。

複数の管理画面を同時に開いていたことが、取り違えの一因でした。なお、最初のメニューの不具合と、今回の上書き事故は別の問題です。ここでは上書き後の対応に話を絞ります。

最初に確認すること：対象と変更前の控え

同じ状況になったら、焦ってさらにCSSを貼り替える前に、対象のサイトと現在の状態を確かめます。次の項目は、今回の経験を踏まえた確認用のメモです。

• アドレスバーで対象ドメインを確認し、ほかのサイトの管理画面を閉じる。
• 現在の追加CSSも控えとして保存し、変更前のファイルやメモが残っていないか探す。
• 何を消し、何を貼り付け、いつ保存したかを記録する。
• サイト全体のバックアップを戻す前に、巻き戻る範囲とその後の更新内容を確かめる。

画面やデータの意味が分からない場合は、そこで止めて管理担当者に相談します。画面を共有するときは、パスワード、データベースの認証情報、顧客情報を隠します。

追加CSSは、どこに保存されるのか

WordPress標準の追加CSSは、テーマに対応する「custom_css」という種類のデータとして保存されます。WordPress公式の開発者資料でも、CSSを投稿データの本文欄である「post_content」に保存する処理が確認できます。

ただし、CSSの保存場所は入力した機能によって異なります。テーマ独自の設定やプラグインのCSSまで、すべて同じ場所にあるわけではありません。過去の履歴が必要な時点まで残っているとも限りません。

今回の復旧：過去の履歴からCSSを取り出した

今回はChatGPTと確認しながら、XServerの管理画面からphpMyAdminを開き、ma+が利用しているデータベースを調べました。現在の追加CSSはすでに上書きされていましたが、過去の履歴に上書き前のCSSが残っていました。

見つけたCSSをコピーして、WordPressの追加CSSに戻し、表示を復旧しました。データベース全体を過去の状態へ戻した、という話ではありません。

phpMyAdminはデータベースを管理するツールです。XServer公式にも利用方法が案内されていますが、ツールを開けることと、目的のCSSが残っていることは別です。対象が不明なままデータを編集・削除しないでください。

この記事では、すべてのサイトに通用する検索条件やSQLは掲載していません。データベース名やテーブル名を決めつけて操作すると、違うサイトのデータに手を入れるおそれがあるためです。

戻した後に確認する項目

CSSが見つかっても、貼り付けただけで作業を終えず、次の項目を確認します。これは今後の確認用チェックリストで、今回すべての項目を検証したという実績報告ではありません。

• パソコンとスマートフォンの両方で、主要なページの表示を確かめる。
• メニューやボタンは、見た目に加えてリンク先も確かめる。
• 復旧に使ったCSSを、サイト名と日付が分かるファイル名で保存する。
• 残っている不具合は、今回の上書きによるものか、以前からのものかを分けて記録する。

必要な履歴が見つからない場合

変更前に保存したCSS、制作時のファイル、利用できるバックアップなどを確認します。バックアップを復元する場合は、対象の日時と範囲を確認し、その後に追加された記事や申し込みなどに影響しないか、管理担当者と判断してください。

元のCSSが残っていない場合、元どおりに戻せるとは限りません。画面を見ながら作り直す場合も、必要な表示と動作を整理してから進めます。

次からの予防：一つのサイト、一つの変更

今回から、WordPressを触るときは作業対象以外の管理画面を閉じることを自分のルールにします。あわせて、追加CSSを変更する前に全文を控え、変更内容と対象URLを確認してから保存する流れにします。

AIを使うときも同じです。「このサイトの、この部分だけを変更する」と範囲を明確にし、保存前の確認を省かないことが、まずできる対策です。

参考にした公式情報

• WordPress公式：追加CSSの保存処理
• XServer公式：phpMyAdmin

公式情報の確認日：2026年10月2日。公式資料は機能の根拠として参照しています。今回の復旧経緯は筆者の体験記録です。