WEB制作 wordpress

【WordPress】追加CSSが反映されない原因と対処法!

2021年6月16日

「WordPress子テーマのCSSが反映されない!」

「WordPressの追加CSSが何故か反映されない、、」

WordPressの学習を始めると、CSSが反映されない事件が起きますよね。笑

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

IMG 5924
よし

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

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

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

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

続きを見る

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

続きを見る

WordPressでCSSを記述する場所

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

WordPress管理画面の追加CSS

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

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

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

親テーマのstyle.cssを更新しないのには理由があります。

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

IMG 5924
よし

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

WordPress子テーマのstyle.css

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

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

WordPressで子テーマCSS・追加CSSが反映されない原因と対策

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

子テーマのCSSが正しく読み込まれていない

まず、正しくCSSが読み込まれているか確認しましょう。

ここは管理画面から編集した人は問題ないと思うので、次に進んで大丈夫です。

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

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

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

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

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

WordPressのキャッシュが残っている場合

WordPressでCSSが反映されない時、キャッシュが残っている事が原因である事は非常に多いです。

これが原因だった場合、一瞬で解決できる事もあるので試してみましょう。

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

· Windows:Ctrl + F5

· Mac :command + shift + R

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

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

CSSの優先度

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

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

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

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

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

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

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

簡単に説明すると 

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

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

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

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

IMG 5924
よし

!importantは最強!

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

WordPressのCSSが反映されに時の対策【番外編】

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

IMG 5924
よし

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

クラス名のスペルは間違っていないか「;」と「:」を間違っていないかなど、ひと休憩して確認してみてはいかがでしょうか。

あっけなく解決できるかもしれません。

まとめ WordPressのCSSが反映されないのは、どこかが間違っているから!

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

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

それではまた!

no image
文系でも新卒Webデザイナーとして就職できるのか【結論:可能】

続きを見る

no image

WEB制作

2022/1/12

【メンタリングがいらない人向け】テックアカデミー「はじめての副業コース」のLiteプラン

no image

仮想通貨 NFT

2022/1/5

【簡単】コインチェックで仮想通貨を購入・MetaMaskに送金する手順

no image

NFT 仮想通貨

2022/1/5

【2022年】メタマスクの使い方・送金方法を徹底解説【初心者でも簡単】

no image

仮想通貨

2022/1/24

【実体験】仮想通貨初心者にコインチェックがおすすめな理由

no image

仮想通貨

2022/1/24

【2022年】コインチェックの口座開設方法を5段階で解説

no image

NFT

2022/1/6

【バズるコツも紹介】NFTギブアウェイ(Giveaway)のやり方とメリット・デメリットを解説

no image

仮想通貨

2022/1/6

Hi Dollars(ハイダラーズ)アプリのマイニングで仮想通貨を貰おう【無料でゲット】

no image

NFT

2021/12/30

NFTエアドロップの受け取り方・送り方を解説【初心者でも簡単】

no image

NFT

2021/12/26

NFTアートが売れないときの対処法と稼ぐコツ【今すぐできる】

no image

NFT

2022/1/5

OpenSeaでのNFTアートの作り方【出品手数料やガス代も解説】

no image

WEB制作 プログラミング

2021/12/21

分割払いできる?デイトラの支払い方法を解説!【結論:カード使えば分割可能】

no image

プログラミング

2021/12/7

【退会料はかかる?】レバテックルーキーの退会方法【他のIT就活サービスも紹介】

no image

WEB制作

2021/12/5

デジタルハリウッドSTUDIO by LIG(Webデザイナー専攻)の学習内容と評判【2021年最新】

no image

NFT

2022/1/24

【NFTアートの作り方】おすすめアプリやツールを紹介!

no image

WEB制作

2021/12/4

CodeCamp/コードキャンプ(デザインマスターコース)の内容と評判

no image

WEB制作 ブログ運営

2021/12/12

WEBMARKSの評判・口コミと学べる内容【SEO特化型スクール】

no image

WEB制作 wordpress

2021/12/8

デイトラのWebデザインコースとWeb制作コースの違い【評判や内容を比較】

web制作 稼げない人の特徴

WEB制作

2021/11/16

【Web制作】稼げない人の特徴と稼ぐための対策

no image

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

2021/12/20

評判はどう?ZeroPlusの口コミと学べる内容【プログラミングスクール】

no image

大学生

2021/12/13

【いつまで続ける?】大学生がバイトを辞める時期と円満に辞める方法

-WEB制作, wordpress

© 2022 よしブログ Powered by AFFINGER5