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

      2016/03/21

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

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

 

Sponsored Links

 

【参考サイト】

スタイルシート[CSS]/テキスト・フォント/大文字と小文字を変換する - TAG index Webサイト

  

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

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

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

Img twentyfourteen title disp none 3

Img twentyfourteen title disp none 1

僕はあまり全て大文字というのは好まないので、この部分は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!】

 

変更後のサイト表示

Img twentyfourteen title disp none 4

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

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

 

Sponsored Links

 - TwentyFourteen
 -