MENU
  • ホーム
  • プログラミング
  • ワードプレス
    • プラグインプラグイン関連記事
    • 賢威賢威のカスタマイズ
    • CSSCSSの関連記事
  • サイト情報
    • プライバシーポリシー
  • ツール
    • メルエディター
    • フリマスパイダー – 疾風
    • フリマスパイダー
    • -ポイ活くんα-
  • お問い合わせ
あらゆるモノにHackする、探究者の読み物。
Let's Hack Tech
  • ホーム
  • プログラミング
  • ワードプレス
    • プラグインプラグイン関連記事
    • 賢威賢威のカスタマイズ
    • CSSCSSの関連記事
  • サイト情報
    • プライバシーポリシー
  • ツール
    • メルエディター
    • フリマスパイダー – 疾風
    • フリマスパイダー
    • -ポイ活くんα-
  • お問い合わせ
Let's Hack Tech
  • ホーム
  • プログラミング
  • ワードプレス
    • プラグインプラグイン関連記事
    • 賢威賢威のカスタマイズ
    • CSSCSSの関連記事
  • サイト情報
    • プライバシーポリシー
  • ツール
    • メルエディター
    • フリマスパイダー – 疾風
    • フリマスパイダー
    • -ポイ活くんα-
  • お問い合わせ
  1. ホーム
  2. ワードプレス
  3. CSS
  4. ワードプレスで編集したCSSが反映されないときの、6つの解決方法

ワードプレスで編集したCSSが反映されないときの、6つの解決方法

2020 7/22
CSS
2019-05-02 2020-07-22
ワードプレスで編集したCSSが反映されないときの、6つの解決方法
目次

CSSが反映されない!

[char no=”2″ char=”わかめちゃん”]CSS編集したんだけど、サイトに反映されてねーんだけど…。なんで?[/char]

[char no=”1″ char=”かつをくん”]CSSが反映されない原因はいくつかあるけど、「大体コレ!」ってのを紹介しよう。[/char]

頑張って編集したCSSがなぜか反映されない。原因探しに更に時間がかかってしまいます。

こここの記事ではありがちなCSSが反映されないパターンを紹介します。覚えておくときっと時間の短縮に役立ちますよ!

パターン①:そもそもCSSセレクタが間違ってる

[char no=”2″ char=”わかめちゃん”]そんな凡ミスするワケねーだろ![/char]

[char no=”1″ char=”かつをくん”]いやいや、CSSが反映されない原因の過半数はこれやと思うで?割とマジで。[/char]

複雑なセレクタを指定している時ほど、このミスは起きやすくなります。

複数の指定先をカンマではなくドットで区切っていたり、子孫要素を指定しようとしているのに半角スペースが抜けていてand指定になっていたりと、落とし穴は割と沢山あります。

解決策:Google Chromeを使ってCSSセレクタを作成する

クロームのデベロッパーツールに、任意の要素のCSSセレクタをクリップボードにコピーするという機能が備わっています。

使い方を紹介します。

まずブラウザで編集するのサイトを開き、狙いたい要素の位置で[右クリック→検証]

開いたデベロッパーツールは右クリックした要素をすでに選択している状態だと思います。注意点として、狙いたい要素より深い子孫要素にフォーカスされている場合もありますので、きちんと確認しましょう。

更にその要素の位置で右クリックすると以下のような項目が出現します。

[Copy]の項目から[Copy selector]を選択。

すると、クリックボードに狙った要素のCSSセレクタがコピーされますので、後はペーストするだけです。

Chromeで作られるCSSセレクタは、ピンポイントでその要素単体を狙うためだけのものですので、例えばリスト要素すべてに反映させたいCSSなんかは少しセレクタを変更する必要があります。

[char no=”2″ char=”わかめちゃん”]便利な機能があるんだな。[/char]

[char no=”1″ char=”かつをくん”]結構、非効率なセレクタなんだけど、よくCSSを理解してないけど編集したいって人や、まだ慣れてないって人はこの方法で確認するのがイイかもね[/char]

パターン②:ブラウザキャッシュが残っている

ブラウザにはキャッシュと言う、一度見たサイトの情報の一部を記憶しておくという機能があります。

[char no=”2″ char=”わかめちゃん”]ブラウザキャッシュって邪魔だな![/char]

[char no=”1″ char=”かつをくん”]何回も同じサイトを読み込むと、その都度毎回、時間を取られるからね。表示を高速にするための一つの仕組みやね。[/char]

キャッシュによって、再度そのサイトを訪れた時は高速に表示することが可能になりますが、キャッシュからサイト情報が読み込まれるため、今行った変更が反映されない、というパターンがあります。

解決策:スーパーリロードを使う

ブラウザはただ更新ボタンを押しただけでは、基本的にキャッシュがあればそちらを優先して使うようになっているため、キャッシュを無効化(削除)する必要があります。

簡単な方法がこのスーパーリロード。

大抵のブラウザでは[ Ctrl + F5 ]ボタンで、キャッシュを無視して新たに情報を取得する更新の仕方が可能です。

パターン③:サーバーキャッシュが残っている

ブラウザと同じく、ワードプレスのキャッシュ系プラグインを使っている場合なんかは、こちらも該当するでしょう。

[char no=”2″ char=”わかめちゃん”]キャッシュって何種類もあるのか?[/char]

[char no=”1″ char=”かつをくん”]主にサーバー側のキャッシュは、ワードプレスみたいな、「動的にHTMLを表示する」サイトで使われることが多いな。[/char]

