質問が編集できないので、貼り直します。太字が修正部分です。

不具合・カスタマイズ対象ページのURL：「投稿を編集」画面

相談内容：「投稿を編集」画面で、余白部分の幅が広がってしまい使いにくくなってしまいました。Webブラウザーそのものの幅を広くすれば、記入する部分の幅も広がるのですが、デスクトップでブラウザーが幅を取りすぎてしまい非常に使いにくくなってしまいます。

余白部分の幅をもとのように狭くしたいです。

3日ぐらい前に、Cocoon設定に高速化のタブがないことに気が付き、競合するプラグインなどがないかとプラグインの無効化/削除/再導入などをしているうちに相談の現象が発生したと思います。

追記：Cocoonテーマの更新も行いました。

解決につながりそうな事柄がありましたら教えて下さい。

不具合の発生手順：上記の通り、Cocoon設定に高速化のタブがないことに気が付き、競合するプラグインなどがないかとプラグインの無効化/削除/再導入などをしているうちに相談の現象が発生しました。どの段階で編集画面に不都合が発生したのかは不明です。

注：Cocoon設定の高速化は左側に項目がある事に気が付き投稿を修正しました。

解決のために試したこと：

子テーマの追加CSSに「.block-editor-writing-flow {
max-width: 900px !important;
margin-left: auto !important;
margin-right: auto !important;
}」を適用してみましたが改善しませんでした。

添付するスクショ：

・編集画面の様子

一枚しか添付できないようですので上記だけを添付しました。追加で必要であれば以下の画像もアップします。

・現状のプラグイン一覧

・Cocoon設定の画面

環境情報：

----------------------------------------------
サイト名：Win PCトラブル解決ガイド
サイトURL： https://winpctrouble-guide.jp
ホームURL： https://winpctrouble-guide.jp
コンテンツURL：/wp-content
インクルードURL：/wp-includes/
テンプレートURL：/wp-content/themes/cocoon-master
スタイルシートURL：/wp-content/themes/cocoon-child-master
親テーマスタイル：/wp-content/themes/cocoon-master/style.css
子テーマスタイル：/wp-content/themes/cocoon-child-master/style.css
スキン：/wp-content/themes/cocoon-master/skins/skin-tecurio-moon/style.css
WordPressバージョン：6.8.2
PHPバージョン：8.2.28
ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/138.0.0.0 Safari/537.36
サーバーソフト：Apache
サーバープロトコル：HTTP/1.1
言語：ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名：Cocoon
バージョン：2.8.7
カテゴリー数：32
タグ数：350
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.1.3
style.cssサイズ：845 バイト
functions.phpサイズ：203 バイト
----------------------------------------------
Gutenberg：0
Font Awesome：4
Auto Post Thumbnail：0
Retina：0
ホームイメージ：/wp-content/themes/cocoon-master/screenshot.jpg
----------------------------------------------
ブラウザキャッシュ有効化：0
HTML縮小化：0
CSS縮小化：0
JavaScript縮小化：0
Lazy Load：0
----------------------------------------------
利用中のプラグイン：
Akismet Anti-spam: Spam Protection 5.5
Category Order and Taxonomy Terms Order 1.9
Classic Editor 1.6.7
Contact Form 7 6.1
EWWW Image Optimizer 8.2.0
Flamingo 2.6
Jetpack 14.8
Media Library Assistant 3.27
SlimStat Analytics 5.2.13
Wordfence Security 8.0.5
WP Multibyte Patch 2.9.2
Yoast SEO 25.6
----------------------------------------------

 20250802ScreenShot00001.png

前略、Kiminoriさん

私はさほど詳しくはありませんが、先ずはプラグインをひとつずつ無効にして、ブラウザキャッシュをクリアして表示を確認してみてはどうでしょうか？（どのプラグインが影響しているのか絞り込むため）

その際の注意点としては、プラグインをひとつ無効にしたら、ブラウザキャッシュをクリアして確認することです。

Windowsなら、Ctrl＋F5 の押下、MacのChromeなら、Command + Shift + R の押下かと思います。

ちなみに、Cocoonの高速化設定はタブではなく、「Cocoon設定」の文字の上にカーソルを乗せたときにすぐ右側に表示されるメニューの中にあったような気がします。

@kiminori さん

●原因

[Cocoon設定]→[エディター]→エディタースタイル「エディターにテーマスタイルを反映させる」をオンとなっているからです。
オンにすると、エディターも、フロントページと同じレイアウト（親CSSが適用）となります。

このため、[Cocoon設定]→[カラム]→コンテンツ幅が800pxとなっている場合、エディターにも適用され図示のように幅が100%となりません。

