style.cssを使っていると「なぜ！？」ということに遭遇する機会は多々あります。
中でも、よくあるのは……
書いた内容が反映されてないぞ！
…というタイプ。
CSSファイルを確認しても、きちんとコードは記述しているのに表示されないんですよね。
こういった場合、どこが悪いのか判明させなければなりません。
該当しそうなことを挙げましたので、一つずつ打ち消して原因究明に役立ててください。
表示されない原因は…
- キャッシュが残っている
- コードが間違っている
- 指定している場所が違う
- クラス名がダブっている
- 親テーマで!importantされている
- 思い通りに反映しない場合
No.1の原因
キャッシュが残っている
CSSを編集した後に表示されない原因として、最も多いのがこの事例です。
これまでの作業記録（操作した内容）
一定容量に達すると削除されるようになっている
解決方法はもちろんキャッシュのクリア。
クリックひとつで解決するかもしれない最も楽な原因ですので、とりあえず一番初めに試してみてください。
アドレスバーの右端にある （縦三点リーダー）をクリック。
「設定(S)」→ 画面の最下部「詳細設定」→「閲履歴データを消去する」をクリックするとキャッシュが削除されます。
これは個人的感覚ですが、Internet Explorerでそれほどキャッシュを意識していなかったのに、Chromeに変えてからキャッシュクリアする機会が多くなりました。
もし頻繁にクリアする人は「設定」からクリアするのではなく、キャッシュクリアボタンをツールバーに配置するとワンクリックでキャッシュがクリアできるようになりますよ。
下記にある「Clear Cache」の画像をクリック。Chrome拡張機能のページが開きます。
出てきた画面の右上にある「Chromeに追加」をクリックすると、その後の画面で“追加しますか？”と聞かれるので、もちろん「追加」をクリック。
これにより、ツールバーへこんな キャッシュクリアボタンが追加されます。
ボタンが配置されたら、クリアしたい時にポチッとクリックするだけ！
ワンクリックで出来るようになる、とても便利な拡張機能です。
ありがちな原因
ソースコードが間違っている
コードは僅かな間違いでも反映されなくなります。
解決方法はきちんと確認すること。
たとえば記号が半角英数字になっているか、最後の;や}を忘れていないか、「投稿」に記述しているコードは正しいか等、手入力の時はもちろん、コピペした場合も信じきらずによくコードを確認してください。
初心者っぽい原因
そもそも指定している場所が違う
反映したい場所ではない部分を記述していることは、初心者ならではかもしれませんね。
私自身、Chromeの「Developer Tools（検証）」で要素を調べて記述したにも関わらず、こういうことが多々あります。
解決方法は適用させたい場所周辺にも目を移すこと。
「まさかここも名前に含まれるの？」という時もあるので、適用させたい場所の前後も確認して記述してみてください。
また、「本当は調べている場所自体が違った」なんてこともあるので、そもそもの場所を明確にするためにも、あえて周辺箇所をstyle.cssで変更、反映させてみるのも手ですよ。
陥りやすい原因
クラス名がダブっている
style.cssの内容を引っ張り出すために必要なclass名。
<div class=“名前”>で言う、“名前”に当たる部分ですね。
これが他の名前と重複していると、Webサイトにデザインが反映されません。
解決方法は名前をかぶらせないこと。
無意識にこの現象を引いてしまうのが、コピペした時です。
下線や囲み線などのCSSコードをWebサイトからコピペしたまま使うと、既に自分のWebサイトで使っている名前だったせいで表示がおかしなことになってしまいます。
class名は1つのデザインに1つずつ。
重複している名前がないか、今一度確認してみましょう。
まれにある原因
親テーマで!importantされている
主にWebサイトの構成へ変更を加える時に出くわす原因です。
テーマ制作者が「ここを変更したらデザインが崩れる」という部分に、!importantという条件を付けてCSSを記述している場合があります。
!importantはこの記述を最優先するという意味ですので、親テーマのCSSファイルで!importantが付いた記述をしているコードなら、子テーマで通常通りに変更を記述しても反映されません。
たとえば、私が使っているテーマ「Adventurous」のCSSファイル「responsive.css」には、こう記されています。
.mobile-menu li ul {
display:block !important; padding-left:10px; visibility:visible !important;
}
このコードの場合、!importantが付いている「displayをblock」と「visibilityをvisible」は子テーマのstyle.cssでカスタマイズすることが難しいというわけです。
解決方法は諦めること。
絶対に出来ないわけではないのですが、少々難易度が高くなります。
余程のことがない限り、!importantが付いている場所をカスタマイズするのは避けた方が無難です。
表示されるけど…
思った通りに反映してくれない時
「こんな場所に余白を作っていないのになぁ…」という時はありませんか？
もしかすると、「投稿」のモードに原因があるかもしれません。
もしビジュアルモードで入力している場合、WordPressによるコードの入力補助（改行や段落などを自動挿入してくれる）ので、自分が思っている通りの表示にならないことがあります。
解決方法はテキストモードに切り替えて作成すること。
そしてテキストモードで入力を始めたら、極力ビジュアルモードに切り替えないようにしてください。
再びテキストモードへ戻した時に、意図しないコードを挿入されてしまう場合があります。
これによって望んでいない余白が出来たり、読み込み速度が遅くなったりします。
ビジュアルモードは分かり易い機能ですが、style.cssに入力したコードまではプレビューしてくれませんし、どうせならテキストモードを使ってプレビューボタンで確認することをお勧めします。
さらに、
ビジュアルモード・テキストモード共にある、入力画面の省略ボタンは慎重に使用してください。
表記しているコードと少し違う意味合いのコードを使用するものがあります。
Bやbと書いてあるボタンを押すと、<b></b>ではなく<strong></strong>で囲う。
<strong>も<b>と同じく太字表示ではあるのですが、<strong>を使いすぎるとGoogleからペナルティを受けます。検索結果の上位に表示されなくなってしまうので、箇所を考えて使用してください。
ボタンでコードを放り込む際は、目的のコードと一致しているかよく確認しましょう。
いかがでしょうか。
これで反映されない原因が絞れて解決できればいいのですが…。
どうしても分からない時は、他のデザインに変えたり、触らないままにするのも一つです。
自分のWebサイトなら「これじゃなきゃダメ！」ということもないはずですので、難しく考えず、ゆる～く乗り越えていきたいものですね。
次回からは時短効果抜群のCSSコードをご紹介していきます！
Webサイトの彩りにご活用ください。
デベロッパー
CSSをコピペで下線
ご覧いただきありがとうございました！
