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


こんな人にオススメ!


  • WordPress公式テーマ、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とは、英文スペルの大文字・小文字を指定するプロパティです。 頭文字だけ大文字にするのも可能なので、お好みで使い分けるのがいいでしょう。

noneはじめに記述した通りに表示。デフォルト値。
capitalize頭文字だけ【大文字】、その他は【小文字】。
lowercase全てのスペルを【小文字】表示。
uppercase全てのスペルを【大文字】表示。

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

コメントを残す

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