Twenty Seventeen：スマホを横向きにすると文字が大きくなるのを防ぐカスタマイズ

手で持って操作するスマートフォンやタブレットの場合、画面の向きによって表示内容やデザインを変えたりすることがあります。

画面縦向きをポートレートモード、横向きをランドスケープモードといいますが、WordPress公式テーマ、Twenty Seventeenでもこのランドスケープモードが採用されています。

Twenty Seventeenのランドスケープモードは、デバイスを横向きにするとフォントサイズが大きくなるデザインですが、英語圏の人に向けての仕様なんでしょうか？なんだか文字が大きすぎて、とっても読みにくいです。

あえてユーザビリティを下げる必要もないので、今回は、Twenty Seventeenのランドスケープモードを無効するカスタマイズを行います。

スタイルシートを上書きする

作業は簡単で、子テーマで親テーマのスタイルシートを上書きするだけです。子テーマをまだ作っていないという方は、こちらの記事を参考に、子テーマを作ってから作業にあたってください。

関連記事

WordPressの子テーマを超簡単に作る方法

Media Queries（メディアクエリ）に追記

Twenty Seventeen は、レスポンシブデザインで設計されているので、画面サイズに合わせてデザインが変更される仕組みです。

ちなみに、デザインを変更するポイントをブレイクポイントといいますが、Twenty Seventeen では、Media Queriesで次のようにブレイクポイントを設定しています。

/* 320pxより大きい画面（スマホ対応 /ポートレートモード）*/
@media screen and (min-width: 20em) {
}

/* 480pxより大きい画面（スマホ対応 /ランドスケープモード）*/
@media screen and (min-width: 30em) {
}

/* 768pxより大きい画面（タブレット対応） */
 @media screen and (min-width: 48em) {
}

/* 1072pxより大きい画面（PC対応） */
@media screen and ( min-width: 67em ) {
}

/* 1264pxより大きい画面（PC対応） */	
@media screen and ( min-width: 79em ) {
}

Media Queriesがよくわからくても大丈夫。

ランドスケープモードを無効にするには、次のコードをコピーして、子テーマのstyle.cssに放り込むだけです。

/**********************************************/
/* 480pxより大きい画面（スマホ対応 /ランドスケープモード）*/
/**********************************************/
@media screen and (min-width: 30em) {

	/* Typography */

	body,
	button,
	input,
	select,
	textarea {
		font-size: 15px;
		font-size: 0.9375rem;
	}

	h1 {
		font-size: 24px;
		font-size: 1.5rem;
	}

	h2,
	.page .panel-content .recent-posts .entry-title {
		font-size: 20px;
		font-size: 1.25rem;
	}

	h3 {
		font-size: 18px;
		font-size: 1.125rem;
	}

	h4 {
		font-size: 16px;
		font-size: 1rem;
	}

	h5 {
		font-size: 13px;
		font-size: 0.8125rem;
	}

	h6 {
		font-size: 15px;
		font-size: 0.9375rem;
	}
}

/**********************************************/
/* 768pxより大きい画面（タブレット対応） */
/**********************************************/ 
 @media screen and (min-width: 48em) {
 	/* Typography */
	
	body,
	button,
	input,
	select,
	textarea {
		font-size: 16px;
		font-size: 1rem;
		line-height: 1.5;
	}
	
	h1 {
		font-size: 30px;
		font-size: 1.875rem;
	}

	h2,
	.page .panel-content .recent-posts .entry-title {
		font-size: 26px;
		font-size: 1.625rem;
	}

	h3 {
		font-size: 22px;
		font-size: 1.375rem;
	}

	h4 {
		font-size: 18px;
		font-size: 1.125rem;
	}

	h5 {
		font-size: 13px;
		font-size: 0.8125rem;
	}

	h6 {
		font-size: 16px;
		font-size: 1rem;
	}

	.entry-content blockquote.alignleft,
	.entry-content blockquote.alignright {
		font-size: 13px;
		font-size: 0.8125rem;
	}
}

これで、ランドスケープモード（横向き）でも、ポートレートモード（縦向き）と同じフォントサイズで表示されるようになるはずです。