ワードプレス｜投稿編集画面の背景色がグレーで見にくいときの対処法

こんにちわ。

りゅうまるです。

今回は、ワードプレスの編集画面の不具合について書いていこうと思います。

記事の内容は、投稿編集画面の背景色が、グレー色で見にくくなってしまったときの対処法になります。

実際に行った4通りの手順を画像解説しています。検証しているテーマはCocoonです。

編集画面の背景がグレー色から戻らない不具合

更新頻度が極めて少ない僕ですが、久しぶりに記事を書こうと思ってワードプレスを開いてみると、なぜか編集画面の背景がグレー色になってました。下の画像の様に！

文字入力やそのほかの機能に何ら問題は無いんですが、画面全体の背景色とエディターの背景色が同じグレー色で、ものすごく見にくいんですよね。これ。

ブロック要素のクラシックエディタを追加しても以下のような感じです。ツールボックスの背景は以前同様で問題ないんですが、肝心のテキスト入力欄がやばいです。

新規投稿、下書き編集、公開済みの再編集のいずれも同じ状態で、プレビュー（投稿表示）画面では通常通りに反映されます。

なので、記事にするほどの問題じゃないといえばそうなんですが、とにかく記事が書きにくい！

ちなみに、ワードプレスのバージョンは、5.0以降のGutenberg(グーテンベルク)です。はっきり覚えはないですが、5.0以降の更新後、マイナーバージョンへの更新は1回か2回ほどかな。

今まで背景の色を気にしたことがなかったんですが、何の違和感も感じなかったということは、今回のグレー色は何らかの原因で変わってしまったんだと思います。

早速ネットでいろいろ読み漁ってみたんですが、はっきりとした解決策は見つかりませんでした。2時間以上かけて調べるも解決策は見つからず・・・。

僕の検索の仕方が悪かったのか、「ワードプレス　背景色　グレーで見にくい」とか「Cocoon　編集画面　背景色」とか色々検索したんですが、検索するキーワードが一致しなかったかもしれません。

ズバリそのものの解決策は見つけられませんでしたが、編集画面の背景色についての記事がいくつかあったので、それらを参考に対処してみることにしました。

試した方法は以下の内容で簡単な方法ばかりです。結果的にワードプレスのバージョンアップで解決しましたが、ネット情報によるとバージョンアップのタイミングによっては何かしらの不具合が発生する可能性もあるみたいです。

僕が試した方法と、手順の画像を載せておくので、同じ症状でお困りの方は参考にしてみてください。繰り返しますが、ワードプレスのバージョンアップは慎重に^^できれば最後の手段で。

テーマ（子テーマ）の更新

まずは、テーマの更新を試してみるのが王道ということで、試してみましたが結果は変化なしです。

手順は、ダッシュボード⇒テーマ⇒子テーマの更新です。

ダッシュボードから外観にカーソルを置いてテーマをクリック。

テーマ一覧ページで今すぐ更新（テキストリンク）をクリック。

更新しました。と表示されれば更新完了です。

編集画面で結果を確認。

テーマの一覧で、今すぐ更新のリンク文字が見当たらない場合は最新バージョンに更新済みです。

プラグインTinyMCE Advancedの更新と停止

TinyMCE Advancedのプラグインは、エディタの編集ツールを拡張できるプラグインで、僕は表の作成が主な目的に使用してます。

エディターツールの機能を変更するプラグインなので、今回の不具合と関係しているかも?ということでプラグインの更新と、停止⇒有効化の切り替えを繰り返しやってみました。

プラグインの更新は頻繁にやっているので、これに関してはあまり期待はしてませんでしたが、やれることからやっていこうということで。

結果は予想通り・・・変化なしでした。

TinyMCE Advancedの更新

手順はダッシュボード⇒プラグイン⇒更新をクリック（更新確認）です。

ダッシュボードからプラグイン（インストール済みプラグイン）をクリック。

インストール済みのプラグイン一覧からTinyMCE Advancedを探し、更新（テキストリンク）をクリック。数秒後、更新しました。と表示されれば更新完了です。

編集画面で結果を確認。

TinyMCE Advancedの停止と有効化

上と同じ手順でプラグインTinyMCE Advancedの項目を見つけます。

プラグイン名の下の、停止をクリック。編集画面で結果を確認。
プラグイン名の下の、有効化をクリック。編集画面で結果を確認。

Cocoon設定でエディター背景色を設定

次に試したのは、Cocoonテーマの設定です。

Cocoon設定からエディターの背景色を変更できるということで、かなり期待して試してみたんですが、残念ながら変化なしという結果でした。

