WordPressで英語が大文字で表示されるときは、CSSを見直してみる


TEXTTRANSFORM2

WordPress導入時に、色んなテーマを試していて気付いたのですが
英語に小文字を含めていた場合も、自動的に大文字で表示されていることがありました。

先日導入した、『Newpost Catch』でそれが現れたのですが、
何故かこのプラグインだけ英語大文字の表記になってしまいました。

なんでだろ? と思って調べてみたら、
どうやら英語大文字を指定しているのは、スタイルシート、
CSSのファイルだったみたいです。

スポンサードリンク

 

元々の状態

Newpost Catchを入れた状態では、このように
英語大文字のみの表記になっていました。
元記事のタイトルは、先頭のみ大文字で残りは小文字の、
オーソドックスな英語表記で統一していたので、
このウィジェットだけ大文字なのはなんだか違和感を感じますね。
2013-0310-200155

英語の大文字・小文字表示を指定するスタイルシート

さて、大文字・小文字を指定するには、CSS内に下記のプロパティを追加します。

text-transform: [パラメータ];

Tipstourの場合、上記の記述が、
もともとのテンプレート内ではウィジェット内のクラスにのみ、

text-transform: uppercase;

が入っていたために、一部ウィジェットでこうした表記になってしまっていたようです。
2013-0310-200113

そのため、この記述を削除するか、コメントアウトしてあげることで
本来の記述通りの表記に変更することが出来ました。
2013-0310-200217

他のサイドバーウィジェットについては、何故か大文字で表記されていなかったのですが
もしかするとウィジェット内のPHPでそのように指定していたのかもしれないです。

パラメータ

none
初期値。 記述通りの表示をする。
何も指定をしないとこの状態になるので、正直なところ
このスタイルシートのプロパティはあまり使わないほうが良いような気が…

capitalize
先頭の一文字を大文字で表示。
この指定でもいいような気がしますが、よく考えたら『iPhone』も
頭が大文字に変換されそうなのでこちらも避けて置いたほうがいいかもですね。

lowercase
全てを小文字で表示。

uppercase
全てを大文字で表示。

総括

外国のサイトでは、ときどきこうした英語大文字のみの表記としているところを
よく見受けられたのですが、なるほどこういう記述をしていたのですねぇ…

何か特別な理由がなければ、正直いってあまり使わないプロパティのような気がします、
もともと導入したWordpressテーマ『Great』のCSSファイルを
色々カスタマイズしながら使っていたので、この記述がデフォルトで
含まれてしまっていただけなようです。

まあ何はともあれ、一件落着。
Wordpressでカスタマイズしていると、一緒にCSSも勉強出来て一石二鳥でございますね。

スポンサードリンク

 

この記事が参考になったら、TipstourのFacebookページに『いいね!』をお願いします!

 

よろしければFeedlyもご登録ください!
follow us in feedly