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

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

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

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

スポンサードリンク

元々の状態

Newpost Catchを入れた状態では、このように英語大文字のみの表記になっていました。

元記事のタイトルは、先頭のみ大文字で残りは小文字の、オーソドックスな英語表記で統一していたので、このウィジェットだけ大文字なのはなんだか違和感を感じますね。

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

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

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

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

text-transform: uppercase;

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

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

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

パラメータ

none
初期値。　記述通りの表示をする。

capitalize
先頭の一文字を大文字で表示。

lowercase
全てを小文字で表示。

uppercase
全てを大文字で表示。

スポンサードリンク

まとめ

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

何か特別な理由がなければ、正直いってあまり使わないプロパティのような気がします。

もともと導入したWordpressテーマ『Great』のCSSファイルを々カスタマイズしながら使っていたので、この記述がデフォルトで含まれてしまっていただけなようですね。

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