WEB制作者向け無料テーマ「Arkhe」をリリースしました

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')は適宜書き換えてください。

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

さて、このようにして読み込んだ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";
});

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次