【CSS】アルファベットを大文字化する設定(解除しました)

当ブログを現在のテーマにしてから、すでに1年以上が経過しているわけですが、懸案でありながら優先度が低かった見た目の調整が完了しました。
メニュー項目など、あちらこちらのアルファベット表記がすべて大文字になっていたのですが、大小混在に調整済みです。
今回もChromeの解析ツールが大活躍でした。

設定値と設定場所の備忘録です。

困っていたこと

特にPC表示時のことです。
画面上部に表示されるメニュー、サイドバー、フッター、そして各投稿のカテゴリーリンクとタグリンクが、すべて大文字になってしまいます。
メニュー内項目は、すべて小文字で表示したいものも、1文字目が大文字になってしまいます。

細かい話ですが、ちょっとした見た目の話です。
このちょっとしたことで時間を使ってしまうのです。。

導入しているテーマ(Freesia Empire)の設定であるということは分かっていました。
CSSの設定だということも分かっていました。

・・・その先に進んでいませんでした。

普通に解析して、普通にCSSを特定すればよかったのですが。。w
優先度を下げていたので、ほったらかしでした。

Freesia Empire | WordPress Theme Directory
Freesia Empire is a Responsive Multi-Purpose WordPress Theme, Designed & Developed by Theme Freesia. This theme supports...

text-transform

設定は、各要素に『text-transform』でアルファベット表示を指定しているものでした。
大文字や小文字の表示を指定できるのです。

設定できる内容は以下のとおりです。

none
記述したとおりに表示。【初期値】(例: 「WordPress」 → 「WordPress」)
capitalize
単語の先頭文字を大文字で表示。(例: 「WordPress」 → 「Wordpress」)
lowercase
全てを小文字で表示。(例: 「WordPress」 → 「wordpress」)
uppercase
全てを大文字で表示。(例: 「WordPress」 → 「WORDPRESS」)

うまくつかえば、とても役に立ちそうなオプションですが、今回は自分の入力どおりにしたかったのです!

スポンサーリンク


設定内容

書いたとおりに表示してくれる「none」を優先指定する作戦にしました。
解析ツールでは、バージョンが併記された複数のCSSファイルに設定が分散していることが確認できました。

個別に修正は考えられないので、CSSの適応順を利用させてもらいます。

text-transform: none;

上記を、対応するクラスに設定しています。
現在利用中のテーマでは、カスタマイズで設定するCSSが優先適用される仕様です。
CSS編集から、上記を記載しております。

ページのソースを見ると、<head>~</head>内に直書きで記載されています。
外部ファイルよりも優先度が高いということです。

この投稿を書いたのは・・・
Blog Admin

ガジェットが大好きで、ほぼ毎月何かしら調達しております。
無駄遣い扱いされたくないのと、何かの役に立つかと思い、記録を書くことにしたのでした。

お出かけのときには、スマホを複数台とタブレットとパソコンを持ち歩きます。
両手首にはスマートウォッチです。
こんなスタイルで生活している中での備忘録を書いています。

「Blog Admin」をフォローしてみる
ブログ関連
「Blog Admin」をフォローしてみる

ご意見やご感想などお聞かせください! コメント機能です。

タイトルとURLをコピーしました