https://wp-cocoon.com/column-settiongs/

body#tinymce {
width:100%;
}

●補足

以下ですが、クラシックエディターには該当するクラスがないので、反映されません。
これGutenbergエディターのクラスです。

.block-editor-writing-flow {
max-width: 900px !important;
margin-left: auto !important;
margin-right: auto !important;
}

リフィトリーさん、大門さんありがとうございます。

実は、GoogleGeminiや、perplexity.aiなどにも尋ねて、色々と試行したのですが改善せず質問しました。

大門さんのお返事がヒントになったというか、怪我の功名で（ただし、理由は不明）問題は解消しました。

以下、整理します。

1）7/30より、Cocoon設定に高速化のタブがないと思い込み、Cocoon親/子テーマを更新し、競合するプラグインなどがないかとプラグインの無効化/削除/再導入をした。

2）8/1になり気がついたのだが、「投稿を編集」画面で余白部分のデフォルトの幅が広がってしまい、使いにくくなってしまった。perplexity.aiなどにも尋ねて、色々と試行したが改善せず。

3）8/2　フォーラムで質問し、回答がついた。

4）大門さんの回答を参照し、「　子テーマ下にeditor-style.cssを追加し、以下のコードを記述します。
body#tinymce {
width:100%;
}　」を試したが効果なし。

5）初心にかえり、-エディタースタイル「エディターにテーマスタイルを反映させる」をオフ-にしてみた。テキストが余白部分なく表示されるのを確認できた。

6）エディターにテーマスタイルを反映させる」をオンに戻したところ、何故か余白の幅の問題が解消された状態になった…。

以上です。

結果的に解決済みにチェックをすることになると思うのですが、5～6の操作をしたことで「CSSを編集してもしても直らなかった不都合が直った」理由などがわかりません。この理由がわかる方がいらして、理由を教えてもらえる可能性がありますので、2～3日待って回答済みにチェックを入れたいと思います。

Cocoonのバグではありません。

投稿者:: @kiminori

↑

4）大門さんの回答を参照し、「　子テーマ下にeditor-style.cssを追加し、以下のコードを記述します。
body#tinymce {
width:100%;
}　」を試したが効果なし。

正しく反映されます。

上記の子テーマに追加したeditor-style.cssを反映するには、[Cocoon設定]→[エディター]→エディタースタイル「エディターにテーマスタイルを反映させる」をオンにする必要があります。

うまく伝えられなかったようですね。

1）（大門さんの手元では正しく反映されるとのことですが、）私の手元では何故かCSS変更が見た目には反映されなかったのです。（エディターにテーマスタイルを反映させる」をオン」はオンになっている状態でした。コードの間違いということではなく、私の手元では何故か反映されなかったということです。）

2）CSSはもとに戻した。

3）その状態で、一度エディターにテーマスタイルを反映させるをオフにした。

4）その後、正しく反映されにしたところ（他の操作は一切行っていないのに）何故か余白の問題が解消した。

要するに、CSSなどは何も変更されていないと思われるのに、エディターにテーマスタイルを反映させるを一度オフにした後にオンにしたら直ってしまったのです。

なぜ、この様な動作になったのかはわかりません。

追記

余白の問題ではなく、テキスト入力部分と余白部分の比率の問題であったのかもしれません。

投稿者:: @kiminori

↑

コードの間違いということではなく、私の手元では何故か反映されなかったということです。

子テーマCSSに追加すれば、「エディターにテーマスタイルを反映させる」のオン、オフに関わらず反映されます。

※[外観]→[カスタマイズ]→追加CSSでは反映されません。

クラシックエディターを開き、Chromeデベロッパーツールで、どのCSSが適用されているのか確認してみて下さい。

申し訳ないですけど、あなたの要求にお応えできるスキルがありません…。

これもWordPressを運用する上での勉強と思って、調査の方法を覚えましょう。

●ご参考

https://turicco.com/css-check/

申し訳ないですけど、あなたの要求にお応えできるスキルがありません…。どの様な操作をしたら良いのかがわからないです。

わからないなりにですけど、これで良いですか？

追加です。

@chu-ya 

＞子テーマCSSに追加すれば、「エディターにテーマスタイルを反映させる」のオン、オフに関わらず反映されます。

※[外観]→[カスタマイズ]→追加CSSでは反映されません。

GoogleGeminiに教えてもらいながら、自分では理由のわからない操作を行い、効果がないようだったので戻し方も教えてもらいながら戻しました。

というわけなので、操作方法は間違えていたのかもしれません、申し訳ないですね。

このあとで状態が変わっていませんでした。

その後、オン→オフ→オンとしたら、なんだかわからないけど直ってしまったんです…。