テーマ内のstyle.cssと記事内のstyle記述の優先順位について

解決済 jinchan
(@jinchan)

12年、 1ヶ月前

WordPress初心者です。よろしくお願いします。

１）Twenty-ten　の　style.css に

　#content tr th,
#content thead th {
・・・
line-height: 1em;
・・・
}
#content tr td {
・・・
line-height:1em;
・・・
}

２）投稿記事のHTML入力欄で<head>内に

<style TYPE=”text/css”>
<!–
td {
line-height:3em !important;
}

th {
line-height: 3em !important;
}
–>
</style>

とした場合、td セレクタの場合は、１）が優先し、２）のtd内を変えても、画面上変化しません。つまり、反映されません。

ところが、th セレクタの場合は、２）が優先し、２）のth内を変えれば、画面上もちゃんと変化し、反映されます。

同じように書いているのですが、なぜ、th の方だけ、有効に動作するのでしょうか？
なお、２）の投稿記事欄の方HTML内では、<thead> は、使っていません。
わかりにくくて恐縮ですが、どなたかお分かりの方、ご教示よろしくお願いします。

4件の返信を表示中 - 1 - 4件目 (全4件中)

nobita
(@nobita)

12年、 1ヶ月前

こんにちは

同じように書いているのですが、なぜ、th の方だけ、有効に動作するのでしょうか？

CSSには、Specificity（　詳細度　）という指定ができます。

詳細度は、スタイルルールの重要度を指定する書き方です

CSS2と、CSS2.1で詳細度の計算の仕方は異なります。最新のブラウザは、CSS2.1の計算で動作します

同じ詳細度なら、外部CSS　<　head 埋め込みスタイル　<　インラインスタイルの順で　ルールが適用されますが、詳細度を使う事で、インラインスタイルを強制的に、外部スタイルシートのルールを適用するといったことが可能になります。

ルールの重要度は、id class elementの組み合わせの仕方で決定されます。
important ルールは、1000で計算すればいいと思います。

トピック投稿者 jinchan
(@jinchan)

12年、 1ヶ月前

nobita さん、はじめまして。

ご回答ありがとうございました。

『詳細度』、はじめて伺いました。
で、早速調べたところ
『CSSにおけるセレクタの優先順位』
http://refluxflow.net/2006/08/css_selector_specificity.html
がありまして、引用させていただきますと、
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
優先順位の計算方法

CSS2の仕様では、セレクタの優先順位の計算方法が以下のように決められています（参考: 6.4.3 Calculating a selector’s specificity）。
http://www.w3.org/TR/CSS2/cascade.html#specificity

セレクタの優先順位は詳細度によって決められます。詳細度の大きいセレクタほど優先順位は高くなります。

セレクタ中のID属性の数をaとする
セレクタ中のID属性以外の属性と疑似クラスの数をbとする
セレクタ中の要素名の数をcする
疑似要素は無視する
この3つの数字をa, b, cの順に連結して詳細度とします。

/* 詳細度の計算例 */
* {} /* a = 0, b = 0, c = 0, 詳細度 = 0 */
p {} /* a = 0, b = 0, c = 1, 詳細度 = 1 */
p a {} /* a = 0, b = 0, c = 2, 詳細度 = 2 */
.class {} /* a = 0, b = 1, c = 0, 詳細度 = 10 */
p.class {} /* a = 0, b = 1, c = 1, 詳細度 = 11 */
p a[href] {} /* a = 0, b = 1, c = 2, 詳細度 = 12 */
a[href]:link {} /* a = 0, b = 2, c = 1, 詳細度 = 21 */
#id {} /* a = 1, b = 0, c = 0, 詳細度 = 100 */
#id p {} /* a = 1, b = 0, c = 1, 詳細度 = 101 */
例えば、「p a[href]」と「a[href]:link」の両方の条件を満たすa要素の場合、後者のスタイルが優先されます。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
これから、前回質問内容の詳細度を計算しますと、

１）の場合

　　　td: #content tr td{} →　a=1, b=0, c=2 →　詳細度=102
th: #content tr th,
#content thead th {} →　a=2, b=0, c=4 →詳細度=204

２）の場合

　　　td: td{･･･ !important} →　c=1 !important=1000 →　詳細度=1001
th: th{･･･ !important} →　c=1 !important=1000 →　詳細度=1001

