WordPress５から投稿画面に、新しい編集エディタ「Gutenberg」に変わりました。
編集機能は以前より直感的になったり、簡単に記事がかけるようになりました。
みにくい「Gutenberg」
機能はよくなったのですが、タイトルの文字サイズなどアンバランスでみにくいのでCSSを使って調整したいと思います。
編集エディタ用の外部CSSを設定する
外部CSSを読み込むためには、functions.phpに次のコードを追記します。
add_editor_style( get_stylesheet_directory_uri() . '/css/editor-style.css' );
add_theme_support( 'editor-styles' );
ここではcテーマのcssファルダーにある「ditor-style.css」を読み込んでいます。
変更したい部分のCSSを追記
あとは外部CSSに、変更したい部分のスタイルを設定し実際に反映されている確認していきます。
例えば、タイトルの文字サイズを小さくしたければ、
.editor-post-title__block .editor-post-title__input { font-size: 21px; padding: 9px 14px; }
タイトルの文字の大きさが変わりました。あとはこれを繰り返し必要な変更を加えて胃kwばかんせいです。
