エディタの設定を変更してみた

ども、たきたきでっす。

WordPressのエディターが使いにくい!という訳ではないのですが…

不満に思うことは、

  • タイトルが無駄にデカイ
  • 本文の横幅が狭い
  • 全体的にフォントが大きい

ということでエディタのカスタマイズをすることに。

function.phpにcssを追加する

エディタ用に上書きするcssを定義します。

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

cssを作成してスタイルを適用する

/assets/css/my-gutenberg-style.css ファイルを以下のように編集。

.wp-block {
    max-width: 800px;
}
textarea#post-title-0.editor-post-title__input {
    font-size: 32px;
}

div.editor-block-list__block-edit.block-editor-block-list__block-edit {
    font-size: 70%;
}

編集後、エディタを再読み込みすると…

ちょっとスクショがわかりにくいかもしれないですが、タイトルのフォントが小さくなり、横幅も広がりました!

さらに、文字の大きさも小さくなりました。

ただ、段落間の余白がフォントの大きさの割にもとのままなので微妙な気もしておりますw

参考にしたサイト

https://wemo.tech/2121
エディタの幅を広げる方法を解説しています。

コメント

タイトルとURLをコピーしました