となり、td, th いずれも２）の詳細度が大きいため、２）のスタイルが
反映されるはず、となりましたが、実際には

　　　td: １）（twentyten の　style.css）
　　　th: ２）（投稿記事内のcss）

が反映されてしまいます。

『詳細度』について、まだまだ、勉強不足ですみませんが、
①　どこがおかしいのか、
②　また、２）を反映させるには、どうすれば良いのか
ご教示いただければ幸いです。
popup
(@popup)

12年、 1ヶ月前
この場合通常は２）の方が優先されるはずですので、プロパティ、!important、あるいは:や;の記述ミス、style.cssでの!important指定を見落としていないかなど、ケアレスミスをしていないか確認するしかないと思います。

記事のHTML入力欄で<head>内に記述しているということですが、記事の入力欄の記述を<head>内に出力することはできません。
<head>は1ページに一つだけと決まっていますので、複数出力するのはW3Cに違反しています。
あらかじめstyle.cssに特定のtable用のクラス名（あるいはID）のCSSを追加しておいて、記事投稿時にtableにそのクラス名(またはID)を付与するのはどうでしょうか？
記事投稿ごとにCSSを変更する必要がある場合は、カスタムフィールドを使用するといいかもしれません。
header.phpのhead内の適当な位置に次のコードを追加して置きます。
```
<?php
$post_id = $post->ID;
if($style = get_post_meta($post_id, 'カスタムフィールド名', true)) {
echo $style."\n";
}
?>
```
カスタムフィールドには<style type=”text/css”>～</style>まで記述します。
トピック投稿者 jinchan
(@jinchan)

12年、 1ヶ月前
popup さん、はじめまして、おはようございます。

２つのご提案、ありがとうございました。

１つ目は、私でも何となく理解できましたが、
２つ目の方が、魅力的なので、これまた、はじめてですが、早速調べましたら、投稿画面の下に

『カスタムフィールドは投稿に特別なメタデータを追加するために使うものです。追加されたカスタムフィールドはテーマの中で利用できます。』
http://wpdocs.sourceforge.jp/Using_Custom_Fields

とあって、これ見たら、なんと、奥行きが深くて、短時間では、到底理解できないと思いました。

で、勉強の方は、後回しにすることとして、とりあえず、ご提案の方法を、わけもわからずにまねしてみようと思い、やってみたところ、うまくいきましたので解決！！しました。
どうもありがとうございました。

で、popup さんは簡潔に書かれていたので、私の備忘録もかねて、初心者の方にも参考にしていただけたらと思い、以下手順をまとめました。
何か、不要なこととか、もっとこうした方がいい、とかアドバイスがあれば、お願いします。

１）ご提案どおり、テーマ内の header.php の <head>タグ内に
```
<?php
$post_id = $post->ID;
if($style = get_post_meta($post_id, 'style', true)) {
echo $style."\n";
}
?>
```
を追加。この場合、style　は、カスタムフィールド名で、カタカナでもいいと思いますが、ここでは英字にして、style指定なので、<head>内の最後の部分に追加。

２）投稿＞新規追加、もしくは、固定ページ＞新規追加　画面で、右上の　表示オプション　の　カスタムフィールド　にチェックを入れる。

３）画面下に　カスタムフィールド　欄ができるので、新規追加　ボタンを押して

　　　名前：　style
　　　値　：　<style type=”text/css”>～</style>
　　　　　　　（この　～　に自分の好きな style仕様を書く）

４）本文記事欄のHTML欄に、html文を書く

以上で、第Ⅰラウンドは終了。３）で書いたstyle仕様が反映される。ただし、やってみて、反映されていないセレクタやクラスがあれば、テーマの style.css 内の style と競合していることが考えられるため、反映されていなかったstyle指定の後に、

　　半角スペース + !important;

という優先指定をする。

次回からは、１）～　３）は、不要で、

１）新規追加画面の下部のカスタムフィールド欄の中の、名前欄のプルダウンメニューから、style を選択して、値欄に、必要な style仕様を入力する。
２）本文記事欄のHTML欄に、html文を書く

というだけでＯＫ！。

以上で、投稿記事も固定ページ記事も、style仕様が自由自在！ということになりました。

4件の返信を表示中 - 1 - 4件目 (全4件中)

トピック「テーマ内のstyle.cssと記事内のstyle記述の優先順位について」には新たに返信することはできません。

トピックタグ

表示