タグアーカイブ レイアウト崩れ

QSMプラグイン更新後にメディア画面のレイアウトが崩れた時の直し方

特定のプラグインを更新した直後にメディアアップロード画面のレイアウトが崩れた場合、まず該当プラグインのバージョンを更新前の状態に巻き戻すまたは一時的に無効化し、公式サポートへ報告するのが最も早い解決策だ。根本原因はプラグインが管理画面に読み込む CSS や JavaScript の競合にあり、プラグイン側の修正を待つ必要がある。

なぜ QSM プラグインの更新後にレイアウトが崩れるのか

プラグインのバージョンアップでメディアアップロード画面に限って表示が崩れる現象は、Quiz And Survey Master（QSM）v11.1.1 で報告されている。このバージョンで管理画面の他ページ向けに追加された CSS や JavaScript が、メディアライブラリのモーダルやグリッドレイアウトと競合するケースが主な原因だ。

WordPress の管理画面では複数のプラグインが同じ画面にスタイルを適用できる。あるプラグインが独自のフォーム用スタイルをグローバルに出力した場合、メディアアップローダーのドラッグ＆ドロップ領域やサムネイル一覧の幅計算が崩れ、ボタンが画面外に飛び出したり画像が縦一列に並んだりする。

この問題は QSM 側が読み込む管理画面用 CSS のセレクタ範囲が広すぎることに起因する。プラグイン開発者が自プラグインの設定画面だけに限定してスタイルを当てるつもりが、WordPress 全体の管理画面に影響するセレクタを使ってしまうことで発生する。

QSM を最新にしたままレイアウト崩れを直す方法

QSM プラグインに依存しているサイトでは単純な無効化が難しいため、まずはプラグイン公式の修正を待ちつつ、以下のいずれかの方法で一時的にレイアウトを正常化できる。

過去の安定バージョンに巻き戻す

WordPress ではプラグインのバージョンを手動でダウングレードできる。まず管理画面の「プラグイン」から QSM を一度削除する。削除してもアンケートデータや設問はデータベースに残る。

次に QSM の公式プラグインページ下部にある「以前のバージョン」 から v11.1.0 以前の安定版 ZIP を入手し、「プラグイン」→「新規追加」→「プラグインのアップロード」でインストールする。有効化後、メディアアップロード画面を再読込すればレイアウトは戻る。

このデモはレイアウト崩れが発生した際の切り分けとバージョン巻き戻しの流れを示している。プラグイン削除で既存データが消える心配はなく、過去バージョンの再適用で一時的に運用を継続できる。

管理画面の特定ページだけで無効化するコードを使う

QSM を有効にしたまま管理画面のメディアページだけでプラグインのスタイルを外したい場合、functions.php にフィルターフックを追加する方法がある。テーマの functions.php や Code Snippets プラグインを用いて以下のコードを追加する。

add_action('admin_enqueue_scripts', function($hook) {
    if ('upload.php' === $hook || 'media-new.php' === $hook) {
        wp_dequeue_style('qsm-admin-style'); // 実際のハンドル名に応じて変更
    }
}, 100);

上記の qsm-admin-style は実際に登録されているスタイルシートのハンドル名に置き換える必要がある。ハンドル名は QSM のプラグインソースコードを確認するか、ブラウザの開発者ツールで読み込まれている CSS ファイルの ID 属性から特定できる。

この方法はプラグインのアップデートでハンドル名が変わると再設定が必要になるため、あくまで暫定対応として位置づけるのが現実的だ。

自動更新を一時停止して様子を見る

プラグインの自動更新が有効になっている環境では、意図しないバージョンアップで管理画面が壊れるリスクが常にある。QSM を v11.1.0 に戻したら、プラグイン一覧で QSM の「自動更新を有効化」のチェックを外しておく。WordPress 本体の「更新」画面からも状況を監視し、次期バージョン v11.1.2 以降で修正パッチがリリースされたタイミングで手動更新する方が安全だ。

根本解決のためにすべきこと

レイアウト崩れが特定のプラグインに起因することが分かったら、積極的にプラグイン開発者へ報告するのが最も建設的な対応だ。QSM の公式サポートフォーラムや GitHub リポジトリで、以下の情報を添えて報告すれば修正が加速する。

• 現象が起きた WordPress のバージョンと PHP バージョン
• QSM のバージョン（v11.1.1）
• メディアアップロード画面のスクリーンショット
• ブラウザの開発者コンソールに表示された JavaScript エラー

開発者コンソールの確認方法は、Google Chrome の場合、Windows では F12 キー、Mac では Cmd + Option + I で「Console」タブに切り替え、赤字で表示されたエラーをキャプチャする。

開発者にとってコンソールエラーと発生条件の詳細は修正箇所を特定する決定的な手がかりになる。報告するときは感情的な内容を避け、「メディアページを開いたときだけレイアウトが崩れる。コンソールには ○○ というエラーが出ている」と具体的に伝えるとよい。

よくある質問

プラグインを無効化せずにメディアアップロードだけ使う方法はあるか

投稿画面の「メディアを追加」ボタンからもファイルをアップロードできる。メディアライブラリのグリッド表示が崩れていても、このモーダル画面では正常に動作するケースが多い。

QSM が原因かどうかを確実に特定するにはどうすればいいか

最も確実なのは Health Check & Troubleshooting プラグインを使ったトラブルシューティングモードだ。このモードではログイン中の自分だけにプラグインの無効化が適用されるため、サイト訪問者には影響を与えずに QSM のオンオフを切り替えられる。

バージョンを戻すとアンケートのデータは消えるのか

消えない。QSM の設問や回答データはデータベースの専用テーブルに保存されている。プラグインを削除しても WordPress の標準動作ではテーブルが削除されないため、再インストール後にすべてのデータが復元される。

子テーマの functions.php を編集するのが不安だ

Code Snippets プラグインを使えば管理画面から安全に PHP コードを追加できる。文法エラーがあるとスニペットが自動で無効化されるため、サイト全体が真っ白になるリスクを回避しやすい。

今回の問題は WordPress 本体のせいか

違う。WordPress 本体の更新ではなく、QSM プラグインの特定バージョン（v11.1.1）が原因だ。WordPress コアにはメディア画面のレイアウトに関する既知の不具合は報告されていない。

この記事のポイント

• QSM v11.1.1 への更新が原因でメディアアップロード画面のレイアウトが崩れる
• 即効対策は v11.1.0 以前の安定版に巻き戻すこと
• 暫定対策として functions.php で特定ページだけスタイルを停止できる
• 恒久解決にはプラグイン開発者への詳細なエラー報告が不可欠
• 自動更新を停止して次期バージョンでの修正を待つのが安全

佐々木 太陽

・ Reddit、Stack Overflow、WordPress.org フォーラムを日々巡回し、現場の悩みを拾い上げて記事化
・ WordPress、WooCommerce、Next.js などモダンWeb制作領域のトラブルシューティングが専門
・ 「検索しても答えが見つからなかった」を一つでも減らすことが目標
・ エラーメッセージから根本原因にたどり着く粘り強い調査が得意
・ 初心者がつまずきやすい箇所を先回りで解決する記事作りを心がけている