はじめ見出しのCSSコードをコピペしたのにデザインが反映されない
デフォルトの見出しデザインが一部残っている
見出しデザインがうまく変えられない
本記事では、上記の疑問にお答えしていきます。
この記事を読めば、WordPressの見出しCSSコードが反映されない時の3つの原因と対処法について理解することができます。
お洒落なサイトが誰でも作れる！
ブログを書くのが楽になるテーマ「SWELL」
- 誰でも簡単にオシャレなブログが作れます！
- WordPressの使いやすさがアップします！
- キャッシュ機能とページ高速遷移機能で初心者も簡単にWordPressの高速化が可能です！
- アフィリンクの一元管理機能が標準装備されてます！
＼一度使うと他のテーマには戻れません！／
※実際に私の当ブログは「SWELL」を使って運営しており、大満足のテーマです！
1. WordPressの見出しCSSコードが反映されない時の3つの原因と対処法
WordPressの見出しCSSコードが反映されない時の対処法は以下の3つです。
- ブラウザのキャッシュを削除する
- キャッシュ系プラグインを停止又は削除
- 優先されているCSSコードを調べて、変更を加える
1-1. ブラウザのキャッシュを削除する
まず、見出し（hタグ）のCSSコードが反映されない代表的な原因が「ブラウザのキャッシュ」です。
そのため、ブラウザのキャッシュを削除してあげることで、見出しのCSSコードが反映されることが大半です。
ちなみにキャッシュとは…
キャッシュ＝「1度開いたウェブページのデータを保存しておいて、次に同じページを開くときにサクっと表示してくれる仕組み」
つまり、見出しのCSSコードを変えてすぐは、ブラウザにある古いデータ（キャッシュ）が表示されている可能性が高いということです。
Google Chromeのブラウザキャッシュの削除方法
やり方は簡単で以下の通りです。
※Microsoft Edgeもやり方は同じです。
- 「Ctrl+Shift+Del」で「閲覧履歴データの消去」を一発表示
- 「キャッシュされた画像とファイル」を選択し、データ削除
「Ctrl+Shift+Del」で「閲覧履歴データの消去」を一発表示
Google Chromeを開いた状態で「Ctrl+Shift+Del」を押すと設定の「閲覧履歴データの消去する」という画面が表示されます。
※上記のショートカットキーが使えない方は、右上の「設定→詳細設定→閲覧履歴データの消去する」で表示できます。
設定を選択。
詳細設定を選択。
「閲覧履歴データを消去する」を選択。
「キャッシュされた画像とファイル」を選択し、データ削除
その中に「キャッシュされた画像とファイル」という選択項目があるので、そちらを削除して完了です。
1-2. キャッシュ系プラグインを停止又は削除
ブラウザキャッシュを削除しても、見出しCSSコードが反映されないという方は、ページ表示速度の高速化を目的としたWordPressのキャッシュ系プラグインをインストールしているか確認しましょう。
そして、そのキャッシュ系プラグインのキャッシュを削除、又はプラグインの停止・削除で解決します。
キャッシュ系プラグインの代表的なものは以下の2つです。
- W3 Total Cache
- WP Super Cache
キャッシュ系プラグインは、私は導入していないため、以下のブログで分かりやすく解説していましたのでご紹介します。
1-3. 優先されているCSSコードを調べて、変更を加える【事例解説】
CSSコードは原則、あとから記述したCSSコードが優先され、ブログに反映されるようになっています。
しかし、あとから記述したCSSコードよりも「優先順位」が高いCSSコードがあることが原因で見出しデザインが変わらないこともあるのです。
この場合に該当する例として、WordPressのテンプレートの「子テーマ」を設定している人が多いです。
実際に私もこのケースで、テンプレート「STORK（ストーク）」（親テーマ）を使い、子テーマで色々とカスタマイズをしております。
この場合は、優先されているコードを調べて、CSSコードに変更を加えることで、問題を解消することができます。
やり方は以下の通りで事例を交えて解説します。※Google Chromeの場合
- ブログの記事ページを開き、右クリック「検証」を選択
- 「Ctrl+Shift+C」で選択モードに切り替える
- 表示が正しくない「見出し（hタグ）」を選択
- 優先されているCSSコードを探す
- 優先されている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つの原因と対処法についてお話してきました。
- ブラウザのキャッシュを削除する
- キャッシュ系プラグインを停止又は削除
- 優先されているCSSコードを調べて、変更を加える
見出しのCSSコードを入力しても、又はその他のCSSを入力しているのに、
表示が反映されないということはブログを運営していく上で、必ず直面する問題でしょう。
特に私と同じようにテンプレート「STORK（ストーク）」で見出しを変更したのに反映されないと悩んでいる方は、
是非参考にしてみてくださいね。
もしこの記事が役に立ったと思ったら、ブックマーク・SNSでシェアしてくれるととても嬉しいです。
最後までありがとうございました。
【PR】現役ブロガーの実践ノウハウをこっそり教えちゃいます。
当サイトでは、私が月7桁稼ぐまでに至ったノウハウ・現在実践しているノウハウを「ツヨシウェブSHOP」で有料コンテンツとして販売しております。実際にブログで月7桁稼いだ実績を持っており、また現在もブログ収益で生活をしていますので情報の信頼性は高いと感じています。
しかし、有料コンテンツで提供している情報は「楽して稼ぐ！」というものにはなっておらず、これから私と同じようにブログ・発信者として生活していきたい方に向けて書いておりますので「継続的に作業できる方のみ」ご購入いただければ幸いです。
また、コンテンツには自信を持って提供させて頂いておりますので、もし購入後ご不満がございましたら「返金対応」させて頂きます。
月7桁をを達成したサイト設計方法です！
初心者のための「サイト設計方法」月7桁を実現するブログの作り方を解説。
- 見込み客→キーワード選定→サイト導線が重要。
- 「成約から近い見込み客」の考え方について解説。
- 狙うべきキーワードについて解説。
- サイト導線の考え方について解説。
＼月7桁を達成したサイト設計方法が学べます！／
- 初心者のための「サイト設計方法」月7桁を実現するブログの作り方を解説。
- 見込み客→キーワード選定→サイト導線が重要。
- 「成約から近い見込み客」の考え方について解説。
- 狙うべきキーワードについて解説。
- サイト導線の考え方について解説。
＼月7桁を達成したサイト設計方法が学べます！／
- 初心者のための「サイト設計方法」月7桁を実現するブログの作り方を解説。
- 案件を選ぶ際の7つのポイントが学べます。
- 購入されやすい商品の特徴。
- 案件選びで重要な見るべきポイント。
- 案件を取り組む際に確認すべき事項。
＼アフィリ案件を選ぶ秘訣が学べます！／
