WordPress ブロックエディタの編集画面幅が狭い場合に100%幅に設定する方法

ほとんどの WordPress テーマでは、ブロックエディタの編集画面の幅が適切な幅に設定されていますが、一部のテーマでは、ブロックエディタの編集画面でブロックの最大幅が狭く指定され、編集画面に余白が多すぎたり完全に埋められない場合があります。

WordPress AwakenテーマやSpielテーマなど、一部のテーマでは、ブロックエディタのブロックの最大幅が制限されており、admin_headフックを使用してブロックエディタのスタイルを調整しようとしても変更されないことがあります。

このブログには、現在の GeneratePress テーマがインストールされていますが、GPテーマも見てみると、ブロックエディタで編集画面が1120pxまたはそれより狭く設定されているようです。このブログでは745px程度に設定されていますね。

この記事では、ブロックエディタの編集画面でブロックの幅が制限されている場合の幅制限を解除する方法について説明します。

WordPress ブロックエディタの編集画面幅が狭い場合に100%幅に設定する方法

いくつかの WordPress テーマでは、ブロックエディタ編集画面でブロックの幅が狭く制限されている場合があります。通常は適切な幅に設定されているため、問題はありませんが、狭すぎると表示が悪い場合や、文章を書くのを妨げる可能性があります。

Awakenテーマの場合、次のスタイルが適用され、ブロックの最大幅が747ピクセルに設定されています。

.wp-block {
    max-width: 747px;
}

Spielテーマは、以下のスタイルがテーマからロードされ、最大幅が650pxに制限されます。

.editor-visual-editor__post-title-wrapper > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: 650px;
    margin-left: auto !important;
    margin-right: auto !important;
}

この場合、次のコードを チャイルドテーマの関数ファイルに追加すると、問題が解決する可能性があります。

function full_width_editor_custom_style() {
    echo '<style>
        .editor-styles-wrapper .wp-block,
        .editor-post-title,
        .editor-post-title__input {
            max-width: 100% !important;
            width: 100% !important;
        }
    </style>';
}
add_action('admin_head', 'full_width_editor_custom_style');

しかし、Spielテーマと Awakenテーマでは、上記のコードを追加しても問題は解決しません。

テーマがadd_theme_support( 'editor-styles' ) を宣言していて、「エディタ用 CSS」をロードしている可能性があります。特に、ブロックエディタのサポートテーマは通常このように構成されているそうです。 Spielテーマはブロックベースのテーマです。

テーマでエディタスタイルを登録しておくと、テーマが提供するスタイルが優先順位を取ることができます。

この場合は、editor-style.cssファイルを直接作成してテーマ（またはチャイルドテーマ）に登録する方法でアクセスする必要があります。

このような作業は初心者にとって簡単ではないので、 WordPress プラグインを作ってみました。プラグインは Naver カフェからダウンロードできます。

• WordPress ブロックエディタの編集画面でブロック幅を100%に設定するプラグインダウンロード

GeneratePress テーマでも、ブロックエディタのブロックの最大幅が制限されている可能性があります。ゼナレートプレステーマを使用している場合でも、上記のプラグインを使用すると、ブロックエディタの幅が100％に設定されます。

プラグインのインストール方法

プラグインは、 有料プラグインをインストールするのと同じようにアップロード方法でインストールしてください。 WordPress お知らせ»プラグイン»新しいプラグインを追加に移動し、 プラグインのアップロード ボタンをクリックします。

プラグインの追加ページが表示されたら 閲覧... ボタンをクリックしてダウンロードしたzipファイルを指定するか、zipファイルをファイル選択フィールドにドラッグアンドドロップして、 今すぐインストール ボタンをクリックしてインストールできます。

ブロックエディタでブロックの最大幅を特定の幅値に設定する

ブロックの最大幅を100％ではなく特定の幅の値で指定したい場合は、プラグインに含まれるスタイルシートファイル（CSSファイル）から 最大幅 値を変更するだけです。プラグインに含まれるCSSファイルには、次のコードが入力されています。以下のコードでmax-width値を適切に変更してください（例：1200px）。

.editor-styles-wrapper .wp-block {
    max-width: 100% !important; /* 100%를 원하는 값으로 변경 */
    width: 100% !important;
}

必要に応じて追加のスタイルを CSS ファイルに追加できます。

上記のプラグインは一部のテーマでのみテストしました。うまくいかないテーマがある場合は、以下のコメントでテーマ名を教えてください。ただし、 有料テーマの場合、私は確認できません。

最後に、

以上で、ブロックエディタで編集画面が狭い場合、編集画面の幅を100%や特定の幅の値に設定する方法を見てきました。

GeneratePress テーマでも編集画面の幅が狭くなることがあり、Awaken、Spielなど一部のテーマではエディタのブロックの幅が制限されています。 AwakenとSpielのテーマは、ユーザーがそれほど多くではありません。

参照

• 時間と効率を向上させる WordPress ブロックエディタ（Gutenberg）キーボードショートカット
• WordPress ブロックエディタのテーブル（表）ブロックの使用
• GeneratePress テーマヘッダー要素（ページヒーロー）の作成方法