このサイトでアメブロとかSeesaaブログとかWordPressのカスタマイズ書いてるのですが、カスタマイズ系の記事って質問コメントがめっちゃくちゃ多いです。
↑自分が返信した分もありますし、全てがカスタマイズ系の記事へのコメントではないんですが、それでもカスタマイズ記事への質問多いです。
そんなカスタマイズ系の記事で多いのが「スタイルシート（CSS）記述したけど反映されない！原因は何でしょう？」という質問です。
また今後もこういう質問来るかなと思うので一度記事にしておく事にしました。
目次
CSSが反映されない原因別の対処方法
ほんとに特殊な例を除いて基本的には次のような原因があります。
- CSSの記述ミス
- CSS記述する場所間違ってる
- キャッシュが残っている
- 別のコードが優先されていてCSSが反映されない
１．CSSの記述ミスが原因の場合の対処方法
これは一番最初の確認事項ですが、そもそもCSSの記述にミスがないか確認します。
今回新規に追加した記述の部分だけでなく、以前に追加した記述にミスがあるって場合もかなり多いです。
以前に追加した記述で記述ミスがある場合は、それ以降のCSSが効かない場合があります。以前の記述なので気が付かない事が多いです。
そのため、反映されないcssの記述をCSSの一番最初に追加して反映されるか確認します。
CSSの一番最初の方に追加して反映される場合は以前の記述にミスがある可能性が高いです。
以前に追加した記述で記述ミスがないか確認。特に閉じタグ「 } 」がない場合が多いのでチェックしてみて下さい。
よくある記述ミスのランキング！
よくある記述ミスをランキングにしてみました。私がやらかす順でランキングしてます。
- 閉じタグ「 } 」が抜けてる
- 「;」と「：」を間違っている
- 半角ではなく全角スペースになってる
- 「”」と「”」など全角になっているミス
- プロパティや値のスペルミス
半角と全角問題は結構あります、特にスペースの半角と全角などは本当にウォーリーを探すよりも難しいときがあります。
２．CSSを記述する場所が間違っている場合
スタイルシート（CSS）は後から書いたもの（下に書いたもの）が優先的に反映されます。
同じ記述が複数重複するのは問題ないですが、反映されるのは後から書いたものです。
1 2 3 4 5 6 7 8 9 10 11 | .entry-content p { font-size:16px; } .box { margin:20px 0; } .entry-content p { font-size:12px; } |
「.entry-content p」の「font-size（文字の大きさ）」が２回記述されてますが、反映されるのは後から書いた「12px」の方です。
なので基本的にCSSを記述する場合はCSSの一番下（最後）に追加して行けばOKです。
一番下に追加してみてCSSが反映されないならそれはその記述、もしくはそれ以前の記述にミスがある可能性があります。
３．ブラウザにキャッシュが残っていて反映されない場合と対処方法
ブラウザにキャッシュ（以前のデータ）が残っているためにCSSが反映されない事があります。
キャッシュを消したりする前にまずはリロード（再読込み）して確認してみます。
- Windowsの場合：[F5]キーを押す。
- Macの場合：[Command]キーと[R]を押す。
これでリロード（再読み込み）をする事ができるので試してみて下さい。また、それでも反映されない場合は次の手順も試します。
- Windowsの場合：「Ctrl」と一緒に「F5」を押す。
- Macの場合：「Command」と「Shift」と「R」を一緒に押す。
こっちは強制再読み込み（スパーリロード）。
リロードしても上手く反映されない場合は一度別のブラウザで確認するか、別の端末（スマホ・タブレット・PC）で確認してみて下さい。
別のブラウザや端末でCSSが反映されているならブラウザのキャッシュが原因と思われます。
キャシュの消し方はブラウザによって違うので検索して調べてみて下さい。
４．別のコードが優先されていてCSSが反映されない
スタイルシート（CSS）で変更しても優先度が上の要素の影響を受けて変更が反映されない場合があります。
セレクタを詳しく指定した方が優先順位が高くなりますが、セレクタって何？という方が多いと思いますので、変更した記述に「!important」を付けてみて下さい。
1 2 3 | ●● { margin-right:0px !important; } |
こんな感じで、優先したい部分に「!important」を付けるとそれが優先されます。
「!important」つけて反映されない場合はやはりCSSの記述ミスを疑います。
他の方のサイトのコードをコピペしている場合などはそもそものコードが間違っている事もあります（私も時々あります）。
WordPressのスタイルシート（CSS）で「×」マークがでる場合の対処方法
WordPressのスタイルシートはエラーチェック機能が装備されているので、「！」とか「×」マークで間違いをお知らせしてくれます。
「！」マークは特に問題なくても表示される場合がありますが、「×」が出る部分は修正する必要がありますので、上記に書いた原因と対処を試してみて下さい。
特に問題ないと思っても上記のように「×」マークが表示される場合は次の事を試してみて下さい。
- 全角のスペースを半角のスペースに変更
- コメントアウトの部分を削除
全角スペースになっている部分を半角に変更
先程も書いたのですがスペース部分が全角になっている場合があります。
例）「font-size」の前の部分に全角のスペースを半角のスペースに変更。
コメントアウト前後のスペースを削除してみる
/*〜*/の間に書かれた部分は「コメントアウト」。要はCSSの記述に自分なりのメモを残す事ができます。
このコメントが原因でなぜか「×」マークが付いている時がありますのがこれもコメントアウト前後のスペースが原因の事が多いです。
コメントアウト前後のスペースを削除してみるか一度コメントアウトの部分を削除ｓて「×」が消えるか確認してみて下さい。
以上スタイルシート（CSS）が反映されない原因と対処方法でした。
なお、コメント自体は大歓迎ですが、最近はホントに時間のある時だけしかコメントの返信できてませんのでご了承下さいませ。
WordPressナビゲーションメニューのカスタマイズ
スマホのアプリ紹介ツール「アプリーチ」の使い方とカスタマイズ
アフィリエイトリンクをボタン化する方法
サイト作成で個人的によく使う蛍光マーカー、ボックス、その他CSSまとめ
のりこ様
返信ありがとうございます。見出しがテキストっていうのは多分見出しとは別に「h3」とかがテキストとして表示させるか？という事だと思います（違ったらすみません！）。これは表示されませんので大丈夫です。あくまで装飾されていない状態というだけで、見出しとしては認識されます。
しげぞうさま
お返事ありがとうございます。
やはり無料ブログサービスの場合、カスタマイズするのに面倒な面というか、複雑な面があるのですね…。
装飾せずに、見出しをつける場合は、投稿するときにテキストでつくのでしょうか？
なんだか頭がフリーズして、何を質問してるのかも分からなくなっています( ω-、)
すいません…。ありがとうございました。
のりこ様
返信ありがとうございます。のりこ様の言われるようにスマホのデザインは別になってます。デザイン⇒スマートフォンのタブを選択⇒デザイン設定⇒デザイン名と進むとスマホのCSSへ行けます。
CSSなどで装飾する場合にはHTMLで指定された名前が必要になります。たとえばヘッダーとかフッターとか細かい部分までサイトの部分部分に名前を付ける作業がHTMLとイメージしてもらったらOKです。それで名前を付けた部分を装飾するのがCSSで、それぞれHTMLで付けた名前を元に装飾します。「ヘッダーは赤！」「フッターは白」みたいな感じです。
さて、Seesaaブログの場合、スマホ版とPC版ではデザイン（テンプレート）が別になっているため、HTMLで割当られた名前が違います。
今回の例で言うと見出し（h3）がPC版だと「.article.article–entry h3」ってしてましたが、スマホ版だと「h3」だけです。なのでスマホのCSSで「.article.article–entry h3」ではなく、「h3」で装飾の記述をすると反映されるかと思います。ただ、スマホのデザインによってこの部分の名前が違う場合もあるかもしれません。
それから本当はPC版のように「.article.article–entry h3」のように名付けるのが良いのです。なぜなら見出し以外の部分にも「h3」を使っている部分があるからです。
先程スマホの見出しの装飾はh3と書きましたが、スマホの装飾をh3でやってしまうと関連記事のタイトルとかにも影響するかと思います。これはちょっとやりずらいです。
しげぞうさま
以前に、自由形式の設置で質問した者です。
その節は、お世話になりありがとうございました。
今回は、見出しの挿入をしたく質問します。
設置についての流れは理解できましたが、スマホから見ると見出しの装飾が反映されません。
カスタマイズする歳に、PCとスマホは別なのはわかるのですが、スマホ表示で見出しを反映させるには、どのようにすればよいのでしょうか？
こちらのサイト内でさがしてみたのですが、見つけられませんでした。
お時間のございますときにでも、教えていただけると助かります。
よろしくお願いします。
カラス様
返信ありがとうございます。WordPressの場合は特にpタグを使わなくても自動的にpタグが入りますが、無料ブログなどの場合はこれがdivだったりpだったりしますね。確かにbrよりもpタグの方が正しい感じですが、これはそこまで気にする必要はないと思います。すくなくとも私自身はほとんど気にしてません。
無料ブログの時はbrで改行してた感じでしたが、きっちり狙ったキーワードでは上位表示できてましたし、今もそのまま上位で残ってますよ。タグよりもコンテンツ重視でOKと思ってます。