• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

FOXWP

WordPressの始め方と使い方をわかりやすく解説!

  • HOME
  • WordPressブログの始め方
  • お問い合わせ
FOXWP / WordPress / WordPressでCSSが反映されない原因と対処法

WordPressでCSSが反映されない原因と対処法

最終更新日:2021年10月6日

WordPressでCSSが反映されない原因と対処法を解説します。

目次 非表示
1 WordPressでCSSが反映されない原因
1.1 セレクタの記述が間違っている
1.2 プロパティと値の組み合わせが正しくない
1.3 記載したCSSの優先順位が低い
1.4 キャッシュされたCSSファイルを読み込んでいる
1.5 CSSファイルが読み込まれていない
2 WordPressでCSSが反映されない時の対処法
2.1 CSSファイルが読み込まれているか確認する
2.2 キャッシュを削除する
2.3 記載したCSSの優先順位が高いか確認をする
2.4 記載したCSSの構文に間違いがないか確認をする

WordPressでCSSが反映されない原因

WordPressでCSSが反映されない原因には、次のものがあります。

  1. セレクタの記述が間違っている
  2. プロパティと値の組み合わせが正しくない
  3. 記載したCSSの優先順位が低い
  4. キャッシュされたCSSファイルを読み込んでいる
  5. CSSファイルが読み込まれていない

それぞれの原因について、詳しく解説を行います。

セレクタの記述が間違っている

まずCSSの記述方法に間違いがないか確認を行いましょう。

セレクタの記述が間違っていることに気づかずに、長時間悩んでしまうことも多いです。

p {}      /* HTMLタグ */
.class {} /* class */
#id {}    /* id */

特に多い間違いとしては、classセレクタの前に「.」、idセレクタの前に「#」を付け忘れる場合があります。

プロパティと値の組み合わせが正しくない

プロパティに対応していない値の記述が取られていた場合には、CSSは反映されません。

当たり前のことですが、ある程度CSSの記述に慣れた方が犯しやすい間違いです。

プロパティに対応する値を確認するには、MozillaのCSSリファレンスがわかりやすいかと思います。

記載したCSSの優先順位が低い

CSSには優先順位があります。そのため、新たに記載されたCSSの優先順位が低いと、CSSが反映されません。

特に気をつけるべき点は次のものがあります。

  • 同じCSSファイルでは、後半に記載された内容ほど優先順位が高い
  • classセレクタよりidセレクタの方が優先順位が高い
  • 親テーマのCSSファイルより子テーマCSSファイルの方が優先順位が高い
  • プラグインにより追加されたCSSファイルは基本的に優先順位が高い
  • カスタマイズ内の「追加CSS」に記載された内容は優先順位が高い

CSSの優先順位を決める上で、詳細度というルールがあります。詳しくは、以下の解説をご確認ください。

CSSの詳細度の解説はこちら

キャッシュされたCSSファイルを読み込んでいる

キャッシュとは、Webページの読み込みを早くするために、本来のファイルとは別に用意しておくことです。

キャッシュされたCSSファイルを読み込んでしまうと、修正後のCSSファイルが読み込まれないので、CSSの修正内容が反映されません。

キャッシュには、「ブラウザキャッシュ」と「サーバーキャッシュ」があります。

CSSファイルが読み込まれていない

CSSファイルが読み込まれていないと、もちろんCSSは反映されません。

WordPressでこれが起きる場合は、自身でCSSファイルを追加した時に起こるでしょう。

特に子テーマを追加した時に、CSSファイルが読み込まれないと言ったトラブルが発生します。

WordPressでCSSが反映されない時の対処法

WordPressでCSSが反映されない時には、次の手順で対処を行いましょう。

  1. CSSファイルが読み込まれているか確認する
  2. キャッシュを削除する
  3. 記載したCSSの優先順位が高いか確認をする
  4. 記載したCSSの構文に間違いがないか確認をする

各手順を行なった後に、反映されているかどうかの確認を行ってください。

CSSファイルが読み込まれているか確認する

チェック
「CSSファイルを追加していない」「すでに反映されたことがあるCSSファイルに追記をした」という方は、この手順は飛ばしても問題ありません。

ブラウザのインスペクタを起動し、headタグ内で該当のCSSファイルが読み込まれているか確認を行ってください。

読み込まれていれば、次のような記述があります。

<link rel="stylesheet" href="https://example.com/◯◯◯/△△△/□□□.css" type="text/css">

キャッシュを削除する

ブラウザおよびサーバーのキャッシュを削除します。

サーバーのキャッシュは、キャッシュプラグインにより生成されている場合が多いです。該当のプラグインとしたは、「W3 Total Cache」や「WP Cache」などがあります。

プラグインの機能よりキャッシュの削除を行いましょう。

ブラウザのキャッシュは以下のリンクより削除方法の確認を行ってください。

キャッシュの削除方法

  • Chrome
  • Firefox
  • Safari

記載したCSSの優先順位が高いか確認をする

まずはCSSの詳細度に問題がないか確認を行いましょう。もし、詳細度に問題がなければ、同一の記述をCSSファイル内の最後に記述してください。

WordPress特有の問題として、次の方法で解説できる場合があります。

  • (子テーマを作成している場合)親テーマではなく、子テーマのCSSファイルに記載を行う
  • 管理画面「外観→カスタマイズ」内にある「追加CSS」にCSSの記載を行う

記載したCSSの構文に間違いがないか確認をする

次の内容の確認を行ってください。

  • セレクタの記述方法に間違いがないか
  • プロパティと値の組み合わせに間違いがないか

間違いがあれば、正しいCSSの構文になるように内容の修正を行ってください。

カテゴリー:WordPress タグ:WordPressトラブル・エラー

WordPress初心者の方に読んで欲しい記事

  • あとで後悔しない!WordPress初期設定の基本事項
  • 安全にサイトを運営しよう!WordPressセキュリティ対策の基本マニュアル
Previous Post: « 【エックスサーバー 利用者向け】WordPressのリダイレクトを行う方法と注意点
Next Post: WordPressでJQueryが動作しない原因と対処法 »

Primary Sidebar

世界で一番利用されているWordPressテーマ

Divi WordPress Theme
レビューを見る

あなたの悩みは?

WordPress
セキュリティ
WordPress
トラブル
アクセスアップアフィリエイト
おすすめASP

最新ニュース

  • 【カラフルボックス】夏のキャンペーン実施中【2021年8月31日まで】

最近の投稿

  • WordPressでおすすめのバックアッププラグイン5選
  • WordPressのPHP設定を変更する方法(php.ini)
  • WordPressでおすすめの画像圧縮プラグイン5選
  • WordPressの投稿編集画面でその投稿を表示する方法
  • WordPressの管理画面に再利用ブロックの管理を追加する方法

カテゴリー

  • WordPress
  • お役立ち情報
  • アフィリエイト
  • ドメインレジストラ
  • レンタルサーバー
    • ColorfulBox
    • Conoha WING
    • mixhost
    • さくらのレンタルサーバー
    • エックスサーバー
    • エックスフリー
    • ロリポップ!
  • 便利ツール
WordPress学習方法
トップページへ

プライバシーポリシー|お問い合わせ
Copyright © 2023 FOXWP All rights reserved.