たった1行で解決!WordPressの英文スペルが全て大文字になるのを防ぐ方法


WordPressのテーマには、素晴らしいものがたくさんあります。しかし、サイトタイトルが英語表記だった場合に、英文の文字が全て大文字になってしまうテーマが時々ありますよね。公式テーマなんかは、ほとんどそうではないしょうか。

これをたった1行で解消する方法があります。

スタイルシートに1行追記

スタイルシート(style.css)に次の1行を追記するだけです。

* {text-transform: none;}

いちおう内容を解説しておきますね。

「 * 」は、アスタリスクというセレクタです。この記号を使うと、全てのセレクタに記述したスタイルが適用されます。

text-transformは、文字の大文字・小文字を設定するプロパティですが、このプロパティで設定できるのは、次の値となります。

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

実は、WordPressのテーマで、スペルが大文字になってしまうのは、このプロパティが { text-transform: uppercase; } となっているのが原因なんです。

uppercaseは、全ての文字を大文字にする値ですが、このように設定しているのは、欧米の文化の中に、タイトルなんかの目立たせたい文字を、全て大文字表記する慣習があるからなんですね。

つまり、勝手に大文字に変換されたくなかったら、この値をnoneにしてあげればいいのです。

しかし、見直すべきプロパティが、text-transformだというのはわかりましたが、いちいちセレクタを探すのは手間がかかりますよね。テーマが異なれば、クラス名も違うでしょうし…。

そこで、冒頭で解説した通り、全てのセレクタに同じスタイルが適用できる「 * (アスタリスク)」を使ってみたところ、一発解決できました。

この方法なら、どんなテーマにも対応できると思います。

以上、「たった1行で解決!WordPressの英文が全て大文字になるのを防ぐ方法」でした。

コメントを残す

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