初心者の為のWEB開発

WordPressの追加cssが反映されない?効かない時の解決方法

※当サイトはPR(プロモーション)を含みます。

WordPress 追加cssが反映されない?効かない時の解決方法 初心者の為のWEB開発

WordPressを使い始め「追加css」を覚え始めてゴリゴリ改良しているそこのアナタ!

cssちゃんと反映されていますか?

ファズ
ファズ

Hello!ファズです

今回はWordPress初心者にありがち「追加css」が反映されない問題について原因や解決方法をまとめていきたいと思います!

  • cssを書いたけど反映されない
  • 記述が間違ってるらしいけどどこかわからない
  • どこが原因で効いていないのかわからない
  • 確認するポイントが知りたい

上記について知りたい方は是非参考にしていってください!

さて、さっそく結論からいうと

  • cssファイルのパス指定ミス
  • cssのオーバーライド
  • 重要度と優先度
  • テーマの更新
  • セレクタor追加コードの記述ミス
  • 指定したい範囲に適用されていない
  • キャッシュの影響

パッと思い浮かぶのはこれら8つの原因が浮かびますね!

書き方や場所によって特殊なケースになることもあるんですが、主に原因は上記の7つ。

下記で原因をそれぞれ解説&解決方法も紹介していきます!

本記事の説明は専門文言が出てくるので、下記を把握した上で読んでもらえるとわかりやすいです。

セレクタとは?

セレクタ:アイディーやクラス名、タグなどを示すcssの記述箇所のこと。下記の例だと.textの部分を指します。

.text {
  font-size: 20px;
}

そもそもcssについて全く知らない方は、先に「【CSSとは?】初心者向けに読み方や書き方を簡単にお伝えします!」の記事をご覧ください。

ファズ

Hello!ファズです。

◆仕事関連 WEB制作4年:「WordPress/WEB制作」
◆インドア趣味:アニメ好き歴10年/ガンプラ購入数十種以上!
◆生活品:ソイプロテイン常用2年、試した数十数種

↑インドア多趣味の実際に試した内容の記事を紹介していきます。

※当サイトはリンクフリーですが「出展元」として記載をお願いします!

ファズをフォローする
wordpressのおすすめテーマ
WordPressのテーマ選びでお悩みの方必見!

【初心者におすすめの記事】

◆おすすめ有料テーマが知りたい
◆「集客」や「収益」をあげたい
◆テーマを選ぶポイントが知りたい
◆初心者でも使いやすいテーマが知りたい

①cssファイルのパス指定ミス

【原因】

外部cssファイルを追加した場合

新しくcssファイルを作成し、WordPressに読み込ませた場合に起こる単純な「ファイルパス」の指定ミスですね。

確認方法

いくつか方法はありますが、ぼくがよく行なう簡単な方法はパスを「辿る」もの。

手軽ですぐできるのでおすすめ!

【確認手順】

  1. ページ上で「Ctr+U」でソースコードを表示
  2. 追加したcssファイルのファイル名で検索「Ctr+F」
  3. cssファイルがリンクになっているので、それをクリック
  4. クリック後cssページに遷移するかチェック

「Ctr+U」でソースコードを表示して「Ctr+F」でファイル名を検索。

この段階でcssが検索できないならcssが出力されていないのでそもそもをチェックする必要があります。

解決方法

パスが間違っているのでページにcssが読み込まれず反映されていないだけなので、正しいパスを指定してあげるだけで解決できます。

ページにちゃんと繋がれば追加したcssファイルの中身が下画像のように表示されるはずです。

②cssのオーバーライド

原因

追加cssのクラス名が被っている

オーバーライド・・・なんて書かれてもわからないですよね(笑)

簡単に言えば、同じcssの名前で上書きされている状態。

例えば下記のような感じ。

/*最初に書かれたスタイル*/
.text {
  font-size: 10px;
}

/*最初に書かれたスタイル*/
.text {
  font-size: 20px;
}

上記例では同じクラス名が指定されていますが、font-sizeの値に注目。

cssは上から順番に読み込まれるので、だと上側が最初に読み込まれ、それから下側が読み込まれます。

同じクラス名で追加してしまうと「プロパティ」や「値」が違う場合上書きされてしまうということ。

WordPressだと「追加css」に記述した内容は設計上先に読み込まれることがあります。

なので、WordPressですでに使用されているクラス名を追加ccsで指定してしまうと上書きされます!

確認方法

それでは解決策の提案!・・・の前に確認方法。

実際オーバーライドされているかどうかを確認する必要があるので、その確認ステップから!

【確認手順】

  1. 右クリックのメニューから「検証」or「F12」でデベロッパーツールを開きます
  2. タブの中から「Elements」を選択
  3. htmlとcssが表示されるのでcssをチェック
  4. 優先度を確認

※デベロッパーツールの表示はいくつかパターンがあるので表示が違うことがあります。

①ページ上で右クリックかF12を押してデベロッパーツールを開いてください。

