WordPressで新たにサイトを立ち上げるとサイトタイトルの英語のアルファベットが全て大文字になっています。
これはCSSが「text-transform: uppercase;」に設定されているからです。
対処方法はCSSを「text-transform: none;」に書き換えれば英語などアルファベットの小文字は小文字として、大文字は大文字として、入力した通りに表示されます。
WordPressを立ち上げたばかりのアルファベットが全部大文字のサイトタイトルの画像
ページ内リンク
text-transform: uppercase;とは
text-transformはCSSで英語などの大文字や小文字や頭文字だけ大文字等の変換を指定するプロパティで、日本語に指定しても何の変化もありません。
CSSは次の4種類があります。
これがWordPressを立ち上げたときサイトタイトルなどの一部に設定されていて、入力した単語の小文字も大文字で表示します。
2.text-transform: none
入力した通りに表示します。これがtext-transform:プロパティの初期値です。これをWordPressのCSSに設定します。
3.text-transform: capitalize
英語アルファベットの頭文字を大文字で表示します。
4.text-transform: lowercase
全てを強制的に小文字で表示します。
WordPress内のCSSのtext-transform: uppercase;
WordPressのテーマ「Twenty Seventeen」にはCSSの11か所にtext-transform: uppercase;が指定されているようです。
具体的には
.site-title h5 .entry-title .entry-meta .entry-footer .tags-links .nav-subtitle .comment-metadata h2.widget-title .widget_rss .rss-date .widget_rss li cite .site-content .wp-playlist-current-item .wp-playlist-item-artist .twentyseventeen-customizer .twentyseventeen-front-page .twentyseventeen-panel .twentyseventeen-panel-title
に設定されています。
Twenty Sixteenは9か所、Twenty Fifteenは13か所に指定されているようです。
確認する方法は管理画面の「外観」→「テーマの編集」の右上の「編集するテーマを選択:」で「Twenty Seventeen」を選択すると確認できます。
CSSは膨大な量ですが、Google chromeを利用していたらブラウザ右上の縦3点の中に「検索」があるので、text-transform: uppercase;を検索してみてください。
この11か所のtext-transform: uppercase;をtext-transform: none;に変更すれば英語アルファベットは全て入力した通りに表示できます。
では次はtext-transform: none;に変更する方法です。
text-transform: none;を設定する方法
wordpressのバージョン 4.7.3には管理画面の「外観」→「カスタマイズ」の左の下の方に「追加CSS」という項目があります。
これは古いバージョンにはなかったのですが、4.7.3には設定されています。
追加CSSにtext-transform: none;を設定します。
例えばサイトタイトルの強制大文字設定を解除するには
.site-title {
text-transform: none;
}
と書き込みます。
これで英語アルファベットの大文字と小文字が入力した通りに表示されます。