この記事は最後に更新してから1年以上経過しています。

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年12月15日 15:16

お勧め

add_shortcode（2018年5月27日更新）

void add_shortcode( string $tag, mixed $func )

ショートコード（独自タグ）を追加する。ショートコードは、投稿記事内でテキスト内容がない[tag]や、テキストを内包する[tag]テキスト[/tag]の書式で使用できる独自タグのこと。標準の状態では、 the_content関数によって表示する直前のフィルター処理内でパラメータ$funcで指定した関数・メソッドが実行される。

get_user_setting（2022年1月31日更新）

mixed get_user_setting( string $name [ , string $default = false ] )

ユーザーインターフェイス設定を取得する。

have_posts（2018年5月27日更新）

bool have_posts( )

次の投稿データが存在するかを調べる。

in_category（2018年5月27日更新）

bool in_category( mixed $category [ , mixed $post = null ] )

投稿情報が指定したカテゴリーに属しているか調べる。

add_feed（2024年6月24日更新）

string add_feed( string $feedname, callable $callback )

フィードを追加する。

説明

editor-font-sizesの省略

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

フロントエンド側の調整

関連

お勧め