MENU

WordPressでブロックエディター(Guternberg)のコンテンツ幅を広くする方法

2019 9/02
WordPressでブロックエディター(Guternberg)のコンテンツ幅を広くする方法

WordPress5から実装された新ブロックエディター、Guternbergですが、個人的にエディターの横幅が小さすぎる。

そこで、ブロック入力エリアの横幅をもっと広くして記事を書きやすいようにカスタマイズしてみました。

目次

Guternbergのコンテンツ幅を広くする方法1

まずはブロックエディタに適用されるCSSファイルを読み込むため、functions.phpに以下のコードを記述します。

function add_my_assets_to_block_editor() {
    wp_enqueue_style( 'my-gutenberg-style', get_stylesheet_directory_uri() . '/assets/css/my-gutenberg-style.css');
}
add_action( 'enqueue_block_editor_assets', 'add_my_assets_to_block_editor' );

CSSファイルへのパス('/assets/css/my-gutenberg-style.css')は適宜書き換えてください。

ちなみに、この方法は以下の記事で紹介した方法です。

あわせて読みたい
WordPress5の新ブロックエディターGutenbergの編集画面に適用されるCSSやJSを読み込む方法
WordPress5の新ブロックエディターGutenbergの編集画面に適用されるCSSやJSを読み込む方法Classic Editor(旧エディタ)では、投稿編集画面にスタイルを適用させたい場合、add_editor_style()を使ってCSSを読み込んでいました。しかし、新しいブロックエディタ...

さて、このようにして読み込んだmy-gutenberg-style.cssにて、以下のようにスタイルを指定します。

.wp-block {
    max-width: 800px;  /* 好きな幅で */
}

これだけ!

ちなみに、デフォルトではmax-width610pxしかありませんでした。

Guternbergのコンテンツ幅を広くする方法2

いちいちファイルを用意するのは面倒臭いよ。って人は、admin_headアクションフック で直に<style>タグを吐き出してもOKです。

add_action( 'admin_head', function() {
  echo '<style>.wp-block{max-width: 800px !important}</style>'."\n";
});

この記事が気に入ったら
フォローしてね!

目次
目次
閉じる
WordPressテーマ SWELLWordPressテーマ SWELL