これで解決!スタイルシート(CSS)が反映されない原因と対処方法まとめ

スタイルシート(CSS)が反映されない原因と対処方法

このサイトでアメブロとかSeesaaブログとかWordPressのカスタマイズ書いてるのですが、カスタマイズ系の記事って質問コメントがめっちゃくちゃ多いです。

コメント数12月

↑自分が返信した分もありますし、全てがカスタマイズ系の記事へのコメントではないんですが、それでもカスタマイズ記事への質問多いです。

そんなカスタマイズ系の記事で多いのが「スタイルシート(CSS)記述したけど反映されない!原因は何でしょう?」という質問です。

また今後もこういう質問来るかなと思うので一度記事にしておく事にしました。

↓有料だけど個人的におすすめ↓

CSSが反映されない原因別の対処方法

ほんとに特殊な例を除いて基本的には次のような原因があります。

  • CSSの記述ミス
  • CSS記述する場所間違ってる
  • キャッシュが残っている
  • 別のコードが優先されていてCSSが反映されない

1.CSSの記述ミスが原因の場合の対処方法

これは一番最初の確認事項ですが、そもそもCSSの記述にミスがないか確認します。

今回新規に追加した記述の部分だけでなく、以前に追加した記述にミスがあるって場合もかなり多いです

以前に追加した記述で記述ミスがある場合は、それ以降のCSSが効かない場合があります。以前の記述なので気が付かない事が多いです。

そのため、反映されないcssの記述をCSSの一番最初に追加して反映されるか確認します。

CSSの一番最初の方に追加して反映される場合は以前の記述にミスがある可能性が高いです

以前に追加した記述で記述ミスがないか確認。特に閉じタグ「 } 」がない場合が多いのでチェックしてみて下さい。

よくある記述ミスのランキング!

よくある記述ミスをランキングにしてみました。私がやらかす順でランキングしてます。

  1. 閉じタグ「 } 」が抜けてる
  2. 「;」と「:」を間違っている
  3. 半角ではなく全角スペースになってる
  4. 「”」と「”」など全角になっているミス
  5. プロパティや値のスペルミス

半角と全角問題は結構あります、特にスペースの半角と全角などは本当にウォーリーを探すよりも難しいときがあります

2.CSSを記述する場所が間違っている場合

スタイルシート(CSS)は後から書いたもの(下に書いたもの)が優先的に反映されます。

同じ記述が複数重複するのは問題ないですが、反映されるのは後から書いたものです。

「.entry-content p」の「font-size(文字の大きさ)」が2回記述されてますが、反映されるのは後から書いた「12px」の方です。

なので基本的にCSSを記述する場合はCSSの一番下(最後)に追加して行けばOKです。

一番下に追加してみてCSSが反映されないならそれはその記述、もしくはそれ以前の記述にミスがある可能性があります

3.ブラウザにキャッシュが残っていて反映されない場合と対処方法

ブラウザにキャッシュ(以前のデータ)が残っているためにCSSが反映されない事があります。

キャッシュを消したりする前にまずはリロード(再読込み)して確認してみます。

  • Windowsの場合:[F5]キーを押す。
  • Macの場合:[Command]キーと[R]を押す。

これでリロード(再読み込み)をする事ができるので試してみて下さい。また、それでも反映されない場合は次の手順も試します。

  • Windowsの場合:「Ctrl」と一緒に「F5」を押す。
  • Macの場合:「Command」と「Shift」と「R」を一緒に押す。

こっちは強制再読み込み(スパーリロード)。

リロードしても上手く反映されない場合は一度別のブラウザで確認するか、別の端末(スマホ・タブレット・PC)で確認してみて下さい。

別のブラウザや端末でCSSが反映されているならブラウザのキャッシュが原因と思われます

キャシュの消し方はブラウザによって違うので検索して調べてみて下さい。

4.別のコードが優先されていてCSSが反映されない

スタイルシート(CSS)で変更しても優先度が上の要素の影響を受けて変更が反映されない場合があります。

セレクタを詳しく指定した方が優先順位が高くなりますが、セレクタって何?という方が多いと思いますので、変更した記述に「!important」を付けてみて下さい。

こんな感じで、優先したい部分に「!important」を付けるとそれが優先されます

「!important」つけて反映されない場合はやはりCSSの記述ミスを疑います。

他の方のサイトのコードをコピペしている場合などはそもそものコードが間違っている事もあります(私も時々あります)。

WordPressのスタイルシート(CSS)で「×」マークがでる場合の対処方法

WordPressのスタイルシートはエラーチェック機能が装備されているので、「!」とか「×」マークで間違いをお知らせしてくれます。

WordPressでのCSSが反映されない

「!」マークは特に問題なくても表示される場合がありますが、「×」が出る部分は修正する必要がありますので、上記に書いた原因と対処を試してみて下さい。

特に問題ないと思っても上記のように「×」マークが表示される場合は次の事を試してみて下さい。

  • 全角のスペースを半角のスペースに変更
  • コメントアウトの部分を削除

