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の英文が全て大文字になるのを防ぐ方法」でした。