TechNote

とあるエンジニアのただのメモ

WordPressテーマ「TwentySeventeen」のサイトタイトルが大文字にならないようにする方法

「TwentySeventeen」のサイトタイトルが勝手に大文字になってしまう問題

「TwentySeventeen」サイトタイトルで英字スペルを使用している場合、全て自動で大文字に変換されてしまいます。 本サイトでいうと、サイトタイトルは「remember the milk」としているなずなのに、画面で確認すると下図のように表示されてしまいました。 自分の意図していない内容が表示されてしますと残念な気分になりますね。

「TwentySeventeen」のサイトタイトルを大文字にしない方法

ではどうやってサイトタイトルが自動で大文字になってしまわないようにするか。

style.cssを編集します。 style.cssはいわずもがな、WordPressの管理画面から簡単に修正することができます。

まずはsite-titleクラスを探しましょう。その中のtransformプロパティを「uppercase」から「none」に変更します。

.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:  none;
}

または、下記のようにコメントアウトしてしまうだけでもOK。

.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;*/
}

動作確認

サイト確認をすると…ちゃんと小文字のまま表示されていますね。

WordPressレッスンブック HTML5&CSS準拠

WordPressレッスンブック HTML5&CSS準拠

はじめてのブログをワードプレスで作るための本

はじめてのブログをワードプレスで作るための本

エンジニアのためのWordPress開発入門 (Engineer's Library)

エンジニアのためのWordPress開発入門 (Engineer's Library)