WEB制作 wordpress

【ワードプレス】CSSが反映されない原因と対処法!

2021年6月16日

こんにちは、よしです。

今回は、ワードプレスの追加CSSや子テーマのCSSが反映されない時の原因と対処法を解説していきます。

せっかくCSSを編集したのにうまく反映されないと悲しいですよね、、、

経験上可能性の高い原因と対処法を順に説明していくので、一つずつ試してみてください!

普段はweb制作関連の学習方法も発信しているので、気になる方はぜひチェックしてみてください!

チェック!
"独学でOK" 未経験でもWordPress案件を取れる学習方法
"独学でOK" WordPress案件を取れる学習ロードマップ

続きを見る

チェック!
no image
【WordPress】ファビコンを設定する方法と変わらない時の対策

続きを見る

 



ワードプレスでCSSを記述する場所

まず大前提として、CSSを記述する場所が正しいかどうか確認してみましょう。

管理画面の追加CSS

この場合は、子テーマを作成せずにCSSを反映させたい場合によく使われます。

管理画面の外観 → カスタマイズ → 追加CSSから編集できます。

ワードプレス管理画面の追加CSS手順1
ワードプレス管理画面の追加CSS手順1

親テーマのstyle.cssを更新しないのには理由があります。親テーマを直接いじってしまうと、テーマが更新された際に自分で追加したコードがリセットされてしまったり、テーマがうまく動かなくなってしまう可能性があるからです。

子テーマを使用せずにCSSを変更する時は管理画面の追加CSSから記述するようにしましょう。

子テーマのstyle.css

ワードプレスには親テーマの機能やデザインを継承した子テーマを作成する事ができます。

少しCSSをカスタマイズするくらいだったら管理画面の追加CSSを使用すれば良いですが、大きく変更を加える時には子テーマのstyle.cssに記述するようにしましょう。

ワードプレスでCSSが反映されない原因と対策

さて、正い場所にCSSを記述できている事が確認できたら、次はワードプレスに反映させるようにしましょう。

原因1 CSSが正しく読み込まれていない(子テーマを使用している場合)

まず、正しくCSSが読み込まれているか確認しましょう。ここは管理画面から編集した人は問題ないと思うので、次に進んで大丈夫です。

ワードプレスで子テーマを使用する際は、子テーマのfunctions.phpに親テーマと子テーマそれぞれのstyle.cssを読み込ませる記述をしなくてはいけません。

管理画面の 外観 → テーマエディターからfunctions.phpをクリックし、

子テーマのCSSを編集する手順1
子テーマのCSSを編集する手順2

以下のコードを追記してください。*パスなどはディレクトリ構造に合わせて調整してください

この記述を行うことで、子テーマに親のstyle.css → 子のstyle.cssの順で適応されるようになります。

原因2 キャッシュが残っている場合

ワードプレスでCSSが反映されない時、キャッシュが残っている事が原因である事は非常に多いです。これが原因だった場合、一瞬で解決できる事もあるので試してみましょう。

以下のショートカットキーでスーパーリロードをする事でキャッシュをクリアしてリロードが出来ます。

· Windows:Ctrl + F5

· Mac :command + shift + R

また、検証ツール → Network のDisable cache にチェックを入れた状態でリロードしてもキャッシュをクリアできるので、念の為どちらも試してみましょう。

スーパーリロードする手順

原因3 CSSの優先度

しっかりとCSSを読み込ませて、キャッシュもクリアしたのに反映されない場合はCSSの優先度の影響かもしれません。

CSSは基本的に上から下に読み込まれるので、後に記述したものが反映されます。

子テーマを使用している場合も、親テーマの後に子テーマを読み込むから、自由にカスタマイズできると言うわけです。

ただ、これには例外があります。例えば、

と記述されていた時です。

基本のルールに則れば下に記述されている18pxになりそうですが、残念ながらそうはなりません

CSSは要素を詳しく指定したほうが反映されるというルールが存在する為です。

簡単に説明すると 

