komameさん おひさしぶりです
Twenty Twelveのスタイルルールが、.entry-header .entry-titleになっているので、同じ詳細度にすればいいと思います
/*
Theme Name: Child Twelve
Version: 0.1
Template:twentytwelve
*/
@import url(../twentytwelve/style.css);
.entry-header .entry-title{
line-height:1.8;
}
nobitaさま、ありがとうございます。
フォーラムを見ると、nobitaさまの書き込みをたくさん見かけたので、きっとnobitaさまに教えていただけると思っていました。
いや～、いろいろ昔話を書きたいところですが、公共の場なのでこの辺でやめておきます。
教えていただいた事は、今から試そうと思っているのですが、試すのに時間がかかりそうなので先に質問させてください。
なぜ時間がかかるかと言うと、今の私のCSSは、そのほかの修正も含めて「!important;」だらけで、さらに構造まで書き換えて、強引に表示させている状態だからです。
これを元の状態に戻して、教えていただいたことを試すのに時間がかかりそうです。
さて、質問とはなぜ、「.entry-header .entry-title」ってわかったのでしょうか？
何か探すコツでもあるのでしょうか？
nobitaさまは、テンプレート作成のベテランだから、これとこれってすぐにわかるかもしれませんが、ｃｓｓですら久しぶりの私にとって、今回の回答は、「そら～、あんたは天才だからすぐにわかるかもしれないけれどー、私ら庶民にとっては、魔法だよ」って感じです。
ちなみに今回タイトルのところは、クロームを右クリックして、「要素を検証」で調べたら「.entry-title」の文字を見つけたので、たぶんこれかな～と思って直観を信じて試している状態です。
実は、「<p>タグ」も、親要素の継承の呪縛から抜け出せません。
これは、たぶんcssの最初の方で定義させていると思うので、「タグ,タグ,タグ,タグ{}」状態で定義されていると思うのですが、これも同じようにオーバーライドするのでしょうか？
楽に要素を見つけるコツがあればお願いします。
twentytwelveは、今までのテンプレートにくらべてCSSが少ないようですが、慣れない私にとって、六法全書を積み上げられて、「そこから必要な所を探して治してね♪ルンルン」って言われているようなものです。
どうぞ、回答のほどをよろしくお願いします。
教えていただいた事を試したら、うまくいきました。
ありがとうございます。
あらためて自分のCSSをみると、「!important;」ばかりです。
自分で定義したクラスも、親要素のマージンの継承の呪縛などから抜け出せずに苦労しています。
親要素オーバーライドする時や、クラスを定義する時などのコツなどがあればお願いします。
なんだか、wordpressというより、css講座みたいになってきましたが、よろしくお願いします。
さて、質問とはなぜ、「.entry-header .entry-title」ってわかったのでしょうか？
何か探すコツでもあるのでしょうか？
…
ちなみに今回タイトルのところは、クロームを右クリックして、「要素を検証」で調べたら「.entry-title」の文字を見つけたので、たぶんこれかな～と思って直観を信じて試している状態です。
大当たりです。
楽に要素を見つけるコツがあればお願いします。
右側に、その部分に適用されているスタイルの一覧があるので、チェックを入れたりはずしたりします。
その部分にスタイルを追記する事も出来るので試してください。
スタイルを追加して、うまく表示されたら、スタイルシートにコピペします。
最初から、スタイルシートを書くなら、
komameさんが書いたように、クラスを指定して書きます。
動かなければ、
.entry-title {
line-height: 1.8!important;
}
と書いて、動くかどうか調べます。
動いた場合は、最初に指定したスタイルの詳細度より、高い設定があるので、スタイルシートを調べます。
クラス名とimportantを組み合わせても、動かない事があります。
その場合は、
既に、importantが、クラスやIDと組み合わせて書いてある
または、
htmlの要素に、スタイル属性を遣って書いている場合のどっちかになります。
これがどっちかを判定するスタイルを書きます。
#content .entry-title {
line-height: 1.8!important;
}
ID class importantを組み合わせたスタイルは、要素のstyle属性に書かれたスタイルをオーバーライドできるので、これでしか適用できなければ、テンプレートのインラインスタイルを探します
で、スタイルが利くと、ここでやめるわけなんですが、
やめないで、仕上げで、最低限度の詳細度でルールが反映する セレクタを探して、終わりになります。
スタイルは、最小の詳細度で記述するのがいいです。IDは、極力使いません。
あと、テーマの特徴から、ある程度クラス名などを想定する事もできます。
twelveの、コメント欄 Tagsのなかに、microformatsって書いてますよね。
.entry-title 、.hentry .entry-content 等は、マイクロフォーマットのクラス名なので、そう書いてあるテンプレートは、必ず使っているクラスということになります。
CSSは、簡単ぽいと思っている人が多いと思いますが、エラーが出ないCSSは、とっても難しいと私も思います。
ありがとうございます。
おかげで、「important」がどんどん消えて行っています。
なんだか、CSSが楽しくなってきました。
この調子で、自分でテンプレートを作っちゃおうかと思いましたが、「Twentytwelve」の表示されているブラウザを縮めると、それに合わせたレイアウトになるじゃないですか～驚きました。
改めてTwentytwelveのＣＳＳを見てみると、表示はシンプルデザインなのに、見たこともないタグやらがいっぱいあります。html5ってやつですかね？
一気に興奮は冷め、自分の知識の無さを思い知らされました。
改めてコツコツ勉強しなおそうと思いました。
これからもいろいろ質問してお世話になると思いますが、どうぞよろしくお願いします。
