My Snow MonkeyのCSSが効かないのはなぜ？｜テーマのCSSに負けていた原因と、追加CSSでの直し方
こんにちは、ゆきしょうです。
自分の事業のサイトの見た目を、AIと一緒に直していたときの話です。
直すためのCSSは、My Snow Monkeyというプラグインのstyle.cssに入れる前提で考えていました。
ところが、その場所だと、書いたとおりに効かない箇所が出ることが分かりました。
My Snow MonkeyのCSSが効かないのはなぜ？
後から読み込まれるテーマ側のCSSに、負けているからです。
ページのheadの中を見ると、My Snow MonkeyのCSSは途中で読み込まれていました。
その後ろに、テーマやブロックのCSSがいくつも続きます。
書いたCSSが間違っていたわけではありません。
後から読まれたCSSが勝つのは、どんなとき？
セレクタの強さ（詳細度）が同じときです。
!importantが付いていない指定どうしなら、CSSはセレクタの強さで勝ち負けを決めます。
IDセレクタは、クラスがいくつ並んでも負けない強さです。
強さが同じなら、最後に書かれた指定が使われる決まりになっています。
.button { background: #0a2a4a; } /* 先に読まれる */
.button { background: #e8730c; } /* 後に読まれる→こちらが使われる */My Snow Monkeyの指定は、上の1行目の立場でした。
#bodyを付ければ勝てる？
相手の指定にIDも!importantも入っていなければ、勝てます。
Snow Monkeyのbodyタグには、id="body" が付いています。
そこで、すべてのセレクタの前に #body を付けた版を用意しました。
#body .button { background: #0a2a4a; }IDが1つ増えるので、クラスだけで書かれた指定より強くなる仕組みです。
相手の指定にもIDがあれば、IDの数を比べ直すことになります。
この版を本番のページの同じ位置に差し込んで試しました。
パソコン・タブレット・スマホの3つの幅で、確かめた項目すべてに効いていました。
なぜ追加CSSに切り替えた？
My Snow Monkeyのstyle.cssでは、#bodyを付けないとテーマのCSSに勝てなかったからです。
そこで、同じ直しを「外観」→「カスタマイズ」→「追加CSS」に貼る形に変えました。
Snow Monkeyの公式も、CSSのカスタマイズには追加CSSをすすめています。
子テーマを作る手間がなく、エディターの画面にもCSSが反映されるのが理由です。
CSSの量が多いときは、My Snow Monkeyにstyle.cssを作る方法も紹介されています。
追加CSSに貼ると、なぜ#bodyなしで効く？
WordPressが、追加CSSを通常のCSSより後ろに出すからです。
登録されたCSSをまとめて出す処理（wp_print_styles）は、headの優先度8で動きます。
追加CSSを出す処理は、優先度101です。
数字が大きいほど後に動くので、同じ強さなら#bodyが無くても追加CSSの指定が使われます。
直したい箇所は、途中で私が気づいた分が加わって増えていました。
#bodyを外したCSSをheadの最後に差し込んで試すと、増えた分まで効きました。
そのあと追加CSSに貼り、本番のページを3つの幅で見て、全項目が直ったことを確かめました。
ただ、私のサイトでは、ブロック用のCSSの一部が追加CSSより後ろに出ています。
そこに同じ強さの指定があれば、追加CSSでも負けます。
効かない箇所が残ったら、headの中で順番を確かめてください。
CSSを差し替えても、表示が変わらないときは？
ブラウザが、古いCSSを覚えたままになっている場合があります。
WordPressはCSSを読み込むとき、URLの後ろに「?ver=番号」を付けます。
この番号が変われば、ブラウザは新しいファイルとして読み直す仕組みです。
私のMy Snow Monkeyでは、この番号にフォルダの更新日時を使っていました。
フォルダの中のstyle.cssを差し替えても、番号は変わりませんでした。
しかもCSSは、ブラウザに1年間覚えておかせる設定でした。
番号にstyle.cssそのものの更新日時を使えば、差し替えるたびに番号が変わります。
filemtime( __DIR__ . '/style.css' )追加CSSは、ページの中に直接書き込まれます。
CSSファイルの番号を気にする必要がありません。
逆に「?ver=」が付いたせいで、Google Fontsが読み込めなかったこともありました。
【解決】WordPressでGoogle Fontsが反映されない！CSSは正しいのに…原因はfunctions.phpの「あの記述」2026年1月29日自分で直すのが難しいときは？
ココナラでは、WordPressの修正を引き受けている人を探せます。
以上、My Snow MonkeyのCSSが効かなかった原因と、追加CSSでの直し方でした。