iEhohs.com

ウェブ&システム担当の仕事メモ的なブログ。個人的な記事ばかりです。

Gutenberg Editorの横幅とフォント、見出しの調整

開発メモ

WordPress 5.0以降に導入されたブロックエディターことGutenberg。

従来のクラシックエディターと仕様が大きく異なる他、プラグインが対応していないなどの理由からクラシックエディターに戻して使っている人も多いかと思います。

僕も最初は抵抗がありましたが、使っているうちに慣れてきてクラシックエディターより使いやすいのではないかと感じてきました。

クラシックエディターを使い続ける人もいるかもしれませんが、サポートが永久ではないためいつかはGutenbergに切り替えないといけません。あくまで猶予期間と割り切って、Gutenbergの導入を検討することをおすすめします。

さて、Gutenbergの編集画面は本体のCSSとは別のCSSから作り出されるため、デフォルトだとただの見にくいエディターのままです。

そこでテーマのデザインに合わせてGutenbergのデザインも整えてやりましょう。投稿された結果をイメージしやすくなるため、クラシックエディターを使うよりもずっと効率的だと思います。

参考にしたのは以下のリンクです。

https://www.nxworld.net/wordpress/wp-gutenberg-css-settings.html

function.php

<?php
// Gutenberg
add_action( 'after_setup_theme', 'nxw_setup_theme' );
function nxw_setup_theme() {
  add_theme_support( 'editor-styles' );
  add_editor_style( 'editor-style.css' );
}
?>

function.phpに以上のコードを入れてeditor-style.cssを呼び出します。

editor-style.css

@charset "utf-8";

.editor-post-title__input,
.wp-block {
	font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'Hiragino Kaku Gothic Pro', 'Meiryo', 'MS PGothic', sans-serif;
	max-width: 760px;
}

.editor-post-title__input {
	font-size: 180%;
}

h2,
h3,
h4 {
  margin: 1em 0 0.8em 0;
  padding: 10px 0;
  line-height: 1.5;
  font-size: 120%;
}

h2 {
 	padding: 20px 0 20px 20px;
 	font-size: 150%;
 	border-left: 2px solid #333;
 	background-color: #f5f5f5;
}

h3 {
 	border-bottom: 5px solid #f5f5f5;
	font-size: 140%;
}

h4 {
	font-size: 130%;
}

そういうわけでテーマのフォルダ直下にeditor-style.cssを作成して以上の記述を行います。

いろいろ設定できそうですが、横幅、フォント、見出しのスタイルを入れておけば十分でしょう。

.editor-post-title__inputは記事タイトル部分、.wp-blockはそれ以外のブロックです。

横幅はmarginが左右に15pxずつ入るので、+30した値を入れておくとちょうどよくなります。記事タイトル部分は左右14pxで少しだけ横幅が変わりますが、そこまで気にしなくていいでしょう。

見出しはh2〜h4で指定。自動的に.editor-styles-wrapperのクラス名が付与されてエディター画面に反映されます。

h4はFont Awesomeを使って装飾していたのですが、それを入れるにはもうひと手間が必要そう。でも無くても十分見やすくなったのでこれでよしです。

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です