WordPressでCSSが反映されない・表示されない原因と解決方法

WordPress
この記事は約8分で読めます。

最近ブログのテーマを「Simplicity2」から「Cocoon」に変更しました。

しかし高速化やキャッシュなんかの設定をいじっているうち、《追加CSSの設定だけが反映されない》という事態が発生。CSSが反映されないトラブルは基本的には記述ミスやキャッシュが悪さをしているなどの場合が多く、よくよく調べていけば解消できることがほとんどです。

ただ今回は、

  • WordPressテーマ「Cocoon」にもともとあるCSSは反映される
  • 「追加CSS」に記入したCSSだけが反映されない
  • 「追加CSS」は掲載サイトからもらってきたままの形で変更していない
  • 「追加CSS」内に記述ミスは見当たらずプレビュー画面では反映される
  • キャッシュの削除やページリロードを行っても変わらない

という泥沼状態。かなり悩んで手詰まり感だったんですが、原因はまさかの「CSS縮小化」でした。

CSSが反映されないトラブルにあたって確認したことと手順をまとめておきます。

スポンサーリンク

WordPressでCSSが反映されない時にチェックすべきこと

通常、CSSが反映されない原因としては以下のようなものが考えられます。

  • CSSに記述ミスがある
  • CSSを記述する場所を間違えている
  • 優先順位が低くなっていて表示されていない
  • キャッシュが残っていて更新が反映されていない

これらの原因の解決方法としては、

  • CSSの文法ミスやコメントアウトをチェックする
  • ブラウザの「検証」を使ってCSSにエラーがないか確認する
  • キャッシュを削除してリロードする

などが挙げられます。

それぞれ確認する手順をまとめておきます。

CSSの文法ミスやコメントアウトの記述が間違っていないか

まず記述したCSSそのものに文法ミスがあったら正確な表示はされません。

文法ミスというのは例えば・・・

  • 記号やスペースが半角ではなく全角になっている
  • 閉じタグ「}」が書かれていない
  • 「;」(セミコロン)と「:」(コロン)を間違えている
  • プロパティや値の指定が間違っている

このあたりが多いです。書き込んだCSSを1文字ずつよく確認してみましょう。

特に「追加CSS」を見て×マークがついているところや赤字になっている箇所があったら要注意。

×マークが表示されている行、赤字になっている文字は文法が間違っているを示しています。上で挙げた中の何らかのエラーに当てはまっている可能性が高いので、1文字ずつ細かく確認してみてください。特にコメントアウト(「/*」~「*/」で囲まれたコンピュータには認識されないメモ書きの部分)は全角スペースが紛れ込んでいたりすることも多く、原因が特定しにくい時はひとまずコメントアウトをいったん全て消してみる、という確認方法も有効です。

半角への一括変換・CSSの自動チェックを行う方法

Wordを使うことが多いなら「ホーム」タブの中にあるAaボタンから半角変換ができますし、

こちらのような入力したテキストの全角文字を半角文字に変換するサイトを利用してみるのも効果的です。

全角半角 変換ツール

ちなみに私はよく以下サイトからCSSを拝借して使っているのですが、

リファレンス
ぽんひろ.com
Webデザイナーが個人で運営するブログ。Web制作、デザイン、WordPressカスタマイズ(Cocoon)、ブログ運営、アフィリエイトに関することを中心に紹介をしていきます!

こうしたサイトからそのままコピペして使っていても絶対にミスがないとは言いきれません。もともとの記述に文法ミスや半角・全角の誤りが潜んでいることはありますし、コピペしてきたCSSをアレンジしていたり、コメントアウトを追記している場合はそこでエラーが発生している可能性もあります。

The W3C CSS Validation Service

このサイトのようなCSSの検証サービスを使うと自動でエラーをあぶり出してくれるので、困ったら一度チェックしてみることをおすすめします。

CSSを記述する場所・優先順位を間違えていないか

CSSの記述は下の行に書いたものほど優先されるという性質があります。

例えばこのようにCSSに記述していたとすると、背景色や文字サイズは後に書いている「#e6e6fa」と「18px」が反映されます。

また上画像のように「!important」を付けた記述がある場合はそちらの優先順位が高くなるので、

「!important」の記述を追加してCSSが反映されるようなら優先順位でトラブルが起きている

という確認の仕方もできます。

逆に「!important」を付けても変化がないようなら、CSSの記述ミスなど他の原因があると考えられます。

ブラウザの「検証」を使ってCSSエラーが発生していないか確認

CSSが反映されない理由をサイト表示の方から探ることもできます。

「Google Chrome」や「Firefox」といったPCブラウザに実装されている「検証」という機能を使います。

