ブロックエディターのフォントサイズのデフォルト設定を変更

  • BlockEditor

    • 前々回のBLOGでブロックエディターのカラーパレットの変更する方法を紹介しました。今回は、ブロックエディターのフォントサイズ4種類のデフォルト設定を変更する方法を紹介します。

    コード

    functions.phpに下記コードを入力します。

    /*テキストサイズ*/

add_theme_support( 'editor-font-sizes', array(
    array(
        'name' => '小',
        'shortName' => 'S',
        'size' => '0.8em',
        'slug' => 'small'
    ),
    array(
        'name' => '中',
        'shortName' => 'M',
        'size' => '1em',
        'slug' => 'regular'
    ),
    array(
        'name' => '大',
        'shortName' => 'L',
        'size' => '1.5em',
        'slug' => 'large'
    ),
	 array(
        'name' => '特大',
        'shortName' => 'XL',
        'size' => '2em',
        'slug' => 'xlarge'
    ),
) );

    editor-styles.cssに下記コードを入力します。

    /*テキストサイズ*/

.has-small-font-size {
	font-size: 0.8em;
}

.has-regular-font-size {
	font-size: 1em;
}

.has-large-font-size {
	font-size: 1.5em;
}

.has-xlarge-font-size {
	font-size: 2em;
}

    フォントサイズの単位

    今回のコードでは文字サイズの単位をemに設定しました。ptでも設定出来ます。その場合、PHPの設定のsizeを数字のみにして、シングルクォーテーションで囲みません。

    確認

    設定が反映されているか確認します。編集画面で、4つの段落ブロックを作成し、文字を入力します。ブロックエディター上のフォントサイズが変更されているか確認します。次に、プレビュー画面で、実際に同じようにサイズが変更されているか確認します。

    ブロックエディター上のフォントサイズが変更されているか確認

    プレビュー画面で、実際に同じようにサイズが変更されているか確認

    以上で今回の説明は終了です。見出し以外の文章で使用する時に役立ちます。ブロックエディターでは、細かなフォントサイズ設定を出来ますが、他ページと統一するため、登録した文字を使った方がいいでしょう。

    You may also like