【WordPress】CSSが反映されない・画面表示(デザイン)が崩れる7つの原因｜対処方法・元に戻すやり方【ワードプレス】

こちらの記事では「WordPress(ワードプレス)」の表示画面にCSSが反映されず、デザインが崩れて白背景に文字だけになる原因と対処方法を解説しています。

CSS以外にも、PCやスマホでサイト画面が崩れることもあるので、見にくいものになることがあるので、元に戻す直し方を知りたい方は参考にしてください。

CSSとは？

ウェブサイトのデザイン変更

CSSとは「Cascading Style Sheets (カスケーディング・スタイル・シート)」の略語で、スタイルシートとも呼ばれます。

CSSは、ウェブサイトのスタイル(デザイン)を指定するための言語で、余白やフォントサイズ、リスト、レイアウトなどは、CSSを書き換えることでデザイン変更できます。

▼HTMLと組み合わせて使用する

CSSはHTMLと組み合わせて使用する言語で、CSS単独では使用しません。

HTMLは「マークアップ言語」としてウェブページの構造を指定するのに対して、CSSはウェブページのスタイルを担当しています。

HTMLのみでウェブページのデザインは作れますが、HTMLでデザインしてしまうとマークアップ言語としての役割が果たせなくなるため、CSSが使われるようになりました。

CSSは子テーマを使う

使用しているテーマは定期的にアップデートが行われており、親テーマのCSSを書き換えてカスタマイズしても、テーマのアップデートで変更が失われてしまいます。

そのため、WordPressでCSSをカスタマイズするときは子テーマを使いましょう。

▼子テーマは自動変更されない

子テーマは親テーマを上書きして読み込む仕様なので、CSSやPHPの変更を反映させることが可能です。

子テーマは親テーマのようにアップデートされないため、勝手に変更した内容が消えることがありません。

CSSのファイルがある場所

• style.css
• 追加CSS

WordPressでCSSファイルがある場所は「style.css」と「追加CSS」の2カ所にあります。

それぞれの場所にあるCSSの役割を理解して、適切に使い分けましょう。

style.css

WordPressのstyle.cssを編集する場合は、管理画面の「外観」→「テーマファイルエディタ」を開きましょう。

テーマファイルエディタでは「style.css」や「header.php」などが編集できるので、style.cssを編集する前に子テーマを作って有効化しておきましょう。

追加CSS

追加CSSの場所は「外観」→「カスタマイズ」の中にあり、「カスタマイズ」のカスタマイズ項目に「追加CSS」が表示されています。

追加CSSは画面左側にCSS編集画面があり、画面右側はライブレビューとなっており、CSSを変更するとリアルタイムで画面右側のライブレビューに反映されるので、CSSを編集しながら画面確認できるので非常に便利です。

CSSの変更が反映されないときの対処法

対処方法一覧

1. CSSの入力ミス
2. CSSの優先順位
3. デベロッパーツールで確認
4. キャッシュが残っている
5. idやclassが間違っている
6. 「header.php」の内容が消えている
7. CSSプラグインと競合している

1、CSSの入力ミス

当たり前ですが、CSSで入力ミスをしているとデザインのカスタマイズがウェブページに反映されません。

特に「 { 」や「 ; 」などの付け忘れが多く、「 ; 」を付け忘れると後のCSS全てが反映されません。

2、CSSの優先順位

CSSには優先順位があるため、カスタマイズしても反映されないケースがあり、CSSを記述する場所によっても優先順位が異なります。

例えば、CSSに「!important」の指定をしている場合は、指定している箇所が優先されて、競合している箇所が反映されないことがあります。

▼CSS記載箇所による優先順位

• 追加CSS
• 子テーマのstyle.css
• 親テーマのstyle.css

CSS記載箇所による優先順位もあり、「追加CSS」「子テーマのstyle.css」「親テーマのstyle.css」の順で優先順位が下がります。

また、同じCSS内でも「HTMLの階層(セレクタ)が深いCSS」「後から読み込まれるCSS」によっても優先順位が変わります。

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

デベロッパーツールは、ウェブサイトの開発や検証に利用するツールで、多くのウェブブラウザに搭載されており誰でも使えます。

「Chrome」でデベロッパーツールを起動するには「F12」を押すか、ウェブページ上の検証したい要素の上で「右クリック」→「検証」をクリックしましょう。

4、キャッシュが残っている

CSSが反映されない原因は、キャッシュが残っている場合があります。

キャッシュとは日本語で「貯蔵庫」「隠し場所」などの意味で、ウェブページの内容を一時的に保存しておくことで次回の閲覧を素早く行えるシステムです。

キャッシュにCSSが残っていると、カスタマイズ後のCSSが反映されないことがあるので、キャッシュを削除するか、スーパーリロードを試しましょう。

▼スーパーリロードとは？

スーパーリロードとは、通常のリロードとは異なりキャッシュを読み込みません。

もし、WordPressでキャッシュ系プラグインを使っている場合、サーバーキャッシュが原因かもしれないので、プラグインを停止してリロードしてください。

5、idやclassが間違っている

idやclassを間違って入力していると、CSSがウェブページに反映されません。

反映されない部分のclass名とstyle.cssの記述を再確認してみましょう。

6、「header.php」の内容が消えている

テーマファイルの「header.php」の内容が消えている場合なども、CSSが反映されません。

Googleアドセンス広告や、アナリティクスなどのコードを入力するときに「header.php」を触ることがあるのですが、その際に入力した内容が全て消えている事があるので再確認してみましょう。

もし消えていた場合は「バックアップ」から復元・復旧できるので、焦らず対処しましょう。

7、CSSプラグインと競合している

ワードプレスには、CSSのプラグインも多々あります。

複数のCSSプラグインを使っていると、上記で解説した優先順位などによってCSSが反映されない原因となります。

主なCSSプラグインは下記で紹介していきます。

WordPressのCSSプラグイン

Simple CSS

「Simple CSS」は、WordPressの管理画面からカスタムCSSを追加できるプラグインで、ウェブサイト全体や個別投稿でCSSの追加ができます。

「テーマに依存しないCSSを追加したい人」「個別投稿にCSSを追加したい人」に向いたプラグインです。

Simple Custom CSS

利用中のテーマやプラグインのファイルを変更することなく、独自のCSSやJavaScriptのソースコードを追加できるプラグインが「Simple Custom CSS」です。

構文ハイライト機能を持ったテキストエディタを備えており、テーマを変更してもカスタマイズした箇所が維持されます。

SiteOrigin CSS

「SiteOrigin CSS」は、テーマの変更をプレビュー上で確認しながらカスタマイズできるプラグインです。

CSSの知識がなくても、色や大きさやレイアウトなどを視覚的かつ直感的に操作でき、上級者は直接CSSのソースコードを編集することも可能です。

Simple Custom CSS and JS

「Simple Custom CSS and JS」は、独自のCSSやJavaScriptのソースコードを追加できるプラグインです。

ソースコードはタイトルを付けて、一覧画面で管理でき、管理者以外にもソースコードを編集する権限を渡すことが可能です。

構文ハイライト機能を備えた、優秀なテキストエディタが搭載されており、テーマに依存しないJavaScriptやCSSを追加したい人向けのプラグインです。

WP Add Custom CSS

「WP Add Custom CSS」は、個別の固定ページや投稿ページごとにCSSを追加できるプラグインです。

もちろん、ウェブサイト全体に適用するカスタムCSSも追加できます。

関連記事

Web制作

▼Googleアナリティクス

Googleアドセンス・アフィリエイト

サイトデザイン

▼テーマ毎のデザイン

エラー対策