困った症状

WordPress などで、見出し文字が意図せず大文字で表示されてしまう事がありました。

具体的には、

WordPress って入力したのに

WORDPRESS って表示されてしまう、という感じです。

text-transform

文字が勝手に変わってしまうのは、CSS の text-transform でスタイルで指定されています。

他にも、次のような指定ができます。

none テキストを変換しない(初期値)
capitalize 単語の先頭文字を大文字にする
uppercase 全ての文字を大文字にする
lowercase 全ての文字を小文字にする
full-width 全ての文字を全角形式にする。

次サイトより引用

text-transform・・・大文字・小文字・全角文字への変換を指定する
http://www.htmq.com/css/text-transform.shtml


英語圏では「見出しは大文字からはじめる」といったことがあるため、このようなスタイルが指定できると便利というシーンがあるのですね。

対処方法

CSS の text-transform を上書きして、変換を解除しましょう。

例えば、次のような感じですね。

1h1, h2, h3, h4, h5 {
2  text-transform: none !important;
3}