WordPress管理画面で壊れたCSSを修正する方法

WordPressダッシュボードにログインしたときに、テキストがぐちゃぐちゃになり、リンクが壊れているのを見ると、心が沈むようなことはありません。あの馴染みのある、きれいなインターフェースは突然消え去り、まったく使い物にならないように見えるものに置き換えられます。

パニックになる前に、深呼吸をしてください。WPBeginnerでは、この問題は数え切れないほど見てきましたが、見た目よりもずっと簡単に修正できることがほとんどです。

通常は、プラグインの競合やキャッシュの不具合が原因の簡単な問題です。問題の原因を迅速かつ安全に見つけるためのステップバイステップのチェックリストを作成しました。

WordPress管理画面のCSS破損のクイック修正

WordPress管理画面のCSS破損は、ほとんどの場合、プラグインの競合、キャッシュの問題、またはHTTPS/SSLの設定ミスが原因です。解決策は、プラグインを無効化し、すべてのキャッシュをクリアし、サイトのURL設定を確認するというプロセスです。

管理画面を通常の状態に戻し、作業に戻れるように、各トラブルシューティング手順を順を追って説明します。

この記事で取り上げるトピックとトラブルシューティングの手順の概要を以下に示します。

WordPress管理画面でCSSが壊れる原因は何ですか？

何千ものユーザーを支援してきた経験から、WordPress管理画面のCSS破損は、ほとんどの場合、いくつかの一般的な問題に起因しています。イライラするかもしれませんが、根本原因を理解することが、それを修正するための第一歩です。

一般的な原因	なぜCSSが破損するのか
プラグインの競合	コードの品質が低いプラグインは、独自のスタイルシートを読み込み、デフォルトのWordPress管理画面のスタイルを上書きしたり干渉したりする可能性があります。
HTTP/HTTPSの不一致	サイトがHTTPSを使用しているのに、一部のファイルが安全でないHTTP経由で読み込もうとすると、ブラウザがそれらをブロックし、スタイルが破損します。これは「混合コンテンツ」エラーです。
テーマの干渉	一部のテーマは、管理画面でCSSを不適切に読み込みます。カスタム管理テーマもスタイリングの競合の原因となる可能性があります。
キャッシュの問題	ブラウザまたはキャッシュプラグインが、古いバージョンのCSSファイルを配信している可能性があり、表示の問題を引き起こします。
CDNの問題	設定ミスのあるコンテンツ配信ネットワーク（CDN）も、古いCSSファイルを配信し、スタイルが破損または欠落する原因となる可能性があります。
不正なファイルパーミッション	CSS ファイルの権限が正しくない場合、サーバーがファイルを読み取れず、読み込みが妨げられる可能性があります。
ファイルの破損	WordPress のコア CSS ファイルは、アップデート中やファイル転送中に破損したり、紛失したりすることがあります。
ブラウザ拡張機能	広告ブロッカーやその他のセキュリティ重視のブラウザ拡張機能は、CSS の読み込みや表示方法に干渉することがあります。

これらの原因を理解することで、WordPress管理画面でCSSが壊れる理由を特定し、実際に修正できるようになります。

WordPress管理画面のCSS破損の修正

WordPress 管理画面で CSS の問題をトラブルシューティングして簡単に修正するために、以下のステップバイステップの手順に従ってください。

ステップ1：プラグインの競合を確認する

私たちの経験では、不適切にコーディングされた WordPress プラグインが、管理画面で CSS が壊れる原因であることがよくあります。ただし、場合によっては、適切にコーディングされたプラグインでも、特定の WordPress サイトやサーバーのセットアップで問題が発生する可能性があります。

プラグインの競合を特定して解決する方法を説明します。

すべてのプラグインを無効化

まず、WordPressの管理ダッシュボードにアクセスし、プラグイン » インストール済みプラグインのページに移動してください。

次に、すべてのプラグインを選択し、「一括操作」ドロップダウンメニューから「非アクティブ化」を選択して、「適用」をクリックします。

その後、管理画面を更新するかページをリロードして、CSSの問題が解決したかどうかを確認してください。CSSが修正された場合、問題はプラグインのいずれかにあることになります。

プラグインを1つずつ再アクティブ化する

