小文字で入力したタグやタイトルが大文字になる謎

さて、SyntaxHighlighter Evolvedも導入したことですし、ようやくCSSでのカスタマイズに触れることができます。

まず、「小文字で入力したタイトルやタグ、作者が勝手に大文字にされちゃってる問題!」です。

icons-css

タイトル・作者(analytics root-013)
title

タグ(google)
tag

「どうせwordpressの仕様とか、PHPのせいなんでしょ?」

そんなふうに考えていた時期が僕にもありました・・・

しかし、実はテーマの中のstyle.cssで決められていたんですね。
テーマをカスタマイズすることの方が多いので最初は気がつきませんでした。

ちょっと、タイトル部分を
右クリック>要素を検証
から、Developer Tool で確認してみましょう。
FireFoxならFireBug、IEなら開発者ツール(F12)で確認できます。

僕はクローム派です。google chrome 万歳。
シークレットウィンドウも何気に便利!

tool

すると、.entry-titleのCSSが表示されます。

tool2

犯人は貴方です。text-transformさん。
(ここのサイトはHTMLの勉強を始めたときに大変お世話になりました。とてもいいサイトです。HTMLもCSSも実例つきで解説されています。)

さて、ChromeのDeveloper ToolでCSSの数値やプロパティをクリックすると、直接入力して変更できるわけですが、

tool4

今回は追加でいきます。
一番したのプロパティの右端をクリックすると、
新規プロパティを追加することができます。
しかもコード入力支援付きです。

tool3

ついでにline-heightもちょっと広くしたかったので

text-transform: none;
line-height: 1.5;

を追加しました。

で、.entry-title { }をぐぐーっとドラッグしてください。そしてCtrl+C コピー!

tool5

あとは、子テーマなり拡張CSSなりに、Ctrl+V ペースト!!

tool6

そして余分なプロパティを削除します。

tool7

クラス指定を手打ちで間違えることもないし、僕は大概この方法でカスタマイズ作業してますね。
慣れすぎちゃってDreamWeaverが使いにくくなっちゃったくらいです。
(コード支援の感覚がびみょーに違う)

タグも、作成者も、同じ方法でいけるかと思います。
以上!

「小文字で入力したタイトルやタグ、作者が勝手に大文字にされちゃってる問題!」でした!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です