サポート » 使い方全般 » テーマ内のstyle.cssと記事内のstyle記述の優先順位について

  • 解決済 jinchan

    (@jinchan)


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

    1)Twenty-ten の style.css に

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

    2)投稿記事のHTML入力欄で<head>内に

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

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

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

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

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

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • こんにちは

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

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

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

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

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

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

    スレッド開始 jinchan

    (@jinchan)

    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要素の場合、後者のスタイルが優先されます。
    ------------------------------------
    これから、前回質問内容の詳細度を計算しますと、

    1)の場合

       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

    2)の場合

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

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

       td: 1)(twentyten の style.css)
       th: 2)(投稿記事内のcss)

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

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

    この場合通常は2)の方が優先されるはずですので、プロパティ、!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)

    popup さん、はじめまして、おはようございます。

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

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

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

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

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

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

    1)ご提案どおり、テーマ内の header.php の <head>タグ内に

    <?php
    $post_id = $post->ID;
    if($style = get_post_meta($post_id, 'style', true)) {
    echo $style."\n";
    }
    ?>

    を追加。この場合、style は、カスタムフィールド名で、カタカナでもいいと思いますが、ここでは英字にして、style指定なので、<head>内の最後の部分に追加。

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

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

       名前: style
       値 : <style type=”text/css”>~</style>
           (この ~ に自分の好きな style仕様を書く)

    4)本文記事欄のHTML欄に、html文を書く

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

      半角スペース + !important;

    という優先指定をする。

    次回からは、1)~ 3)は、不要で、

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

    というだけでOK!。

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

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • トピック「テーマ内のstyle.cssと記事内のstyle記述の優先順位について」には新たに返信することはできません。