気を付けて。カスタマイズの落とし穴[初心者様向け]

この章は、CSSが正しく反映されない時に私が試した方法です。

私自身が初心者のため、自信をもっておすすめ出来る方法ではありません。
何をどうやっても解決しない場合の最終手段としてお試しくださいませ。
※まずは専門知識のある方の情報を参考に対処されることをお勧めします

クリックできる目次

やり過ぎ注意
情報はあれど…
まとめ

やり過ぎ注意

少し慣れてきてカスタマイズが楽しくなると、あれもこれもやりたくなってしまうのは私だけでしょうか(遠い目)。

あれもこれもやるということは、追加CSSやテーマファイルエディターのstyle.cssにたくさんのコードを貼りつけるということ。

するとどうなるかと申しますと…

こうなります。

必ずと言っていいほど「コードは間違ってないのになぜ表示されないのだ！」という謎にぶち当たります。

初心者あるあるですね。

情報はあれど…

カスタマイズが反映されない時、調べるとまず出て来るワードは

・キャッシュの削除
・スーパーリロード

試しました。何度も。

でも直りません。

キャッシュできるものは全てキャッシュしまくりましたし、同時にcookieの削除もやったので、あちらこちらからログアウトしてしまって大変な思いをしたとかしてないとか。

目次へ戻る

CSS・HTMLの記述確認

・全角のスペースが入り込んでないか
・}の閉じ漏れ、記述漏れがないか
・コードそのものの文法が間違ってないか

私はCSSを作れないので、スペルの間違いは判別できてもコードそのものの正否は分かりません。

ですが全角スペースは不法侵入してませんでしたし、トイレの鍵の締め忘れはあってもカッコの閉じ忘れはありませんでした。

それにカスタマイズコードは、コピペOKの配布サイト様からいただいてペタっと貼り付けてます。

なのでコードが間違ってるとは考えにくいです。

目次へ戻る

デベロッパーツールで確認

何ですかそれ。

初心者の理解範疇をナメないでいただきたい。

専門用語を多用しないでくださいお願いだから。

でもやるしかないのでさらに調べます。

数時間後。

何とか理解できるレベルに到達し、デベロッパーツールを起動。

これはイジメですか？

これでもかと言わんばかりにぐぉおお～っと並び出て来たのが醤油ソースだということは分かります。

分かりますが、この文字列を目の前に、何がミスなのか何をどうすればいいのかさっぱり分かりません。

生まれて初めて、本気でプログラミングスクールに通いたいと思った瞬間でした。

結局、出っ歯ロバツールを起動しても何も分からず。

長年眠っていた往生際の悪さが目を覚まし、他に方法はないかとさらに調べ始めました。

目次へ戻る

環境によってCSSが効かないこともある

何これ新しい。

新しい情報が見つかった時って嬉しいですよね。

これで解決できるかもしれない！と貧相な胸を膨らませて、その記事を読みました。

キャッシュが古い → 古くないです
ブラウザの環境 → 他のブラウザで確認しても同じ結果
勘違い → あーそれかもしれない

あーそれかもしれないと思ったことが勘違いだったようで、結局この3つもダメでした。
(そもそも勘違いとはどういう…)

目次へ戻る

灯台下暗し。原因は記述の優先順位だった

当てはまりそうなものを手あたり次第取りかかってみたところ、他の記述が優先されているのが原因だったことが判明。

CSSが反映されないというキーワードで検索すると、ほとんどのサイト様が「他の記述が優先されている」可能性を挙げてらっしゃいます。

その事に気付きつつも、私には無理そうという思い込みで後回しにしてしまったのが、なかなか解決できなかった1番の原因でした。

他の記述を優先するとは

同じものを指定してるCSSコードがある場合、どのスタイルを反映させるべきかブラウザが混乱しないようにするためのルールで、詳細度と言う。

このルールが発動すると、より詳しく指定してあるコード(セレクタ)を優先して反映してしまうため、思ったように「カスタマイズが反映されない」エラーが起きる。

私のように、コピペしたコードをそのまま貼って使う場合などによく起きやすいトラブル。

このトラブルを解決するためには、記述の優先順位を修正しないといけません。

とは言え実際自分でCSSコードをいじるのは、なかなかに勇気が必要。

データにエラーが起きて、今までの苦労がパーになる可能性もあるので。

そのリスクを少しでも減らそうと、参考サイト様の記事を何度も読み砕いて…

そしてようやく「セレクタを詳しく記述する(※)」ことができ、「他の記述が優先されている(※)」トラブルを解決できました。

(※)詳細はこちら

CSSが反映されないエラーの対処法・「セレクタを詳しく記述する」とは

CSSが正しく反映されないエラーが起きた時に最も多いのが、記述の優先順位による原因です。希望通りにCSSを反映させるためには、指定した記述の優先順位を上げる(セレクタの点数を高くする)必要があります。そして優先順位を上げるためには、セレクタを詳しく記述する必要があるので…

(※)詳細はこちら

[初心者様向け]CSSが反映されない原因「他の記述が優先されている」とは

カスタマイズをしていると、よく遭遇するのが「思ったように反映されない」トラブル。CSSトラブルは、WordPress初心者の方はもちろん、有識者の方でも陥りがちなエラーのようです。色んな場所に色んな方法で記述されてるCSSだけに、競合が起きて、どのスタイルを反映させたら良いのかブラウザが混乱しないようにするために、あるルールに従って反映させる優先順位が決められています。

目次へ戻る

解決手順と方法

解決手順

①
追加CSSとstyle.cssに追加したCSSを全てPCのメモ帳にコピー

(バックアップの意)

追加CSS
ダッシュボード→外観→カスタマイズ→追加CSS
style.css
ダッシュボード→外観→テーマファイルエディタ→style.css(必ず子テーマを編集)
②
追加CSSとstylecss内にある、自分が追加したCSSを全て削除

自分が追加したCSSだけ消してください
③
メモ帳にコピーしたCSSの中から類似するセレクタのコードを抜粋し、違うメモ帳に貼り付ける
④
抜粋したコードのセレクタを変える

※下記参照
⑤
使用頻度の低いコードから順に追加CSSに貼り付けていく

※貼り終えたら保存→プレビューで確認
⑥
使用頻度が高めのコードはテーマエディターのstyle.cssに貼り付けていく

念のため、1番使用するコードは「テーマエディターのstyle.css」の1番最後に貼り付ける

※貼り終えたら保存→プレビューで確認
⑦
これでも正しく表示されないCSSは「自分には扱えないコード」と諦めて削除する