②「Elements」タブを選択し、「Style」タブを選択。
③赤枠をクリックし、要素を選択できる状態にしてみたい要素にカーソルを合わせてクリック。

上画像のように、先に「font-size:10px;」指定後、「font-size:20px;」が再度指定されて上書きされているのがわかると思います。

このように、指定した要素に追加cssを記述した場合打ち消されているか確認してみてください。

解決方法

優先度を上げる

方法はシンプルですが、ぶっちゃけちょっと面倒。

オーバーライドされてしまう場合、cssの読み込み順を入れ替えるか、セレクタの読み込み優先度を変更すれば済むんですが・・・優先度を変えすぎると管理が難しくなるので多用するのはちょっとおすすめしません。

【方法】

  • セレクタを変えて優先度を変更する
  • プロパティの優先度を変更する

セレクタを変える方法を下記例で示します!

サンプル

/*最初に書かれたスタイル*/
.text {
  font-size: 20px;
}
/*後に書かれたスタイル*/
p.text {
  font-size: 10px;
}

例ではクラス名の前に「pタグ」を追加したセレクタを指定記述することで優先度をあげることができます。

「pタグに書かれた.textの対象をフォントサイズ10pxにする」という感じですね。

【セレクタ指定の優先順位一覧】

  • インラインスタイル
  • IDセレクタ
  • クラスセレクタ・属性セレクタ
  • 要素セレクタ
  • 結合子

③重要度と優先度

原因

優先度で負けている

②で先述した「オーバーライドする場合の解決方法」ですね!

先述した通り、セレクタ指定は優先度があり記述方法も様々。

もしセレクタの優先度を上げて記述して追加cssで変更を加えたいなら優先度の把握が必要ということですね。

確認方法

確認する方法は②と同じで、デベロッパーツールをチェックしたらOK!

【確認手順】

  1. 右クリックのメニューから「検証」or「F12」でデベロッパーツールを開きます
  2. タブの中から「Elements」を選択
  3. htmlとcssが表示されるのでcssをチェック
  4. 優先度を確認

解決方法

原因が優先度なら解決方法は簡単。より「強力な優先度の高い記述をすればいい」です。

ただし、優先度の高い指定は意図的にされているので、それなりに意味が必ずあります。もしそこまでよくわからないということであれば、基本いじらない方がベスト。

どうしても変更したいというケースだけ下記を参考に優先度を上げて指定してみてください。

【セレクタ指定の優先順位一覧】

  • インラインスタイル
  • IDセレクタ
  • クラスセレクタ・属性セレクタ
  • 要素セレクタ
  • 結合子

上記が優先度の高い順の記述。

【インラインスタイル指定

<p style="color: red;">This is a red paragraph.</p>

【IDセレクタの指定

#myElement {
  color: blue;
}

【クラスセレクタ・属性セレクタの指定

/*クラスセレクタ*/
.myClass {
  font-size: 16px;
}
/*属性セレクタ*/
[type="text"] {
  border: 1px solid black;
}

【要素セレクタの指定

p {
  margin: 10px;
}

【要素セレクタの指定

div p {
  color: green;
}

【!important指定

p {
  color: purple !important;
}

あと、プロパティの値に対して「!important」を指定することで「最優先」の指定を行なうことができます。

「!important」はプロパティレベルでの指定になり、簡単に指定を強制できますが、不用意に使いすぎて数が増えたり、重要なセレクタに指定してしまうと管理が困難になっていくので注意!

④テーマの更新

原因

テーマが最新でない場合

使用しているテーマが最新でない場合、要素に設定されているクラス名が変更されている可能性があります。

特に「今まで効いていたcssが反映されなくなった!」ということは仕様が変わった可能性が高いので要チェック!

確認方法

確認はソースコードかデベロッパーツールでクラス名を検索すると探すことができます。

検索でヒットしない場合変更されていると判断していいかも。

詳しく見るには②で紹介したデベロッパーツールで要素を指定してチェックしてみてね!

解決方法

解決方法はシンプル!追加cssで書き込んだクラスの記述を変更されたものにあわせればOK!

⑤セレクタ or 追加コードの記述ミス

原因

書いたコピペしたコード整合性問題

追加cssを書いて反映されないケースで多いのがこのパターン。

一番単純な原因ですが、個人的に一番見つけにくい・・・。

確認方法

以下2つの方法で探すことができますね。

  1. 目視でのチェック
  2. デベロッパーツールでのエラーチェック
目視でのチェック

特にクラス名に関しては自分で決定しているので、整合性は確認する必要があります。記述したテキストがちゃんと合っているのか確認してみてください。

【ポイント!】
①「セレクタ名を間違えていないか」・②「指定対象があっているか」の2点が重要。

デベロッパーツールでのエラーチェック

セレクタは自分で決めているので目視しか方法がありませんが、内容である「プロパティ」と「値」に関してはデベロッパーツールを使うと簡単にチェック可!

