WordPressで記事タイトルやヘッダー文字が大文字になるのを修正する方法！

WordPressを利用していて記事のタイトル表示やヘッダー文字、ウィジェットタイトルやメタタグ等で、英文字が小文字で入力したはずなのに、何故か大文字で表示されてしまうことありませんか？

例えば「abc」が「ABC」と表示されてしまう！

自分の入力は間違っていないのに何故か変わってしまう。これは使用しているテーマにもよるのですが、CSS（スタイルシート）でそのように指定されています。

ちなみに本サイトでこの記事作成時においては、WordPress標準で用意されているテーマ「Twenty Seventeen」をベースにしているのですが、固定ページの記事タイトルにおいてそのような現象が発生していることがわかりました。

本サイトも固定ページで作成しているページが少なかった為、気付かずにいたのですが、調べてみたところ固定ページのタイトル以外にも勝手に大文字にしてくれている箇所が幾つかあることが判明しました。

大文字変換をしないようにする方法

大抵の方は子テーマを利用してカスタマズしている思うのですが、まずどこで大文字変換処理をしているかを探す作業から行う必要があります。それから子テーマのCSS（スタイルシート）にカスタマイズするような手順となります。その手順について説明したいと思います。

対処手順について

修正したい箇所を見つけるには親テーマのCSS（スタイルシート）から、大文字変換している箇所を見つけ出す必要があります。

「text-transform」を検索する

親テーマの「style.css」をFtpソフトでサーバーより取得し、テキストエディタにて開き、「text-transform」という文字列で検索してみて下さい。

「text-transform」の設定状況を調べる

もし「text-transform: uppercase;」と記述されている場合、その部分が大文字にしている箇所となります。恐らく1箇所だけでなく、意外な部分でも大文字変換処理がされていることが分かると思います。ちなみにこのスタイルの設定は以下の様な設定があります。

none	何もしません。記述通りの表示となる（初期値）
capitalize	単語の先頭文字を大文字で表示
lowercase	全てを小文字で表示
uppercase	全てを大文字で表示

子テーマのスタイルシートへ新たに記述する

上記で検索し、大文字に「text-transform」の指定がされているケースで、治したい場合ですが、子テーマの「style.css」にブロック全体をコピーし、「text-transform」の設定を自分好みの設定へ変更する。

ポイントは親テーマの「style.css」を直接いじらないことがポイントです。親テーマを修正しますと、テーマのバージョンアップ時に元に戻ってしまうケースが発生するからです。

下はあくまでも一例です！親テーマの「style.css」から「text-transform」が記載されている部分をそのまま子テーマの「style.css」に貼り付けてして、8行目の「none」のように自分が変えたい指定とすれば良いのです。

.page .panel-content .entry-title,
.page-title,
body.page:not(.twentyseventeen-front-page) .entry-title {
    font-size: 30px;
    font-size: 1.875rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: none;
}

たったこれだけで変更することが出来ます。

必ず子テーマのスタイルシート「style.css」に対してカスタマイズを加えましょう！