Twenty Seventeenのフォントサイズを変更してみた

説明

先日投稿した「続テーマを変更せずにWebフォントを使ってみた」では、テーマ「Twenty Seventeen」でもWebフォントを使えるようにした。その際、「Twenty Seventeen」のフォントサイズが少し小さく感じたので、今回はフォントサイズを調整してみた。

editor-font-sizesの省略

あらためて「Twenty Seventeen」のfunctions.phpを見てみると、ブロックエディターのフォントサイズピッカー向けにフォントサイズを指定する add_theme_support( 'editor-font-sizes', ... )が記述されていない。となると、フォントサイズピッカーに表示されているフォントサイズがどこで指定いるのか気になってくる。

フォントサイズピッカーのプルダウンメニューには「デフォルト」「小」「標準」「中」「大」「特大」「カスタム」が

ブロックエディターのソースコード(/wp-includes/js/dist/block-editor.js)を追っていくと、次の箇所が見つかった。

  fontSizes: [{
    name: Object(external_wp_i18n_["_x"])('Small', 'font size name'),
    size: 13,
    slug: 'small'
  }, {
    name: Object(external_wp_i18n_["_x"])('Normal', 'font size name'),
    size: 16,
    slug: 'normal'
  }, {
    name: Object(external_wp_i18n_["_x"])('Medium', 'font size name'),
    size: 20,
    slug: 'medium'
  }, {
    name: Object(external_wp_i18n_["_x"])('Large', 'font size name'),
    size: 36,
    slug: 'large'
  }, {
    name: Object(external_wp_i18n_["_x"])('Huge', 'font size name'),
    size: 42,
    slug: 'huge'
  }],

PHP側から受け取ったパラメータに該当するデータがない場合、このデータがメニューとして表示される仕組みになっている。

また該当するブロックのフォントサイズのスタイルは/wp-includes/css/dist/block-library/editor.cssに次のように記述されている。

.editor-styles-wrapper .has-small-font-size {
  font-size: 13px;
}

.editor-styles-wrapper .has-regular-font-size,
.editor-styles-wrapper .has-normal-font-size {
  font-size: 16px;
}

.editor-styles-wrapper .has-medium-font-size {
  font-size: 20px;
}

.editor-styles-wrapper .has-large-font-size {
  font-size: 36px;
}

.editor-styles-wrapper .has-larger-font-size,
.editor-styles-wrapper .has-huge-font-size {
  font-size: 42px;
}

block-editor.jsの配列で示したスラッグ(赤字)がeditor.cssのクラス名の一部(青字)となる。テーマで独自のフォントサイズを使用する場合は、このルールでスタイルを用意しなければならないことを再確認できた。

さて個人的に疑問だったのが、フォントサイズピッカーの「デフォルト」の指定方法である。それらしい関数や定数はなく、どうやって指定するのかサッパリわからなかった。

段落ブロックに対してフォントサイズピッカーの「小」を選択すると対応するp要素のクラスにはhas-small-font-sizeが追加され、「標準」を選択した場合はhas-small-font-sizeがhas-normal-font-sizeに置き換わる。「デフォルト」を選択した場合はhas-〇〇-font-sizeがなくなる。p要素のクラス属性にはほかにもいくつか指定されているが、それらにフォントサイズを指定しているものはなく、「デフォルト」を選択した場合は親要素(ブロックエディターではクラス属性にeditor-styles-wrapperが指定されている要素)のフォントサイズが適用されることがわかった。

フォントサイズピッカーの調整

実際にフォントサイズピッカーに独自のサイズを指定する。先のプラグインに追加したコードは次の通りで、テーマと同様にafter_setup_themeアクションでeditor-font-sizesにフォントサイズ情報を指定する。

