WordPressが英語を強制的に大文字で表示する設定を解除する方法

WordPressのテーマ『Twenty Seventeen』で、ページのタイトルや記事タイトルの英語表記文字が強制的に大文字に変換されてしまう事に　前々から違和感を持っていました。

英語表記タイトルを記述した通り表示させる方法

アルファベットを　書いた通りに（大文字は大文字で　小文字は小文字で）表示させる方法です。

普通は、styls.css（スタイルシート）を　直接修正して行いますが、styls.css（スタイルシート）を　直接修正することなく行う事ができます。

CSSクラス名の確認方法

まずは、スタイルシート（CSS）をカスタマイズする前に　スタイルシートのどのクラスに書かれているCSSコードを　修正すれば良いのかを確認しておく必要があります。

ブラウザを立ち上げて修正するサイトを表示します。

そのサイトの修正したいタイトルをマウスでドラッグします。

ドラッグしてハイライトになっているタイトルの上にマウスを重ねて右クリックをします。

その中の一番下の「検証（Ｉ）」をクリックします。

 

 

下記の図の「２」の上の「３」に注目します。「class=”site-title”」と書かれているのでタイトルのCSSは、「site-title」というクラスに書かれている事がわかります。

 

 

そこで上記の図の「５」の囲みの中の下の「６」に注目します。「text-transform:uppercase;」となっていますので　ここの「uppercase」の箇所を「none」に書き換えます。

 

 

すると左に表示されているタイトルの英語の大文字表示が、大文字と子文字で表示されます。

これで　どこを書きかえれば修正できるかがわかりました。

ここでは、CSSの書き換えを保存する事はできませんのでこれから紹介する方法で修正します。

 

外観・カスタマイズより

WordPressの管理画面のサイドバーより

［外観］－［カスタマイズ］から簡単に修正できます。

 

[追加CSS]をクリックします。

説明文を下へスクロースします。

下記の（１）に　下記のCSSコードを枠内に記述するだけです。

.site-title {
    text-transform: none;
}

また記事タイトルの英語表記が、強制的に大文字に変換されるのを解除する方法は、上記のCSSコードの「.site-title {」を「.entry-title { 」にするだけで解除されます。

.entry-title {
    text-transform: none;
}

この２つのCSSコードを追加しておけばサイトタイトルと記事タイトルでの英語での強制大文字変換が解除されます。

記述すると大文字だったサイトタイトルが、上記の画像の（２）の様に大文字と小文字に変換されました。

サイトタイトルが、変換された事を確認したら（３）「公開」をクリックして完了です。

 

※（３）「公開」をクリックした時にCSSコードにコメントが書いてあるとエラーになります。（コメントとは、CSSコードについての説明文です）

また「設定」の[表示設定]で検索エンジンでの表示にチェックが、入っているとエラーになりますのでチェックをはずしましょう。

styls.css（スタイルシート）から修正する方法

 

（Twenty Seventeen）のCSSコードのデフォルトでは、「text-transform: uppercase;」となっていますので「uppercase;」の箇所を「none;」に変更します。

デフォルト

text-transform: uppercase;

修正

text-transform: none;

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

 

「Twenty Fourteen」の記事タイトルの英語が、強制的に大文字に変換されます。これをスタイルシートから修正します。

下記は、「Twenty Fourteen」のスタイルシートの修正です。
「Twenty Seventeen」のスタイルシートも同じ方法で修正できます。

[外観]ー[テーマの編集]より

スタイルシートを下へスクロールして

「　entry-title {　」の中の「text-transform: uppercase;」を探します。

「text-transform: uppercase;」の「uppercase」を（１）「none」に書き換え（２）「ファイルの更新」をクリックして完了です。

これで「Twenty Seventeen」の記事タイトルの英語が、強制的大文字に変換される設定が解除されます。

変更の確認をする時は、通常使っていないブラウザで確認する方が良いです。

いつも使っているブラウザだとキャッシュが、残っていて修正変更しても直ぐには、変わらない場合があります。

※但しスタイルシートを直接修正するとテーマの更新をした場合上書きされて修正箇所が修正前に戻ってしまいます。

まとめ

styls.css（スタイルシート）を 修正する方法は、二通りあります。
一つは、［外観］－［カスタマイズ］ー[追加CSS]より修正する方法。

もう一つは、［外観］－［テーマの編集］ー[styls.css（スタイルシート）]より修正する方法。

[追加CSS]より修正する時は、CSSコードにコメントが書いてあるとエラーになりますのでコメントは、書かない事。

また表示設定で検索エンジンでの表示にチェックが、入っているとエラーになりますのでチェックをはずしておきましょう。