WordPress

WP★タイトルを大文字から小文字に直す(Twenty Seventeen)

投稿日:

 

WordPressのテーマ『Twenty Seventeen』で、ページのタイトルが大文字に強制的に変換されてしまうのをなくす方法です。今さら…ですが、最近手直ししたので覚え書き。

 

ページタイトルの大文字変換を小文字に戻す

強制的に大文字に変換されるのは、『Twenty Seventeen』のCSSでそのように設定されているからです。コードを見てみましょう。

元のstyle.css

/*--------------------------------------------------------------
13.4 Posts
--------------------------------------------------------------*/

.page .panel-content .entry-title,
.page-title,
body.page:not(.twentyseventeen-front-page) .entry-title {
 color: #222;
 font-size: 14px;
 font-size: 0.875rem;
 font-weight: 800;
 letter-spacing: 0.14em;
 text-transform: uppercase;
}

この部分の一番下にある
「text-transform: uppercase;」でアルファベットを強制的に大文字に変換してるのです。
ですから、この設定をはずしてやると、入力したままの状態で表示されるようになります。

text-transform: none;

もとのCSSを直接編集してもいいのですが、管理画面から簡単にできるのでそちらの方がおすすめです。
[外観]>[カスタマイズ]でカスタマイザーに移動すると、左下のメニューに「追加CSS」という項目がありますので、そこをクリック。

 

独自のCSSを書き込めるようになっているので、ここに書き込んで「保存」すると設定が反映されます。

修正後のCSS

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

 

本サイトの内容に誤りや不正確な記述がある場合やサンプルに基づくいかなる結果も一切の責任を負いかねますので、あらかじめご了承ください。

-WordPress

執筆者:

関連記事

WordPress★コメント入力フォームをカスタマイズする

  WordPressのバージョンは4.7.3 コメント入力フォームをカスタマイズする方法です。変更内容は 1)コメントの入力フォームで不要な部分を非表示にする 2)入力フォームの文言を自由に変更する …

WordPress★Youtubeをレスポンシブ対応にするには?

WordPress記事にYoutube動画を埋め込む サイトに埋め込みたいYoutubeのページにアクセスします。 再生ページの動画プレイヤーの下に「共有」というリンクがあるので、これをクリックします …

WordPress★IE11でマウススクロールするとfixedで固定した背景画像がガタつくバグを修正

windows8+IE11とwindows10-IE11という閲覧条件のクライアントさまから、「マウスでスクロールすると画像がガクガクしてるよ!」との報告。急いで、原因を探ることになりました。 原因 …

WordPress★Gutenbergにカスタムブロックをつくる 1

Gutenbergになったら、「TinyMCE テンプレート」というテンプレートプラグインが使えなくなってしまいました。 あらかじめ設定したひな形を呼び出して使えるのでとても便利だったのに。。。 この …

WordPress★ホバーでポップアップを出す

画像にホバーしたときに解説のポップアップを出して欲しいとのリクエスト。 いろいろやり方を探していたら、CSSだけで実装できそうなので試してみた。 animation プロパティと @keyframes …

サイト制作・グラフィック制作をしているデザイナーです。制作で躓いたことの備忘録としてこのブログを始めました。
たくさんの検索結果から、実際に何度も何度も自分で試してみて、自分に合うなと思った方法やうまくいった方法をこのブログに書き留めています。
プログラム関係のことはもっぱらコピペ派。
自分でゴリゴリ書くことはできません。。。プログラムが分かる人がうらやましいです。
そんな私でもなんとかサイト制作ができるのはグーグル先生と貴重な情報をおしげもなく公開してくださっているたくさんの方々のおかげ。
有志のみなさまに日々感謝しつつ制作させていただいています。