【ColorMag】メニューやタイトルの英語が勝手に大文字になる原因と解決策
2016/04/26
WordPressテーマ【ColorMag】だけに限らないこの現象ですが、英語を小文字で入力したにも関わらず、サイト上では勝手に大文字で表示される原因と解決策を解説します。
▼ColorMagの場合、大変重要であるメニューバーがデフォルトの設定では英語が勝手に大文字で表示されてしまいます。特に「iPhone」が「IPHONE」になるのはかなりダサい。
改善方法はとても簡単なのですぐにやってしまいましょう。
CSSで変更する
▼「外観」⇒「カスタマイズ」でカスタマイズ画面を開き、「Design Options」を選択します。
▼「Custom CSS」を選択します。
▼CSS入力画面で以下のコードを入力します。
.main-navigation a{
text-transform: none;
}
▼メニューバーの英語が小文字で表示されるようになりました！
英語が勝手に大文字になる原因
▼「外観」⇒「テーマの編集」で親テーマのスタイルシートを開きます。「Command（⌘）＋F（Macの場合）」で「text-transform」の文字列を探すと、「text-transform: uppercase;」というのがあるんですが、これが原因です。
「text-transform: uppercase;」の「uppercase」の部分を「none」に修正、つまり「text-transform: none;」にすると英語が小文字でも表示されるはずなんですが、なぜか今回出来なかったのでcssで新たに変更する手段を取りました。
強制的に英語を大文字にする「uppercase」の使い方の意図が個人的には全くわからないです。