問題を引き起こしているプラグインを特定するには、各プラグインを個別に再アクティブ化する必要があります。これは、プラグインの下にある「有効化」リンクをクリックするだけで実行できます。

各プラグインを有効化した後、CSSが再び破損しないか確認するために管理画面をリフレッシュする必要があります。

これにより、問題を引き起こしている特定のプラグインを特定できます。

代替品を見つけるか、プラグインを更新する

競合しているプラグインを特定したら、アップデートが利用可能かどうかを確認できます。アップデートで問題が解決しない場合は、代替プラグインを探すか、プラグイン開発者にサポートを依頼することを検討してください。

詳細な手順については、プラグインを無効化する方法に関するチュートリアルをご覧ください。このチュートリアルでは、WordPressの管理画面にアクセスできない場合にFTPを使用してプラグインを無効化する方法も紹介しています。

ステップ2：HTTPSで安全でないファイルを読み込む

ユーザーが遭遇するCSS破損のもう1つの一般的な原因は、セキュアなURLの設定が不適切で、混合コンテンツの問題が発生していることです。

これは、ウェブサイトがHTTPSセキュアプロトコルを使用するように設定されているにもかかわらず、CSSがHTTPまたは安全でないプロトコルから提供されている場合に発生します。

これが発生すると、Google Chromeのような一般的なブラウザは安全でないリソースを自動的にブロックし、WordPress管理画面でCSSが壊れる原因となります。

この問題は、ブラウザの「検証」ツールを使用して確認できます。「コンソール」タブに切り替えるだけで、混合コンテンツエラーが表示されます。

この問題を解決するには、まずWordPressの設定に正しいURLが設定されていることを確認する必要があります。

設定 » 一般ページに移動し、WordPressアドレスとサイトアドレスの両方のURLにHTTPSが含まれていることを確認してください。

両方のURLにすでにHTTPSが含まれている場合は、WordPressにHTTPSプロトコルを使用するように手動で強制できます。

単純に wp-config.php ファイルを編集し、以下のコードを追加してください。このスニペットは、WordPress に管理画面で常に安全な接続を使用するように指示し、サーバーがその安全な接続を正しく識別するのに役立ち、多くの場合、問題が解決します。

define('FORCE_SSL_ADMIN', true); if (strpos($_SERVER['HTTP_X_FORWARDED_PROTO'], 'https') !== false) { $_SERVER['HTTPS'] = 'on'; }

または、Really Simple SSLのようなプラグインを使用して、すべてのURLでHTTPSを強制することもできます。

詳細については、WordPressで混合コンテンツエラーを修正する方法（ステップバイステップ）に関するチュートリアルを参照してください。

ステップ3：テーマの干渉を確認する

不要なテーマの干渉も、WordPress管理画面でCSSが壊れる一般的な原因であることがわかっています。

テーマ関連の問題を特定して解決する方法を以下に示します。

デフォルトテーマに切り替える

WordPressテーマがCSS破損の原因となっているかどうかを確認するには、まずデフォルトのWordPressテーマに切り替える必要があります。

WordPressダッシュボードに移動し、外観 » テーマページに移動します。

ここでは、Twenty Twenty-FourのようなデフォルトのWordPressテーマを有効にする必要があります。

注意: デフォルトのテーマがインストールされていない場合は、上部にある「新規テーマを追加」ボタンをクリックしてインストールできます。WordPressのデフォルトテーマは年号で命名されています。

デフォルトのテーマに切り替えた後、管理画面を更新してCSSの問題が解決したかどうかを確認してください。

CSSが正しく読み込まれるようになった場合は、問題は以前のテーマにあります。

テーマの競合の修正

これを修正するには、まずテーマのアップデートが利用可能かどうかを確認する必要があります。

外観 » テーマ に移動し、テーマを選択して「今すぐ更新」をクリックします。

これで問題が解決しない場合は、テーマに加えた変更を確認する必要があります。壊れたCSSの問題を引き起こす可能性のあるすべてのテーマのカスタマイズを確認してください。

特に、functions.phpファイル内の追加CSSやカスタムコードに間違いがないか確認したいでしょう。

最終手段として、テーマ開発者にサポートを依頼するか、別のテーマへの切り替えを検討してください。

将来このような間違いを避けるために、WPCodeの使用をお勧めします。これは、カスタムCSSをすべて一元管理できる最高のWordPressコードスニペットプラグインであり、functions.php ファイルを編集する必要はありません。

