MacユーザーでChromeを使っていてWordPressの投稿画面が白くなる場合

カテゴリー:
WEB制作
投稿:2022.2.25

Chromeがアップデートされて突然ワードプレスのブロックエディタの投稿画面が真っ白になりました。Safariで開いてみると特に問題ないんですよね。

ワードプレスのFunctionsを調べたりテーマを色々いじってみたものの問題なし。

これはChrome側に問題があるな?と思い探っていた結果、どうもダークモードが悪さしているっぽい結論に達しました。

完全に対策できるわけではないですが一時的に凌ぐ方法を記載します。

僕の症状

  • Macを使用しダークモードに設定している
  • オリジナルテーマを使用している
  • ブロックエディタモードの投稿画面のテキスト文字が真っ白になってしまい読めない
  • テーマをWP製のものにすると真っ白文字は解消する
  • Safariなどの別のブラウザで開くと特に問題はない

おそらくChromeがWPのエディタCSSを読み込んだ際にCSSの処理がちょっと変になっているのでは?という印象です。実際、他サイトのフロントをChromeで見ると背景色や文字色が白くなっちゃってるのを数サイト見かけました。背景色と文字色が一緒になっちゃって一部分が読めないサイトもありましたね。

Macをダークモードにしているなら切る

おそらくこれだけでスタイルが上手く適応されて本来のサイトデザインが見れます。ワードプレスの投稿画面も無事文字が読めるようになったので更新できるようになりました。

ただしMacがダークモードじゃなくなるので、ダークモードに慣れきってしまった僕にとってはかなり目が痛い…。とりあえずChromeのテーマにダークモードっぽいのがあったのでそれ入れました。アプリとかは眩しいけどしょうがない。

プラグインで解決

プラグインのクラシックエディタを入れるとCSSが上手く処理されて問題なく文字が読めます。ただしブロックエディタに完全に乗り換えた僕としてはこの案は採用できませんでした…。

エディタスタイルを当てる

ワードプレスはfunctionsで投稿画面のCSSを当てられます。これで文字色を#000と黒を指定してあげれば恐らく適応されます。実際、Chromeの開発者モードでCSSを当ててみると読めるようになったので実際にはやっていませんが解決できると思います。

最後に

ワードプレスの公式のテーマを使えばブロックエディタが白くならないので何かしらの設定方法があると思うんですよね。でも時間的にそこまで検証はできていません。

おそらく今後、Chromeかワードプレスが更新されればいつの間にか解決される問題だと思われます。とりあえず現状は対策可能な妥協案を採用して凌ぐほかないでしょう。

解決されてもまたぶり返す問題の可能性も・・・。