function my_setup_theme() {
	if ( is_child_theme() ) {
		$stylesheet = get_template();
	} else {
		$stylesheet = get_stylesheet();
	}
	if ( in_array( $stylesheet, ['twentyseventeen'] ) ) {
		add_theme_support(
			'editor-font-sizes',
			[
				[
					'name'      => esc_html( '小' ),
					'shortName' => esc_html( 'S' ),
					'size'      => 16,
					'slug'      => 'small',
				],
				[
					'name'      => esc_html( '標準' ),
					'shortName' => esc_html( 'N' ),
					'size'      => 20,
					'slug'      => 'normal',
				],
				[
					'name'      => esc_html( '中' ),
					'shortName' => esc_html( 'M' ),
					'size'      => 24,
					'slug'      => 'medium',
				],
				[
					'name'      => esc_html( '大' ),
					'shortName' => esc_html( 'L' ),
					'size'      => 32,
					'slug'      => 'large',
				],
				[
					'name'      => esc_html( '特大' ),
					'shortName' => esc_html( 'XL' ),
					'size'      => 40,
					'slug'      => 'larger',
				],
			]
		);
	}
}
add_action( 'after_setup_theme', 'my_setup_theme', 12 );

同時にadmin_footerアクションで出力する内容に赤字と青字の部分を追加する。

'twentyseventeen' =>
".editor-post-title__block .editor-post-title__input, .editor-styles-wrapper, .editor-styles-wrapper button, .editor-styles-wrapper input, .editor-styles-wrapper select, .editor-styles-wrapper textarea {
	font-family: \"Kiwi Maru\", \"Hiragino Kaku Gothic Pro\", Meiryo, sans-serif;
	font-size: 20px;
	font-size: 1.25rem;
}
.editor-post-title__block .editor-post-title__input {
	font-size: 40px;
	font-size: 2.5rem;
	font-weight: 700;
}

赤字の部分が「デフォルト」のフォントサイズとなり、青字の部分が投稿タイトルのスタイルとなる。なおfont-weightの指定は、日本語環境の投稿ページのスタイルに合わせたものだ。

フロントエンド側の調整

フロントエンド側はwp_get_custom_cssフィルターで追加するスタイルの変更となる。

'twentyseventeen' =>
"html[lang=\"ja\"] body, html[lang=\"ja\"] button, html[lang=\"ja\"] input, html[lang=\"ja\"] select, html[lang=\"ja\"] textarea {
	font-family: \"Kiwi Maru\", \"Hiragino Kaku Gothic Pro\", Meiryo, sans-serif;
	font-size: 20px;
	font-size: 1.25rem;
}
.single-post .entry-title, .page .entry-title {
	font-size: 40px;
	font-size: 2.5rem;
}
.has-small-font-size {
	font-size: 16px;
	font-size: 1rem;
}
.has-regular-font-size,
.has-normal-font-size {
	font-size: 20px;
	font-size: 1.25rem;
}
.has-medium-font-size {
	font-size: 24px;
	font-size: 1.5rem;
}
.has-large-font-size {
	font-size: 32px;
	font-size: 2rem;
}
.has-larger-font-size,
.has-huge-font-size {
	font-size: 40px;
	font-size: 2.5rem;
}"

赤字の部分が「デフォルト」のフォントサイズとなり、青字の部分が投稿タイトルのスタイル、緑字の部分が各フォントサイズ向けのスタイルとなる。

これらを適用したブロックエディター側(左)とフロントエンド側の投稿ページ(右)は次の通り。

変更後のブロックエディター側(左) 変更後のフロントエンド側の投稿ページ(右)


Twenty Seventeenのフォントサイズ変更は、フロントエンド側についてはサイドバーなどのスタイルを調整する必要があるが、大まかなところは上記によって対応できた。何はともあれ、もっとブロックエディターに慣れていかないとね。。。


最終更新 : 2021年10月07日 16:33


お勧め

get_the_password_form(2021年7月22日 更新)

string get_the_password_form( [ int | WP_Post $post = 0 ] )
パスワード保護されている投稿のパスワード入力フォームを取得する。

wp_is_https_supported(2021年3月17日 更新)

bool wp_is_https_supported()
サイトがhttpsに対応しているか調べる。

path_join(2014年7月9日 更新)

string path_join( string $base, string $path )
パス名を連結する。

wp_restore_post_revision(2018年8月29日 更新)

mixed wp_restore_post_revision( int|WP_Post $revision_id [ , array $fields = null ] )
リビジョンの内容を投稿へ戻す。

get_next_comments_link(2018年5月27日 更新)

string get_next_comments_link( [ string $label = '' [ , int $max_page = 0 ] ] )
次のコメントリンクを取得する。