サポート » 使い方全般 » テンプレートのCSSを非適用?無効化?させたい

  • 解決済 antray7893

    (@antray7893)


    Pinboardというテーマを使わせてもらってるWP初心者です。
    普段はデザインをよく見せるCSSですが
    キャプチャ画像4枚をtableタグで隙間なく表示したいとき
    自動的に設定されるclassが邪魔になります。
    .aligncenter{margin:20px auto;}(画像挿入時imgに自動設定されるclass)
    .entry-content a img{padding:0.8%;
    border 1px;
    max-width:98.5%;}((entryに適用されるclass)
    table td{padding: 6px 0;}
    当方cssを齧った程度ですがアドバイス頂けると助かります。

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • 천궁 메텔

    (@digitmaetel)

    http://ja.forums.wordpress.org/topic/106410?replies=2
    こちらの延長線上にある内容かと推察しますが、
    その

    キャプチャ画像4枚をtableタグで隙間なく表示したい

    ところで独自クラスを table に指定すると良いでしょう。
    且つ、
    すべてのページで無効化させるのでしたら、
    Pinboard テーマの style.css で該当箇所をコメントアウトで可能ですね。

    トピック投稿者 antray7893

    (@antray7893)

    tableに独自クラスを設定すればimgに設定されるclassやエントリー全体にかかるクラスの設定を無効化出来るということでしょうか?

    <div class=”entry-content”>
    <table>
    <tr>
    <td><img class=”aligncenter” /></td>
    </tr>
    <tr>
    <td><img class=”aligncenter” /></td>
    </tr>
    </table>

    nobita

    (@nobita)

    こんにちは

    tableに独自クラスを設定すればimgに設定されるclassやエントリー全体にかかるクラスの設定を無効化出来るということでしょうか?

    無効化ではありませんが、上書きして変更する事ができます。

    詳細は、CSS Specificity で、ググって見てください

    WordPressでは、WordPress Generated Classesという、必ず設定しておかなければならないクラスがあります。

    値は、それぞれのテーマでテーマ開発者が良いと思う設定になるので、それぞれ異なります。
    aligncenterは、そのクラスです。

    なので、必須クラスは闇雲に変更すると、コアで指定どおりの設定が反映しなくなります。

    <table class="my-table">
    <tr>
    <td><img class="aligncenter" /></td>

    上の場合、style.cssの末尾に

    .my-table .aligncenter{
      margin:0;
      padding:0;
    }

    と局所的なスタイルルールを設定すれば、specificityが高くなり、スタイルをオーバーライドできます。

    当方cssを齧った程度ですがアドバイス頂けると助かります。

    CSSは、見た目だけの話と思われがちですが、スタイルの指定ひとつでプラグインが動作しなくなる事もあるので、CSSの専門書などで、勉強するといいですよ 🙂

    トピック投稿者 antray7893

    (@antray7893)

    nobitaさん、ご丁寧にコードまで書いていただきありがとうございました。
    おかげさまで
    無事隙間を埋めて表示させることが出来ました。
    CSSで今回のような応用や優先度等が設定されているとは知りませんでした。
    これを機にCSSについて勉強してみようと思います。
    今回は本当にありがとうございました。

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • トピック「テンプレートのCSSを非適用?無効化?させたい」には新たに返信することはできません。