【Twenty Fourteen】エントリー題名やメニュー部分がアルファベット大文字しか表示されない部分を修正⇒style.css 変更メモ

僕にとって全て大文字になってしまうとバランスが悪くなってしまうので、大文字小文字と入力した通りに表示させるように修正しました。

WordPressデフォルトテーマ TwentyFourteenについて僕が行った修正箇所。

デフォルトの状態では、アルファベットが全て大文字で表示されていまう

下記はサンプル記事で、アルファベットが全て大文字で表示されていますが、元々大文字小文字で作成されたサンプル記事です。

style.cssで全て大文字表記にするように指定されているため、小文字のアルファベットを入力しても大文字表記になってしまいます。

僕はあまり全て大文字というのは好まないので、この部分はstyle.cssを修正しました。

このブログはApple関連の記事が多いので、「iPhone」が「IPHONE」になったり、「iPad」が「IPAD」になると違うデバイスに見えてしまい、見栄えが悪くなってしまいます(^_^;)

これを変更するには、「text-transform: 」の部分を変更します。

TwentyFourteenのstyle.css 内には26個ありますが、ほとんど下記の表記になっています。

text-transform: uppercase; ⇒全て大文字表示

このプロパティが「uppercase」の場合、アルファベットは全て大文字で表示されます。

この部分を「none」に変更すると、入力通りに表示してくれます。

text-transform: none; ⇒入力通りに表示

プログラムの一部を載せます。

/* style.cssのButtons部分 */

button,
.button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	background-color: #24890d;
	border: 0;
	border-radius: 2px;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	padding: 10px 30px 11px;
	text-transform: uppercase; /*ここをnone; に変更します。*/
	vertical-align: bottom;
}

style.css にはこのプロパティが26箇所あり、ほとんどが大文字表示の指定となっています。

なので、一括変換してしまえば完了です。

ちなみにこのプロパティには他にも指定することができます。

text-transform

（例）hello world! と入力した場合。

none ⇒ 入力通りに表示【hello world!】
capitalize ⇒ 単語の先頭文字に変換【Hello World!】
uppercase ⇒ 全ての文字を大文字に変換【HELLO WORLD!】
lowercase ⇒ 全ての文字を小文字に変換【hello world!】

変更後のサイト表示

これで入力通りに表示がされるようになりました。

やはりこちらの方がしっくりきます。