プラグインのCSSを上書き・カスタマイズする方法【WordPress】

　 2021年6月18日

かなり初心者向けの書き方になりますが、Wordpress でプラグインが独自に出力する CSS を無効化、上書き、置き換える手っ取り早い方法を書いておきます。

プラグインのCSSを置き換える方法

プラグインが出力する CSS を置き換えるには、CSS のスタイルの優先順位を意識し、より優先順位の高い書き方をするようにします。

多くのケースで使える簡単な方法は、「プラグインが出力する要素を囲う要素」を用意し、その要素から順にセレクタを指定してやる方法です。

これは例えば、プラグインが出力する CSS がこのようなものである場合、

div.plugin {
	margin: 1em;
}Code language: CSS (css)

以下のような CSS を書けるような HTML を書いてやる、ということです。これで div.plugin の margin を 0 に上書きできます。

.mycontent div.plugin {
	margin: 0;
}Code language: CSS (css)

これでも効かない場合は、クラス指定より強力な ID 指定を使う手もあります。

#mycontent div.plugin {
	margin: 0;
}Code language: CSS (css)

ID 指定でもまだ効かない場合は、リンク先の資料を参考に、セレクタ優先順位の点数計算で、より優先順位の高い書き方を模索する形になります。

プラグインの CSS を上書きでなく無効化したい場合は、初期値を表す "initial" を使います。

例えば、プラグインの CSS が定義している box-shadow を無くしたい場合は、以下のように書きます。

.mycontent div.plugin {
	box-shadow: initial;
}
Code language: CSS (css)

商品リンク管理プラグイン「Rinker」の CSS を部分的に修正・カスタマイズするときにも使える方法ですので、参考にしてみてください。