【Cocoon】カスタムCSSが反映されない時の対処法

Cocoon(コクーン)

こちらの記事にて少し触れた「個別ページのカスタムCSSが反映されない」ときの対処法を、私が直面した事例とやってみたことを交えてご紹介します。

 

個別ページのカスタムCSSはとても便利なので、使えないのはけっこう大変。

ぜひ下記の方法を試してみて下さい!

 

スポンサーリンク
スポンサーリンク

直面した問題

 

目で見て、すでにおかしい

固定ページの『カスタムCSS』に書いたCSSが反映されない……。

 

しかし、まったく反映されないわけではなく、Googleのデベロッパーツールで確認したところ834px以上だと反映しなくなることが、まず視覚的に判明しました。

 

▲ 834px以上では、ヘッダー表示、アイキャッチ表示、背景色、文字の大きさ等すべてのcssが解除されている状態。

 

モバイルなら反映されるが、PCになると反映されない……?

こう考えたことで、迷宮にハマるはめに。

 

デベロッパーツールで原因が解明

その後、改めてデベロッパーツールを確認したところ、原因であろう箇所が判明。

なぜか勝手に『max-width:834px』という設定がされています。

 

試しにツール上で仮編集を行ってみた(max-width:1920pxにしてみた)ところ、問題なくcssが反映されることが分かりました。

 

しかしここで大きな問題が……。

原因の大元が何なのか、どこを直せばいいのか分からない!!

 

ヒントになるようなものが何もない。

前述した「モバイルはOK、PCはNG」が頭にあったので、エディターに記載したcssが原因だと思い込み、かなり長い時間を費やす羽目になりました。

 

対処1:プラグインを無効にする

まず疑うべきはプラグイン。

……とは言うものの、ほぼプラグインを使っていないのでちょっと疑わしい。

 

※チェックを入れて一括適用できます。

 

念のためインストールしているプラグインをすべて無効にしてみたが、やはり改善されませんでした。

 

しかし、かなり有効な手段であることには変わりありません!

まずはプラグインを全部無効にし、CSSが反映されるか確認してみて下さい。



対処2:追加CSSを確認する

Cocoonにおけるcssの優先順位は、追加CSSが一番高いらしいです(プラグインは除く)。

追加CSSの記述先は、外観→カスタマイズ→追加CSSから見れます。

 

CSSの優先順位も前述のデベロッパーツールから確認できるので、これを見る限りでは続いてカスタムCSS、子テーマのCSSだと思います……おそらく。

スキンを使用していると優先順位が変わるようですので一概には言えませんが。

Cocoonスキンの機能の仕様
Cocoonのスキン機能に関する詳細な仕様書です。スキン機能を利用すれば、洋服を着替える感覚でサイトデザインを変更することが可能です。

 

ここで重視したいのは「カスタムCSS」よりも「追加CSS」のほうが優先度が高いということです。同様の記述があった場合、下位のcssは適用されません。

 

というわけで、追加CSSの中身を確認してみて下さい。

必要なら追加CSSの記述を修正する必要があります。一番簡単なのは、エディターにコピペで移してしまうことかと思います。

 

対処3:レスポンシブCSSを確認

Cocoonには「外観 → テーマファイルエディター」で開くCocoonの子テーマcss(Cocoon Child)の、下の方に『レスポンシブルデザイン用のメディアクエリ』が用意されています。

 

ご覧の通り、〇〇以下となっている箇所はモバイル画面の幅に対応して狭くなっていると思えば分かりやすいと思います。ここに幅を固定する記述等がないか確認。

(max-width、min-width等)

 

というより、全cssの怪しい箇所を確認してみました。

でも、該当箇所が見つからないんですよね。

 

試しにカスタムcssを「@media screen and (max-width: 1920px){}」で囲んでみたところ、

 

デベロッパーツールでは

このような表記に。

 

これにより、カスタムcssよりも上位の設定が存在していることが判明。

システムに根付いた何かが働いている気がしますが、それが何なのか不明のままです(←これがめっちゃ困った!)



対処4:キャッシュを消す

何かヒントはないかと、この右上にある「appeal-area」をクリックすると……

 

Content unavailable. Resource was not cached」という表示が出ます。

 

キャッシュがない??

ここで初めてキャッシュという言葉が出てきました。しかし意味が分からない。キャッシュがないとは、上書きできない状態なのか? それとも以前のキャッシュが生きていて、それが優先的に反映されているということなのか?

 

そこで対処法の一つである「キャッシュの削除」を行ってみます。

 

「Cocoo設定」→「キャッシュの削除」から

 

「全てのキャッシュの削除」を選択。

 

結果:直らなかった。

 

対処5:高速化の解除

これが原因だと分かるまで、ずいぶんの時間を要しました。

原因は「高速化」

 

「Cocoo設定」→「高速化」から

 

「CSSを縮小化する」のチェックを外します。

 

たったこれだけでPC表示が直りました。

 

「高速化」とは記載されている通り、高速化を図るためにサイズを縮小しているのですね!

 

しかし、まさかこれが原因だとは思わなかったので「以前カスタムCSSを行ったときは問題なくできた。それ以降に行った作業は何か?」と思い出すのが大変でした。

 

この設定は「カスタムCSSよりも上位にくる」と覚えておきましょう!

 

終わりに

以上、5つの対処法で、この問題はだいたい解決できるのではないかと思います。

 

とにかくカスタムCSSが効かないというのは大変です。

しかしもっと大変なのは、その原因が簡単に分からないということです。

 

事前の知識があればピンとひらめいて一発でしたね。

なかったので、ここまで苦労したわけですが……。

 

ともあれ、この記事が一助となれば幸いです。

 

 

FURIO
FURIO

お疲れ様でした!

 



コメント