設定のやり方は、クリアでデフォルトに戻すやり方と、コードを記入して背景色を指定するやり方を両方試したんですが、どちらもグレー色のまま！変化なし！！という結果です。

設定の手順は、ダッシュボード⇒Cocoon設定⇒エディター⇒クリアまたは色指定⇒設定をまとめて保存です。

ダッシュボード画面でCocoon設定をクリック。

Cocoon設定からエディターをクリック。

エディター色項目の背景色で、色を選択をクリック。（設定画面が開きます）

背景色の設定画面が開くのでクリアをクリック。以前に色の指定をした覚えはないけど、デフォルトに戻す意味で。

変更をまとめて保存をクリック。

編集画面で結果を確認。

背景色を指定する場合は、上の背景色設定（クリア）の手順で色を選択をクリック後、ボックス（空白）内にコードを記入。（下画像）

（白色を指定する場合は、#ffffffと記入）

変更をまとめて保存をクリック。

編集画面で結果を確認。

エディター画面をワードプレスデフォルトに戻してみる

背景色のグレーを何とかするだけなら、エディター画面をワードプレスデフォルトに戻すのもありです。Cocoonの場合、デフォルトはテーマの仕様なので。

結果は、プチ解決ってとこかな？背景は白色になるものの、これはこれで見にくいかも。

手順は、ダッシュボード⇒Cocoon設定⇒エディター⇒エディターにテーマスタイルを反映させるのチェックを外す⇒変更をまとめて保存です。

ダッシュボードからCocoon設定をクリック。

Cocoon設定からエディターをクリック。

エディタースタイル項目の、エディターにテーマスタイルを反映させるのチェックを外す。（チェックマークを左クリック）

変更をまとめて保存をクリック。

ワードプレスのデフォルトに戻すと、エディターの背景は白色に戻りますが、編集画面の横幅が狭くなってしまいます。

気になるグレーの背景色は解消されますが、これはこれで見にくく感じるかも。（プチ解決？）

↑↑↑↑↑↑

恥ずかしながら、ワードプレスのデフォルトなんて初めて見たんじゃないかな。慣れれば何の違和感もないんだろうけど・・・。ん～～～・・・。

ワードプレスを最新バージョンに更新

これまでの方法は簡単な手順で出来ますし、不具合などのリスクはほとんどないと思うので、お試しの場合は安心してやってほしいと思います。

先ほどのワードプレスデフォルトで、背景色は何とか見やすくなるけど、「見にくいからいや!」という方は、ワードプレス最新バージョンに更新してみてください。

手順はダッシュボード⇒更新をクリックです。

ダッシュボード画面の上部に"WordPress 5.3.2 が利用可能です ! 今すぐ更新してください。"と表示されていれば、現在のバージョンから最新バージョンにアップグレード可能です。

今すぐ更新してください。（テキストリンク）をクリック。

※ここをクリックしただけでは、最新バージョンに更新されません。次の画面で"今すぐ更新する"をクリックして更新完了になります。

次の画面で今すぐ更新をクリックする前に以下をお読みください！

jaバージョンの表示を確認して、更新するなら今すぐ更新をクリックします。

ワードプレスを最新バージョンに更新した結果、見にくかった編集画面のグレー色が元の白色に戻りました。

これこれ！思った通りの結果で大満足～～^^

元に戻ったことがうれしすぎて、直後からこの記事を書いていますが、記事作成に関しては何の不具合もないので解決できたのではないかと思います。

下の画像は、今回の不具合ともいうべきグレー色の背景と、対処後の白色背景の比較です。比べてみると、違いがはっきりわかってもらえるかな。記事にするほどでもない？

まとめ

今回は、ワードプレスの編集画面の不具合について僕なりの解決法を書かせてもらいました。

エディター画面の背景がなぜグレー色になってしまったのか？原因はわかりませんが、結果を考えるとワードプレスのバージョンアップが関係しているのかな?と思います。（こじつけっぽい）

バージョンアップといっても、以前の4.0バージョンから5.0バージョンへの時ほど慎重になることはないのかな？とも思いますが、まずは、テーマの更新、プラグインの設定見直し、Cocoon設定の確認→変更など、リスクの少ないやり方から試してみてくださいね。

ちなみに、ワードプレスのバージョンをダウングレードすることはできるようですが、FTPって何？サーバーの設定って・・・。なんのこっちゃさっぱりわかりません！！

最新バージョンへの更新は慎重に。

それではまた。

りゅうまるでした☆