解決策:サーバーキャッシュの削除

キャッシュ系プラグインを使っているという方は、大抵の場合はログインした状態で表示される管理者ツールバーにサーバーキャッシュを削除するボタンが追加されているのでそこを確認しましょう。

パターン④:CSSの優先順位で負けている

編集しようとしている要素に、すでにテーマによって特定のCSSが指定されている場合があります。

場合があると言うより、ほとんどの場合、何らかのCSSが適用されていると思って間違いありません。

[char no=”2″ char=”わかめちゃん”]話がややこしくなってきたな。[/char]

[char no=”1″ char=”かつをくん”]ちゃんと確認する方法もあるから、紹介するな[/char]

適用されているCSSの確認方法

そもそも自分の書いたCSSが認識されているのか確認するには、先ほどと同じくデベロッパーツールを使います。

確認したい要素を選択すると、横にスタイルを確認する窓が開いていると思います。

優先順位で負けて、適用されていないプロパティには打消し線が入っていると思います。

更に右側にはそのCSSが記述されているファイル名と行数が書かれています。

この枠に自分の記載したファイル名と行数のCSSが見つからない場合は、そもそもブラウザが編集したCSSを認識していないということになりますので、原因は①~③番までのどれかの可能性が高いです。

解決方法:自分の書いたセレクタの優先順位を上げる

先に指定されているCSSプロパティを上書きしたい場合、強いルールでCSSセレクタを記述することで自分の編集したCSSを適用させることができます。

優先順位にはいくつかルールがあります。

優先順位のルール

  1. id指定 > クラス指定
  2. 後に記述 > 先に記述
  3. 深く指定 > 浅く指定
  4. 要素に直指定 > インライン配信 > CSSファイルで配信

このルールの中の何れかを使って、自分の書いたCSSの優先順位を上げる必要があります。

簡単なのは1番と3番です。

ルールの例

例えばこのような要素があり、

<div class="test_class1">
   <span id="test_id" class="test_class2">
      CSSセレクタ、強さの例
   </span>
</div>

現状のコードが以下のようなCSSで、自分の書いたコードより優先されている場合。

.test_class2{
   color: red;
}

クラス”test_class2”の文字色を青にしたいならば、以下のようにすれば優先順位で上回る事が可能です。

/*-----①番のパターンで解決-----*/
#test_id{
   color: blue;
}
/*-----③番のパターンで解決-----*/
.test_class1 > test_class2 {
   color: blue;
}

1番はidが振られている要素でない場合は使えませんので、3番の方が現実的ですね。

より上位の要素からあえてセレクタに指定してやることによって優先順位を上げることができます。

パターン⑤:CSSの適用条件を満たしていない

上に挙げた4つの確認を行って、セレクタも間違えていないし、キャッシュも残ってないはずなのに、まだ反映されない。そんな場合は、CSSの動作する条件が満たされていないパターンが多いです。

解決策:ググる

状況は多数ありすぎて、全てを紹介するのは不可能ですが、何故動かないのかはググれば大体出てきます。

  • ○○ 反映されない
  • ●● 効かない

CSSのプロパティ名を頭につけてググれば、ほぼ間違いなく解決策が出てきます。

[char no=”2″ char=”わかめちゃん”]結局ググらせるのかよ(笑)[/char]

[char no=”1″ char=”かつをくん”]いや、コレばっかりは状況が多岐に渡りすぎて、全部紹介するのは流石に無理や。スマン。[/char]

パターン⑥:ブラウザがそのCSSに対応していない

モダンなCSSを使いたい時にありがちなパターンですが、自身の使っているブラウザがそのCSSをサポートしていない事があります。

各CSSをサポートしているブラウザは以下のサイトで確認できます。

https://caniuse.com/

[char no=”2″ char=”わかめちゃん”]ブラウザによって使えるCSSって違うんだな[/char]

[char no=”1″ char=”かつをくん”]大抵のCSSは、どのブラウザにも対応してるけど、比較的新しいCSSプロパティを使おうとしている時は注意やね![/char]

まとめ

CSSが効かない時、ほとんどのパターンは上記で解決すると思います。

意外と凡ミスみたいなことも、なれるまではやってしまいがちですので、デベロッパツールで確認を忘れずに!

リンク
Let's Hack Tech
CSS | Let's Hack Tech CSSの関連記事
CSS
CSS ワープレス
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする コメントをキャンセル

email confirm*

post date*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

シンプル美と機能性を両立させた、国内最高峰のWordPressテーマ『SWELL』
人気記事
  • IQテストいくつか受けてみました
    ネット上で信憑性がありそうなIQテスト、5種類まとめて受けた結果…
  • hayate
    メルカリの商品を世界最速で購入するためだけのアラートツール
  • 【Python】BeautifulSoupの使い方・基本メソッド一覧|スクレイピング
  • Pythonファイルのexe化
    【悲報】PyInstallerさん、300MBのexeファイルを吐き出すようになる
  • Amazon Echo アレクサのコマンドまとめ
    AmazonEchoの使い方とできる事、アレクサへの指示コマンド一覧
最近の投稿
  • PyQt5 QListWidget の item削除でtextBoxのフォーカスが奪われる2023-03-05
  • WordPressからのメールが届かない時の調査と解決法2023-02-27
  • 保護中: メルカリアラートツール「疾風」v22022-12-01
  • 保護中: メルカリアラートツール【疾風】カスタマイズオプション一覧2021-03-22
  • 保護中: メルカリアラートツール【疾風】インストール手順2021-03-22
目次
目次