右クリックで「検証」 or 「F12」でデベロッパーツールを開き、「Elements」タブを選択。

要素を指定すると「Style」欄に指定されているcssが表示されるので確認!もし記述ミスで間違っている場合プロパティに線が引かれてエラーが出ていることがわかります。

解決方法

正しいテキストに修正する

解決策としてはこれだけですね!

どこがダメなのかをしぼるまでがちょっとメンドクサイですが、見つけてしまえばすぐに修正できると思います。

⑥指定したい範囲に適用されていない

原因

コピペしたコード範囲指定されている

追加cssを追記する場合、特に初心者はコードをコピペして利用することが多いと思います。

この時、コピペするコードがそもそも「範囲を指定したコード」の場合反映されない可能性が出てきます。

例を挙げると、例えばブログ!

ブログのメインは記事の投稿で、そこに変更を加えたくなることがあると思います。装飾の為下記コードをコピペして使った場合どうなるのか?

.page .text {
  font-size: 16px;
  background: #3c3c3c;
  color: #ddd;
  text-align: center;
}

結果から言うと反映されません!!

理由はセレクタ冒頭に書かれている.pageのクラス名。

.pageは「固定ページ全体を囲む親要素」で上記の指定だと「固定ページ内にある.textに対して装飾をする」という命令となります。

つまり、投稿ページは「指定外」ということ。

こういう風に範囲を絞った指定をしたコードでは反映されないことがあるので、専門化でないブロガーさんがテーマの紹介をしているような記事を参考にする時は注意。

確認方法

範囲の確認は追加するcssのセレクタを見ればOK!

もしページ単位のセレクタが指定されている場合、すべてのWordPressで共通のクラスが使用されています。

【主なページに採用されているクラス名】

.home{}/*TOPページ*/
.page{}/*固定ページ*/
.single{}/*投稿ページ*/

コピペコードがどこからセレクタを指定するかわからないので、上記はあくまで参考!例に記した3つのセレクタ名以外であれば頭のセレクタをソースコード上で検索してみると見つかると思います。

解決方法

解決策としては・・・「親セレクタを削除する」で良いと思います。

/*コピペ元コード*/
.page .text {
  font-size: 16px;
  background: #3c3c3c;
  color: #ddd;
  text-align: center;
}

/*親セレクタを削除したコード*/
.text {
  font-size: 16px;
  background: #3c3c3c;
  color: #ddd;
  text-align: center;
}

こうするだけでOK!

ただし、親セレクタがない場合はすべてのページが対象になるのでそこも留意

もし、特定のページ内で反映したいならブロックエディタ内で全体を囲むdivを用意してクラス名を付与。後に.textの前に追加divに書いたクラス名をセレクタとして記述することで範囲を絞ることができます。

詳しいやり方は「追加cssどこ?ブロックエディタでcssを利用する方法【WordPress】」の記事でも紹介しているので参考にどうぞ!

⑦キャッシュの影響

原因

キャッシュが蓄積しリセットされていないケース

最後に紹介するのは、1番あり得る「キャシュデータが残っている」ですね!

各ブラウザにはページの読み込み速度を向上させるためにキャッシュという一時データを保管する機能があります。

再訪問する際に以前取り込んだデータを使うことでロード時間を極力短くする仕組みなんですが、キャッシュデータが古いまま蓄積されることがあります。

確認方法&解決策

キャッシュデータが古いかどうかは基本確認するより、解決策を同時に実行した方が早いです。

やり方はショートカットによる

  • データの更新
  • キャッシュデータを削除+リロードする
  • ブラウザのキャッシュを無視してサーバーから再ロードする
  • キャッシュを削除しつつ再リロードする

上記の方法が一般的。やり方は下記の記事でまとめているので参考にどぞっ!

WEB必須知識!キャッシュのクリアやスーパーリロードのショートカット紹介

キャッシュの削除は最後に紹介しましたが、基本的には「反映されない!」という時は早い段階で実行して確認してみてください。

キャッシュの対応後、それでも反映されないならなんらかの記述ミスの可能性が高いですね。

キャッシュはサーバー側にもあり、ここが古い場合も反映されないということは起こりますが、ユーザー側で出来ることはないので、基本的には自然に更新されるのを待つ。

WordPressの追加cssが反映されない?【まとめ】

以上、「追加css」が反映されない原因と確認方法、そして解決方法をそれぞれまとめてきました!

css・・・簡単であり奥深い言語で、プロでも保守に工夫や手間がかかるもの。今回「追加css」に限定して反映されない原因をあげましたが、正直ケースバイケース。

初心者の方は「どうしても変更したい!」・「差別化したい」ということでなければ、過度な変更は加えないよう注意した方がいいと思います。

気づくとあらぬページに影響が出ている可能性も十分あるので編集後は確認するようにしてください!

ファズ
ファズ

今回はここまで!

ありがとうございました~

コメント

タイトルとURLをコピーしました