≫メルマガにてブログ無料相談OKです。

WordPressの見出しCSSコードが反映されない時の3つの原因と対処法

はじめ

  • 見出しのCSSコードをコピペしたのにデザインが反映されない
  • デフォルトの見出しデザインが一部残っている
  • 見出しデザインがうまく変えられない

本記事では、上記の疑問にお答えしていきます。

この記事を読めば、WordPressの見出しCSSコードが反映されない時の3つの原因と対処法について理解することができます。

 

1. WordPressの見出しCSSコードが反映されない時の3つの原因と対処法

WordPressの見出しCSSコードが反映されない時の対処法は以下の3つです。

反映されない時の3つの対処法
  1. ブラウザのキャッシュを削除する
  2. キャッシュ系プラグインを停止又は削除
  3. 優先されているCSSコードを調べて、変更を加える

 

1-1. ブラウザのキャッシュを削除する

まず、見出し(hタグ)のCSSコードが反映されない代表的な原因が「ブラウザのキャッシュ」です。

そのため、ブラウザのキャッシュを削除してあげることで、見出しのCSSコードが反映されることが大半です。

ちなみにキャッシュとは…

キャッシュ=「1度開いたウェブページのデータを保存しておいて、次に同じページを開くときにサクっと表示してくれる仕組み」

引用:saruwakakun.com

つまり、見出しのCSSコードを変えてすぐは、ブラウザにある古いデータ(キャッシュ)が表示されている可能性が高いということです。

 

Google Chromeのブラウザキャッシュの削除方法

やり方は簡単で以下の通りです。

※Microsoft Edgeもやり方は同じです。

キャッシュの削除方法
  1. 「Ctrl+Shift+Del」で「閲覧履歴データの消去」を一発表示
  2. 「キャッシュされた画像とファイル」を選択し、データ削除

 

「Ctrl+Shift+Del」で「閲覧履歴データの消去」を一発表示

Google Chromeを開いた状態で「Ctrl+Shift+Del」を押すと設定の「閲覧履歴データの消去する」という画面が表示されます。

 

※上記のショートカットキーが使えない方は、右上の「設定→詳細設定→閲覧履歴データの消去する」で表示できます。

設定を選択。

 

詳細設定を選択。

 

「閲覧履歴データを消去する」を選択。

 

「キャッシュされた画像とファイル」を選択し、データ削除

その中に「キャッシュされた画像とファイル」という選択項目があるので、そちらを削除して完了です。

 

1-2. キャッシュ系プラグインを停止又は削除

ブラウザキャッシュを削除しても、見出しCSSコードが反映されないという方は、ページ表示速度の高速化を目的としたWordpressのキャッシュ系プラグインをインストールしているか確認しましょう。

そして、そのキャッシュ系プラグインのキャッシュを削除、又はプラグインの停止・削除で解決します。

キャッシュ系プラグインの代表的なものは以下の2つです。

キャッシュ系プラグイン
  1. W3 Total Cache
  2. WP Super Cache

キャッシュ系プラグインは、私は導入していないため、以下のブログで分かりやすく解説していましたのでご紹介します。

【参考】WP Super Cacheのキャッシュ削除方法

 

1-3. 優先されているCSSコードを調べて、変更を加える【事例解説】

CSSコードは原則、あとから記述したCSSコードが優先され、ブログに反映されるようになっています。

しかし、あとから記述したCSSコードよりも「優先順位」が高いCSSコードがあることが原因で見出しデザインが変わらないこともあるのです。

この場合に該当する例として、Wordpressのテンプレートの「子テーマ」を設定している人が多いです。

実際に私もこのケースで、テンプレート「STORK(ストーク)」(親テーマ)を使い、子テーマで色々とカスタマイズをしております。

この場合は、優先されているコードを調べて、CSSコードに変更を加えることで、問題を解消することができます。

やり方は以下の通りで事例を交えて解説します。※Google Chromeの場合

優先されているCSSコードの調べ方
  1. ブログの記事ページを開き、右クリック「検証」を選択
  2. 「Ctrl+Shift+C」で選択モードに切り替える
  3. 表示が正しくない「見出し(hタグ)」を選択
  4. 優先されているCSSコードを探す
  5. 優先されているCSSコードを無効にするコードを入力する

 

ブログの記事ページを開き、右クリック「検証」を選択

私に起きた事例でお話していきます。

私は下記の図の見出しデザインにしたかったのですが、見出し3(h3タグ)がうまく表示されませんでした。

※左端に縦棒が1本消えずに表示されています。

 

ブログの記事ページを開き、右クリック「検証」を選択しましょう。

 

「Ctrl+Shift+C」で選択モードに切り替える

すると以下のような画面に切り替わります。

 

ここで、「Ctrl+Shift+C」又は右のタブの左上にある「選択モード」をクリックします。

 

表示が正しくない「見出し(hタグ)」を選択

そして、表示が正しくない「見出し(hタグ)」を選択しましょう。

私の場合は、見出し3(h3タグ)です。

 

優先されているCSSコードを探す

すると、右のタブに下に反映されているCSSコードの記載が現れます。

ここで、優先されているhタグコードを探していきます。

 

私の場合は、以下のコードが優先されていたため、思ったデザインとは違った表示となっていました。

コード
.entry-content h3 {border-left: 4px solid;}

反映されていないCSSコードは、打ち消し線で表示されています。

↓こんな感じに。

 

コード
.entry-content h3 {border-left: 4px solid;}
 

つまり、私の事例の場合だと、以下のコードが反映されているということです。

コード
.entry-content h3 {border-left: 4px solid;}
 

ちなみに、どのCSSコードが影響しているのかがわからない方は、コードの横にあるチェックボックスのチェックを外したり、入れたりしてみると、

見出しの表示に反映され、コードの反映項目を確認できます。

優先されているCSSコードを無効にするコードを入力する

優先されているCSSコードがわかれば、「追加CSS」に無効にするコードを入力していきます。

↓原因コード

コード
{border-left: 4px solid;}
↓無効にするためのコード
コード
{border-left: none;}
この例ですと、左側の線を「none」に設定してあげればOKです。

 

まとめ

今回は、WordPressの見出しCSSコードが反映されない時の3つの原因と対処法についてお話してきました。

反映されない時の3つの対処法
  1. ブラウザのキャッシュを削除する
  2. キャッシュ系プラグインを停止又は削除
  3. 優先されているCSSコードを調べて、変更を加える

見出しのCSSコードを入力しても、又はその他のCSSを入力しているのに、

表示が反映されないということはブログを運営していく上で、必ず直面する問題でしょう。

特に私と同じようにテンプレート「STORK(ストーク)」で見出しを変更したのに反映されないと悩んでいる方は、

是非参考にしてみてくださいね。

もしこの記事が役に立ったと思ったら、ブックマーク・SNSでシェアしてくれるととても嬉しいです。

最後までありがとうございました。

WordPressブログの「見出し(hタグ)」の完全マニュアル【まとめ】