サポート » プラグイン » プラグインのCSSが反映されない

  • テーマのCSSと競合して、プラグインのCSSが反映されないのです。
    双方ともサポート対象外の代物でして、自力で・・・と考えてみたのですがお手上げです。

    具体的にというか、やりたいことはプラグインのCSSを適用したい、ただそれだけなのです。
    それに対してテーマのCSSが邪魔をしている、という状態です。

    CSSの読み込む順番(ソースを見るとプラグインが上)、というのはやってみましたがかわりませんでした。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • モデレーター jim912

    (@jim912)

    CSSの詳細度の問題である可能性が高いと思いますので確認いただくと良いかと思います。

    CSSにおけるセレクタの優先順位

    devsasaさん

    jim912さんのおっしゃる通りCSSの優先度の制御です

    しかし、
    プラグイン事態の優先度を上げてしまうとアップデートの時に問題が発生する(かき消されてしまう)ので
    CSSファイルをどこかに設置し、優先度を上げたCSSを作ってあげると良いと思います。
    functionでも、headerでも、import手段はいろいろあると思いますので

    ルール的には
    ① !importantが付いたstyleが優先
    ② id(#)が付いたものが優先
    ③ class(.)が付いたものが優先

    なのでプラグインは大抵クラスが付いてくると思いますがテーマのIDに負けている可能性が大です。

    計算方法は、id(#)が付いたものに+100を加算
    class(.)が付いたものに+1を加算してあげます。

    例えば.plugin{}と定義されているものがあるとします。
    しかしテーマであるCSSが#main span{}などと記載すると

    .plugin{}は1ポイントに対し#main span{}は100ポイントとなり
    #main span{}の方が優先します。
    であれば
    #main .plugin{}としてあげれば優先度は上がります。

    もっと強くしたければ
    #container #main .plugin{}と書くと、100+100+1=201になりかなり優先度が上がります。

    しかしテーマによってはページに直で書かれていたり、functions.phpに記載され出力ソースに直書きされている場合があります。

    その場合は、functions.phpなどを書き換えるしかありません。

    実際のURLなど見れればもう少し具体的にお話しできるのですが

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • トピック「プラグインのCSSが反映されない」には新たに返信することはできません。