ブロックエディターのフォントサイズのデフォルト設定を変更
前々回の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つの段落ブロックを作成し、文字を入力します。ブロックエディター上のフォントサイズが変更されているか確認します。次に、プレビュー画面で、実際に同じようにサイズが変更されているか確認します。
ブロックエディター上のフォントサイズが変更されているか確認
プレビュー画面で、実際に同じようにサイズが変更されているか確認
以上で今回の説明は終了です。見出し以外の文章で使用する時に役立ちます。ブロックエディターでは、細かなフォントサイズ設定を出来ますが、他ページと統一するため、登録した文字を使った方がいいでしょう。
