1. ホーム
  2. Web制作
  3. wordpressの編集画面の文字を小さくする

投稿日:2023年1月3日

関連リンク

修正方法

functions.php へ以下のように記入します。


// 編集画面の文字を小さくする
function my_admin_style()
{
    echo '<style>
	.editor-styles-wrapper {
	    font-size: 0.75rem !important;
	}
	.editor-styles-wrapper p {
	    line-height: 1.3 !important;
	}
	.editor-post-title {
    	    margin-bottom: 80px;
	}
        .rich-text [data-rich-text-placeholder]:after {
	    opacity: 0.2 !important;
        }
    </style>' . PHP_EOL;
}
add_action('admin_print_styles', 'my_admin_style');

タイトルのサイズは.editor-post-title の値を修正してください。

block-editor-block-contextual-toolbarがタイトルにかぶるので、.editor-post-titleにmargin-bottomを入れてあります。

.rich-text [data-rich-text-placeholder]:after では、ブロックを選択するには「/」を入力という文字が濃いので薄くします。

元のサイズ

修正後のサイズ

ビジュアルエディタは、マークダウンで書けるので楽ですが、普段利用するテキストエディタに比べるとフォントサイズが大きいので修正してみました。