カテゴリー
Twenty Twenty

Twenty Twenty 7、文字サイズの調整

【2020年3月更新】Twenty Twentyの文字サイズが大きすぎると感じたところを小さくしました。

【2020年3月更新】

Twenty Twentyの文字サイズが大きすぎると感じたところを小さくしました。

使用したコード↓

@media ( min-width: 1220px ) {
	h1,
	.heading-size-1 {
		font-size: 5rem;
	}
	.singular .intro-text {
    font-size: 2.5rem;
    letter-spacing: -0.03125em;
    line-height: 1.375;
	}
	.comment-reply-title {
    font-size: 4rem;
    line-height: 1.2;
    margin-bottom: 6rem;
	}
}
@media ( min-width: 700px ) {
	h1,
	.heading-size-1 {
		font-size: 5rem;
	}

	h2,
	.heading-size-2 {
		font-size: 4rem;
	}

	h3,
	.heading-size-3 {
		font-size: 3rem;
	}

	h4,
	.heading-size-4 {
		font-size: 2.5rem;
	}

	h5,
	.heading-size-5 {
		font-size: 2.2rem;
	}

	h6,
	.heading-size-6 {
		font-size: 1.8rem;
	}
	
	h2.entry-title {
		font-size: 4rem;
	}
}

コピペする場所↓

外観 → カスタマイズ → 追加CSS

ワードプレス、追加CSS、場所

左側の文字が反転していないところが今回使用したコードです。

追記

全体的にもう5%弱小さくしました。

html {
	font-size: 60%;
}

上のコードの60%の部分を小さくすれば、要素間のバランスを保ったままいくらでも小さくなりますが、「全体」を調整しますから、スマホなどの文字が小さすぎて見えないなどの状況が発生します。

このためスクリーンサイズごとに調整するのが望ましいです。

文字サイズはまだ変更するかもしれないので、取り敢えず貼っただけです。このコードで今ご覧のサイトの文字サイズになります。

極端に小さくすると齟齬がでるので、少しだけ変えています。

最後までお読みいただきましてありがとうございました。

作成者: のろのろ

ゲーマーで、トレッキーに片足突っこんでいる、SF好きの、雑記ブロガーです。

「Twenty Twenty 7、文字サイズの調整」への1件の返信

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です