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

英文字

スポンサーリンク

Pocket

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」に貼り付けてして、赤字部分のように自分が変えたい指定とすれば良いのです。

.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」に対してカスタマイズを加えましょう!

探すと「text-transform」指定は多数あります!

自分が変えたい部分だけで良いと思います。特に記事タイトルなんかは見た目が変わってしまうので、自分が思った様な文字体にしたいですよね。これに関しては自分の好みです。必要に応じてカスタマイズして下さい。

Pocket

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です