WPCodeの利点のいくつかを以下に示します。

カスタムCSSコードをより簡単に保存および管理できます。
WPCodeには、エラーを検索するための組み込みチェックが含まれています。
テーマを切り替えても、カスタムCSSは失われません。

WPCode の無料バージョンも限定機能で利用可能です。

私たちは、カスタム CSS を含むカスタムコードスニペットを管理するために、当社のウェブサイトで WPCode を使用しています。詳細については、当社の完全な WPCode レビューをご覧ください。

ステップ4：キャッシュの問題を修正する

キャッシュの問題は、CSS が壊れる一般的な原因です。これを修正するには、まずブラウザのキャッシュをクリアする必要があります。問題が解決しない場合は、WordPress キャッシュプラグインによって生成されたキャッシュをクリアする必要があります。

ほとんどのWordPressキャッシュプラグインは、デフォルトではWordPress管理画面をキャッシュしませんが、設定が間違っていると競合が発生することがあります。キャッシュをクリアすることで、ブラウザがサイトの全ファイルの最新バージョンを読み込んでいることを確認できます。

さまざまなWordPressキャッシュプラグインでキャッシュをクリアする方法について、詳細なチュートリアルがあります。

ステップ5：CDNの問題を修正する

コンテンツデリバリーネットワーク（CDN）サービスを使用している場合、設定ミスがWordPress管理画面でCSSが壊れる原因となることがあります。

これらの問題を特定し、解決する方法を説明します。

まず、ブラウザのインスペクトツールを使用し、「コンソール」タブに切り替えます。ここで、CSSファイルがブロックされているか見つからない場合にエラーが表示されます。

次に、CDNサービスウェブサイトに切り替えて、アカウントダッシュボードにログインする必要があります。

ここから、キャッシュ » 設定 セクションに移動し、キャッシュのパージオプションの下にある「すべてパージ」ボタンをクリックします。

注意: ここではCloudflare CDNのスクリーンショットを示していますが、すべてのCDNプロバイダーでキャッシュをクリアするオプションを簡単に見つけることができます。

その後、ウェブサイトに戻り、管理エリアをリロードして、問題が解決したかどうかを確認する必要があります。

それでも解決しない場合は、別の一般的な原因を見てみましょう。

ステップ6：不正なファイル権限を修正する

また、サーバーがCSSファイルを読み取れないようにする不正なファイル権限も見つかりました。これにより、WordPress管理画面でCSSが破損する可能性があります。

ファイルパーミッションは、サーバーに誰がファイルを読み取り、書き込み、実行できるかを伝えるセキュリティ設定のようなものです。これらが正しく設定されていないと、サーバーは管理画面を正しく表示するために必要なCSSファイルにアクセスできません。

確認および修正方法は次のとおりです。

まず、FTPを使用してWordPressサイトに接続する必要があります。

接続したら、WordPressのルートディレクトリに移動する必要があります。これは、wp-admin、wp-includes、およびwp-contentフォルダが含まれるディレクトリです。

次に、wp-adminフォルダを右クリックし、「ファイルのアクセス権」または「プロパティ」を選択します。

すべてのWordPressフォルダの標準的で安全な設定は755です。すべてのディレクトリがこの値に設定されていることを確認する必要があります。

そうでない場合は、権限を変更し、すべてのサブディレクトリに再帰的に適用してください。

次に、ファイルに対しても同様のプロセスを繰り返します。すべてのファイルの正しいパーミッションは644です。これをファイルのみに再帰的に適用してください。

詳細については、WordPressでのファイルおよびフォルダの権限エラーの修正方法に関するチュートリアルを参照してください。

その後、管理画面にアクセスして、壊れたCSSの問題が解決したかどうかを確認します。まだ問題が見られますか？心配しないでください。試せる手順がいくつかあります。

ステップ7：破損したファイルを修復する

ファイルの破損は、WordPress管理画面でCSSが壊れる原因となることがあります。

WordPressファイルは、お客様が何も操作していなくても破損することがあります。これは、WordPressのアップデートが不完全だったり、誤ってファイルを削除したり、WordPressホスティングプロバイダーの設定ミスが原因で発生する可能性があります。

