WordPress サイトのタイトルが大文字になる？

WordPress でアフィリエイトを始めて早1か月。日々精進しております。

今日は、サイトタイトルを何度設定しても全部大文字になってしまうのを解決したお話を書きます。

Twenty Seventeen よ、何をやってくれてるんだ？

このサイトのタイトルは、「Cool Japan」なんです。まぁ、タイトルと中身の関連性が薄いと言った批判は甘んじて受けますが、その話は置いておいて。

WordPress 4.9.5 のデフォルトのテーマ、Twenty Seventeen を使っているのですが、「Cool Japan」で設定したはずのサイトタイトルが何故か「COOL JAPAN」になってしまうんです。設定ミスかと思い確認してもちゃんと「Cool Japan」で設定しています。

スタイルシートで何かやらかしてるなと思い調べました。そうしたところ、こんな記述がありました。調べたファイルは、

ドキュメントルート/wp-content/themes/twentyseventeen/style.css

です。

.site-title {
        clear: none;
        font-size: 24px;
        font-size: 1.5rem;
        font-weight: 800;
        line-height: 1.25;
        letter-spacing: 0.08em;
        margin: 0;
        padding: 0;
        text-transform: uppercase;
}

この中の 10行目(実際のファイルの中では 1589行目)に “text-transform: uppercase;” と書かれています。なんとなく、読んでわかりますよね。文字はすべて大文字にすると書かれています。

それでは、ここを修正しましょう。

ちょっと待った！

Twenty Seventeen の設定ファイルを直接修正するのは、お勧めではありません。理由は、ここ ↓↓↓ に書いてあります。

WordPress の子テーマを作成

ここを読んでいただき、子テーマをまずは作成してください。その子テーマに対して修正する方法のさわりについても「WordPress の子テーマを作成」で紹介しています。

スタイルシートでオーバーライド

それでは、子テーマのスタイルシートにその設定を書きましょう。必要な部分のみ書けばいいのですから、上の11行の中の10行目だけ書けばいいのです。と言いたいところですが、1行目と11行目も必要です。”text-transform: xxxx” だけだったら、何のテキストに対する設定かが分からないからです。”サイトタイトルの” と言うのが抜けてしまいます。

/* サイトタイトルがすべて大文字になってしまうのを防止   */
.site-title {
        text-transform: none;
}

書き足したのは、この4行です。1行目は備忘録のコメントです。3行目で “text-transform: none;” としています。”text-transform: ” には、次の設定が可能です。

No.	設定値	意味
1	none	そのまま表示します
2	capitalize	単語の先頭の文字のみ大文字で表示します
3	uppercase	すべて大文字で表示します
4	lowercase	すべて小文字で表示します
5	full-width	すべての文字を全角で表示します