要素セレクタ(p,h2) <  classセレクタ(.~)  <  idセレクタ(#~)

の順で優先度が高くなっていきます。こちらのサイトで詳しく解説されているようなので、こちらを参考にしてみてください。

どうしても反映されない場合は、

と記述することで、ルールを無視して反映させる事が出来ます。

しかし、!importantを乱用すると後の管理が難しくなるので、なるべくセレクタの指定で反映させることをおすすめします。



番外編

これまでの対処法で解決しなかった人は、そもそもCSSの記述が間違っていないかどうか確認してみてください。

コーディングでは間違える訳ないところを間違えて数時間悩まされる事もしばしばあります。

クラス名のスペルは間違っていないか「;」と「:」を間違っていないかなど、ひと休憩して確認してみてはいかがでしょうか。あっけなく解決できるかもしれません。

まとめ

いかがでしたか?ワードプレスのCSSは反映されるようになりましたか?もし解決の手助けができたなら幸いです。

ワードプレスは編集が難しく、うまく動かない事もあるかもしれませんが、必ず原因はあるので、落ち着いて解決していきましょう!

それではまた!

no image
文系でも新卒webデザイナーとして就職できる方法

続きを見る

no image

大学生

2021/10/18

【暇な大学生におすすめ】暇な時間を有効活用できる方法

悪質な情報商材に騙されないポイントと怪しいと思った時の対処法【実体験】

WEB制作 ブログ運営 プログラミング

2021/10/16

悪質な情報商材に騙されないポイントと怪しいと思った時の対処法【実体験】

211007アートボード 1 のコピー 42

ブログ運営

2021/10/7

【特化ブログ運営4ヶ月目】アクセス微増、収益4桁達成!!

【テックアカデミー】PHP/Laravelコースで身に付くスキル、評価は?

プログラミング

2021/9/30

【テックアカデミー】PHP/Laravelコースで身に付くスキル、評価は?

【特化ブログ運営3ヶ月目】ちょっとサボっちゃったけど収益とアクセスは?

ブログ運営

2021/9/5

【特化ブログ運営3ヶ月目】ちょっとサボっちゃったけど収益とアクセスは?

【web制作挫折防止】クラウドソーシング案件で消耗しない為のポイント

WEB制作

2021/9/30

【web制作挫折防止】クラウドソーシング案件で消耗しない為のポイント

簡単なサムネ、バナーの作り方!

WEB制作 ブログ運営

2021/8/19

【簡単】短時間でサムネ、バナーを作る手順!

no image

WEB制作

2021/8/18

webデザイナーはコーディングできないといけない??

no image

WEB制作

2021/8/19

【web制作は大変?】実際に経験した感想を語る

no image

WEB制作

2021/10/8

webデザイナーは絵が下手でもなれる?!

no image

WEB制作

2021/8/15

web制作案件に必要なスキルセット【初心者必見】

【文系もOK】レバテックルーキーの評判、口コミと使ってみた感想

プログラミング

2021/10/16

【文系もOK】レバテックルーキーの評判と使ってみた感想

【Udemy】web制作が学べるおすすめ講座  

WEB制作

2021/10/14

【Udemy】web制作が学べるおすすめ講座  

5149301 s

ブログ運営

2021/8/20

【特化ブログ運営2ヶ月目】アクセス数と収益は先月から変わった??

fv e1622358020615

ブログ運営

2021/8/13

ブログのコンタクトフォームの必要性と実装方法

【Local By Flywheel】WordPressのローカル環境構築手順

WEB制作 wordpress

2021/8/23

Local By FlywheelでWordPressローカル環境を構築する方法

undraw warning cyit

プログラミング

2021/8/23

プログラミングスクール卒業生が「使えない」と言われる理由と解決策

WordPressの子テーマのメリットデメリット

wordpress

2021/10/12

【WordPress】子テーマの作成方法とメリットを解説

undraw researching 22gp

プログラミング

2021/10/12

文系大学生が新卒でエンジニア就職する方法

【安い】大学生に本気でおすすめのwebデザインスクール4選!

WEB制作

2021/9/29

大学生におすすめのwebデザインスクール4選【安い】

-WEB制作, wordpress

© 2021 よしブログ Powered by AFFINGER5