ここでは、破損したファイルを修復または置き換える方法を説明します。

まず、WordPress.orgからWordPressの新しいコピーをダウンロードする必要があります。

次に、ダウンロードしたZIPファイルをコンピューターに解凍します。

次に、FTPを使用してWordPressに接続し、コンピューターから新しいWordPressファイルをアップロードする必要があります。

新しくクリーンなファイルがウェブサイト上の破損したファイルを置き換えることを確実にするために、求められたら「上書き」を選択してください。

完了したら、WordPressの管理画面にアクセスして、これにより壊れたCSSの問題が解決されたかどうかを確認できます。

問題が続く場合は、ブラウザを調べてみましょう。

ステップ8：ブラウザ拡張機能をチェックする

ブラウザ拡張機能、特にコンテンツブロックや広告ブロックに関連するものは、WordPress管理画面でのCSSの表示方法に干渉する可能性があります。

ブラウザ拡張機能によって引き起こされる問題を特定して解決する方法は次のとおりです。

まず、ブラウザを開き、拡張機能/アドオンメニューに移動する必要があります。

すべての拡張機能、特に広告ブロッカーやセキュリティアドオンを一時的に無効にしてください。

拡張機能を無効にするか、完全に削除することができます。

それが完了したら、WordPressの管理画面にアクセスして、CSSの問題が解決したかどうかを確認できます。

問題が解決した場合は、どの拡張機能が問題を引き起こしたかを特定する必要があります。

各拡張機能を個別に再アクティブ化し、各拡張機能を有効にした後に管理画面を更新して、問題を引き起こしている拡張機能を特定してください。

問題のある拡張機能を特定したら、拡張機能の設定を確認して、WordPress管理画面のCSSをブロックしないようにすることができます。

それでもうまくいかない場合は、代替の拡張機能を探してみてください。

トラブルシューティングのヒント

上記の手順でWordPress管理画面のCSSの問題が解決したことを願っています。しかし、まだ問題が発生している場合は、試せるヒントがいくつかあります。

パーマリンクを更新: WordPressのパーマリンクを更新して.htaccessファイルをリセットします。これにより、CSSの読み込みを妨げているURL書き換えルールが修正される可能性があります。
マルウェアをスキャン: 悪意のあるコードは管理画面を破損させる可能性があります。WordPressサイトをスキャンし、感染をクリーンアップすることを強くお勧めします。

よくある質問 (FAQ)

プラグインを無効化するために管理ダッシュボードに全くアクセスできない場合はどうなりますか？

壊れたCSSがひどすぎてログインすらできない場合は、プラグインを無効化できます。FTPクライアントを使用してサイトに接続し、/wp-content/フォルダに移動して、/plugins/フォルダの名前をplugins_oldのような名前に変更する必要があります。これにより、すべてのプラグインが無効化され、管理画面にアクセスできるようになります。

最近のWordPressのアップデートがこの問題を引き起こした可能性はありますか？

可能性はありますが、一般的ではありません。WordPressのアップデート自体は非常に信頼性が高いですが、アップデートプロセスが中断された場合に問題が発生することがあります。これによりコアファイルが破損する可能性があり、当社のガイドのステップ7はそれを修正するのに役立ちます。

今後、この問題が発生しないようにするにはどうすればよいですか？

最善の予防策は、良好なウェブサイト管理プラクティスに従うことです。変更を加える前に必ずサイトをバックアップし、プラグインとテーマのアップデートはまずステージングサイトでテストし、評判の良いソースから、良いレビューと最近のアップデートがあるプラグインとテーマのみを使用してください。

キャッシュをクリアすると、ウェブサイトの訪問者に影響がありますか？

いいえ、これは安全で一般的なトラブルシューティングの手順です。ブラウザのキャッシュをクリアしても、ご自身のコンピューターにのみ影響します。WordPressのキャッシュプラグインをクリアすると、次に訪問したユーザーのページ読み込みがわずかに遅くなる可能性があります（キャッシュが再構築されるため）が、何も壊れたり、ユーザーエクスペリエンスに悪影響を与えたりすることはありません。

追加リソース

この記事が、WordPress管理画面で壊れたCSSの問題を解決するのに役立ったことを願っています。さらにトラブルシューティングのヘルプが必要な場合は、他のガイドも参照してください。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。