WordPress5.0の新エディタ「Gutenberg」のスタイルを記事に合わせる方法

WordPressの新エディタ「Gutenberg」のスタイルを変更して記事に合わせてたので、スタイルを合わせる方法を紹介します。

ちなみに新しいエディタは「Gutenberg」のことで、見出しや本文、画像をブロック単位で操作できるようにしたもの。以前はプラグインで導入していたが、WordPress5.0からはデフォルトで新エディタとなる。

そもそもWordpressの「Gutenberg」は使いやすいのか

色々意見が分かれているようですが、自分的にはとても気に入ってる。素直に書いていける感じ。ただ気になるのはブロック単位で操作できるのはいいんだけど、ブロックを複数一緒に移動したりできないのが気に入らない。そのうち改善されるよう願いたい。

見出しや本文、画像なんかは直感的に入力でき、効率よく記事が書けるように感じているので、当サイトも既に2018年10月以降は「Gutenberg」を導入している。

WordPressの「Gutenberg」の見た目がちょっと気に入らない

後、強いていうのであればエディタのテキストスタイルがまんますぎて、なんかストンと入ってこない。タイトルとかめっちゃ大きいし。ちなみに下記がデフォルトのスタイル。

うーん、味気ないですよね。なんか書いててもパッとしない。せっかくだからエディタ画面にも本ページのスタイルを当てたい！ってことで調べて出てきたのがこちらのサイト。

なるほど、function.phpにちょっと付け加えたらいいんだね。

How to add WordPress Theme Styles to Gutenberg

Gutenbegのエディタ画面でスタイルシートを適用する

ということでGutenbergにスタイルシートを適用させるために関数をfunctions.phpに付け加えましょう。こちらがその関数。

function editor_gutenberg_styles() {
	 wp_enqueue_style( 'tabor-gutenberg', get_stylesheet_directory_uri() . '/style.css' , false, '1.0', 'all' );
}
add_action( 'enqueue_block_editor_assets', 'editor_gutenberg_styles' );

参照先では別のスタイルシートを読み込むように書かれていたが、今回はメインのスタイルシートファイルを読み込むようにしてみた。

Gutenbegのエディタ画面へのスタイルシートの適用方法

まずはタイトルのスタイルを変えてみよう。タイトル部分の要素は下記のものになる。

body.block-editor-page .editor-post-title textarea{
}

ここにページと同じスタイルを割り当ててみると・・・

うまい具合に変わった。

次に見出しや本文、ボールドのも変えてみる。見出しと本文の要素はこのようにしてみた。

/* 見出し */
body.block-editor-page div.editor-writing-flow h2
body.block-editor-page div.editor-writing-flow h3
body.block-editor-page div.editor-writing-flow h4

/* 本文 */
body.block-editor-page div.editor-writing-flow textarea

これで他のスタイルも変更することができた。

ボールド部分はページのスタイルを勝手に読み取っていたので特に何もしなかった。で、全体的（ボックスの幅とかも）に変えた結果がこちら。

カスタムHTMLの部分はiframeで作られておりスタイルシートは変更できなさそうなので諦めた。また画像のサイズも実際の合図に合わせるのは無理なようだ。

まとめ

ということで結果的には満足できるくらいにスタイルを本ちゃんのものに合わせることができた。たまにキズなのは、本ちゃんとほぼ同じなので、編集画面にいると思ったら、実際のページにいたり、実際のページをプレビューで確認してると思ったらまだ編集画面だったりと。

WordPressでGutenbergを使ってる方はぜひ試してみては。