ページのどこでもいいので右クリックをすると上画像のような表示が出るので、「検証」を選んでクリックしてください。

すると画面右側にHTMLがずらーっと表示されるので、左上の方にある小さいマークをクリックします。

先ほどのマークをクリックして有効になっている状態だと、画面左側に表示されているWebページにマウスカーソルを合わせて決定していくだけで各要素を選択できます。上画像だと左側の青く塗り潰されている表部分を指定していて、右側でHTMLとCSSが丸わかりになります。上のSSでいうと赤矢印の先にあるのがHTML、青矢印の先にあるのがCSSです。

こうして見た時にCSSの中で打ち消し線がついている箇所がたまにあるんですが、線が引かれている箇所は指定が重複していたり、記述が誤っているなどの理由でCSSが適用されていないことを示します。つまり打ち消し線が表示されている箇所を順に見ていけばエラーが起こっている原因を特定できる、ということです。

スーパーリロードを行う/キャッシュを削除する

CSSの文法を間違えているといった根本的なミスがなくても、キャッシュが悪さをしている場合もあります。

キャッシュはインターネットでサイトなどを閲覧する時に読み込みを速くする、つまりページの表示速度を上げるための要素です。「Google Chrome」や「Firefox」といったブラウザは一度訪れたサイトの履歴をキャッシュとして保存・蓄積していて、次にまた同じサイトを開いた時に呼び出すことで素早く表示できるようにしています。

「過去の情報」を蓄積していることからサイトを読み込む時もキャッシュが保存された時点の状態を表示してしまい、CSSの更新などを行っても反映されないトラブルを引き起こすことがあるのです。

そのため、

CSSの文法に間違いはないはずなのになぜか反映されない・・・

という時はキャッシュの削除で改善する場合があります。

なおCSSの表示を確認したいだけなら、PCの場合は必ずしもキャッシュを削除する必要はありません。

  • Windows:CtrlF5
  • Mac:commandR

上に挙げた「スーパーリロード」のコマンドを使えば簡単に最新情報を表示できます。

「スーパーリロード」はキャッシュを読み込まずにウェブページを表示するので、

スーパーリロードしたらCSSちゃんと反映されてた!

ということならCSSの記述に問題はありません。

Google Chromeでキャッシュを削除する方法

とはいえキャッシュをずっと放置しておくとデータが膨大な量になり、PCやスマホの動作が重くなるというデメリットも持っています。

できるだけ定期的にキャッシュの掃除をしておくとCSSが反映されないトラブル防止にもつながるので、「Google Chrome」でキャッシュを削除する方法を解説しておきます。

「Google Chrome」の場合、画面右上①のボタンから「その他のツール」を選ぶと「閲覧履歴を消去」という項目が出てきます。

キーボードショートカットでCtrlShiftDeleteでも呼び出せます。

すると上のような画面が出てくるので、上部「詳細設定」タブから「キャッシュされた画像とファイル」にチェックを入れて「データを削除」を実行します。これだけでキャッシュの削除は完了です。

「Cookieと他のサイトデータ」や「パスワードとその他のログインデータ」などを誤って削除しないように注意してください。これらのデータを消してしまうと各サイトへのログインのために保存していたIDやパスワードを喪失したり、自動ログインができなくなります。

「Cocoon」の設定の中にある「CSS縮小化」がCSSトラブルの原因

しかし今回は上に挙げた対処法を全て試しても解決できず。

私が陥った状態は「Cocoon」にもともと搭載されている文字装飾や各テーマのCSSは問題なく表示されていて、

外観 → CSS編集 → 追加CSS

と進んでプレビュー画面ではしっかり反映されているんです。なのになぜかブログの状態は変わらない。

どこでおかしくなったのかわからないんだよなあ・・・

って感じだったんですよね。

結局長いことさまよってやっと見つけたのがこちらの記事。

[WordPressテーマ] Cocoonの追加CSSがリアルタイムで反映されない原因はCSS縮小化 | unlimited chaos
国産WordPressテーマでは現在最も利用者が多いのではないかと思われるCocoonですが、そろそろ私も本格的に使ってみたいと思いながらもまだ正式に運用しているサイトは無かった...

この記事によると、

Cocoon設定 → 高速化

の中にある「CSS縮小化」の項目が原因とのこと。つまり「Cocoon」固有の設定トラブルだったわけです。

ここのチェックを外したら無事に追加CSSが適用されました。

もしWordPressテーマ「Cocoon」を使用していて、

調べられるところは全部調べたのにそれでも直らない・・・

と悩んでいるようなら上記の「CSS縮小化」について見直してみてください。

コメント

タイトルとURLをコピーしました