当ブログを現在のテーマにしてから、すでに1年以上が経過しているわけですが、懸案でありながら優先度が低かった見た目の調整が完了しました。
メニュー項目など、あちらこちらのアルファベット表記がすべて大文字になっていたのですが、大小混在に調整済みです。
今回もChromeの解析ツールが大活躍でした。
設定値と設定場所の備忘録です。
困っていたこと
特にPC表示時のことです。
画面上部に表示されるメニュー、サイドバー、フッター、そして各投稿のカテゴリーリンクとタグリンクが、すべて大文字になってしまいます。
メニュー内項目は、すべて小文字で表示したいものも、1文字目が大文字になってしまいます。
細かい話ですが、ちょっとした見た目の話です。
このちょっとしたことで時間を使ってしまうのです。。
導入しているテーマ(Freesia Empire)の設定であるということは分かっていました。
CSSの設定だということも分かっていました。
・・・その先に進んでいませんでした。
普通に解析して、普通にCSSを特定すればよかったのですが。。w
優先度を下げていたので、ほったらかしでした。
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>内に直書きで記載されています。
外部ファイルよりも優先度が高いということです。
ご意見やご感想などお聞かせください! コメント機能です。