Twenty Seventeenのタイトルが全部大文字になってしまうのを防ぐカスタマイズ

2017年のWordPress公式テーマ、Twenty Seventeenはとってもシンプルで素晴らしいテーマですが、やはり自分好みにするにはカスタマイズする必要があります。

今回は、サイトタイトルの英文スペルが、全部大文字になってしまうのを防ぐカスタマイズ方法を解説します。

style.cssの1567行目がポイント

早速、結論です。

style.cssの「1567行目」に.site-titleがあるのを確認してください。

.site-title {
	clear: none;
	font-size: 24px;
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: 0.08em;
	margin: 0;
	padding: 0;
	text-transform: uppercase;
}

最後の行に書かれている、text-transformプロパティをコメントアウトすれば、はじめに記述した通りのスペルで表示されます。

.site-title {
	clear: none;
	font-size: 24px;
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: 0.08em;
	margin: 0;
	padding: 0;
	/*text-transform: uppercase;*/
}

あるいは、text-transform の「uppercase」を「none」に書き換えてもOKです。

.site-title {
	clear: none;
	font-size: 24px;
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: 0.08em;
	margin: 0;
	padding: 0;
	text-transform: none;
}

知識が深まるように、text-transformプロパティについての解説を加えておきます。

text-transformプロパティとは

text-transformとは、英文スペルの大文字・小文字を指定するプロパティです。 頭文字だけ大文字にするのも可能なので、お好みで使い分けるのがいいでしょう。

以上、『WordPress公式テーマ「Twenty Seventeen」のタイトルが大文字になってしまうのを防ぐカスタマイズ』でした。