全角スペースになっている部分を半角に変更

先程も書いたのですがスペース部分が全角になっている場合があります。

例)「font-size」の前の部分に全角のスペースを半角のスペースに変更。

WordPressでのCSSが反映されない場合の対処1

コメントアウト前後のスペースを削除してみる

/*〜*/の間に書かれた部分は「コメントアウト」。要はCSSの記述に自分なりのメモを残す事ができます。

このコメントが原因でなぜか「×」マークが付いている時がありますのがこれもコメントアウト前後のスペースが原因の事が多いです。

コメントアウト前後のスペースを削除してみるか一度コメントアウトの部分を削除sて「×」が消えるか確認してみて下さい

WordPressでのCSSが反映されない場合の対処2

以上スタイルシート(CSS)が反映されない原因と対処方法でした。

なお、コメント自体は大歓迎ですが、最近はホントに時間のある時だけしかコメントの返信できてませんのでご了承下さいませ。

最終更新日:2018/07/25

おすすめのASP
サイトのアクセスアップや稼ぐためにおすすめの無料レポート

個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。

ブログの更新はこちらから

これで解決!スタイルシート(CSS)が反映されない原因と対処方法まとめ”に23件のコメントがあります。

コメントの反映には時間がかかる場合があります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

  1. カラス

    しげぞう様

    カラスです。スパムあつかいになっていたら、すみません

    ◆以下をCSSに追加してみました。(相殺できてるのでしょうかね?)

    .entry_body p {
    margin-top:20px;
    margin-bottom:30px
    line-height:1.75;
    }

    もともと、私がえらんだテンプレートの幅が狭いので、見た感じには分かりにくいのですが、少し改善が見られたような気がします?

    今回もとても助かりました。ありがとうございます。

    そして、また教えて下さい。
    ちなみに、しげぞう様は、段落「br」タグは打ちますか?
    グーグル・クローラー的に、「br」タグは打たない方がいい、とある有名ブロガーさんがいっていたので、基本わたしは、改行「p」「/p」タグを打っています。

    そして、大きく段落をあけたいときには、「 p   /p 」であいだをあけている状態です。

    もし、ほかのお薦め簡単タグがあればアドバイスいただけるとうれしく思います。

    以上です。

  2. しげぞう 投稿作成者

    カラス様

    返信ありがとうございます。

    普通に改行したらpではなくてdivで区切られる感じですかね?

    全部でpタグを使うのは大変かもしれませんので、このそれぞれのdiv自体にmarginを設定した方が簡単かもしれません。CSSに以下を追加です。

    それぞれの文章がdivで区切られるようなので、それぞれのdivに余白をって感じです。数値は変更して大丈夫です。この場合は行間というか、段落間の余白って感じです。

    もしくは本当にすべてpタグを使って文章を書いていくのであれば以下をCSSに追加してみる感じになるかもしれません。ちょっと検証はしてませんが。

  3. カラス

    しげぞう様

    たびたびすみません

    どうぞよろしくお願いします

    以上です。

  4. しげぞう 投稿作成者

    カラス様

    コメントありがとうございます。最近FC2のブログは全く触ってないので、どんな感じのテンプレートがあるのかちょっと忘れてしまったのですが、FC2の場合はテンプレートの種類が多いので実際にブログを見てチェックする必要があります。基本的にCSSでline-heightを設定すればOKなんですが、pに対してline-heightを設定すればおそらくサイドバーとかフッターとかも影響を受けるかもしれません。

    要は記事中の「p」だけの対応をすればいいので、その要素を調べるためにブログのURLを教えてもらえると助かります。どうぞよろしくお願い致します。

  5. カラス

    しげぞう様

    カラスです。お世話になります

    今回、FC2で、サイトを立ち上げました。
    ですが、ワードプレスほどテンプレートのカスタマイズが効かなくて困っています。
    さすがに、それは仕方ないですね。ある程度、妥協しています。

    しかし、行間だけはあけたい、と思っています。
    ( p で改行したいだけです)

    基本、line height の存在しないテンプレートが多いのですが、
    そういう場合は、プラスで、CSSに何か記述しないといけないでしょうか?

    いろいろ検索しても、これといった答えがなく難しいものが多いように感じます。

    br を連打するのも気がひけるので、何か方法があるようであればぜひ教えて下さい。

    ちなみに私は、Macです。

    以上です。

  6. しげぞう 投稿作成者

    >PoN様

    コメントありがとうございます。私自身が結構アナログ派なので、PCの操作自体も詳しく知らない事が多いんです(笑)。正直言うとブログを始めた2012年までPCすら持ってませんでしたので、今でも時々苦労することがあります。スタート地点が他の方よりずっと後ろからのスタートした感じでしたので、忘れないようにメモ代わりにブログ書いている感じですが、それでコメント頂けるのが嬉しいです。ありがとうございます。