【ワードプレス】CSSの設定が反映されない時の単純な解決方法

閲覧数が伸びてゆく様子

このサイトはワードプレスで作っています。作成したのは2016年の8月頃。ブログをやろうと思ったきっかけは単純に「何か新しい事にチャレンジしたかったから」という事 + 「お金」です。

比較的簡単にカスタマイズできるということでやり始めたわけですが、最初はいろいろ苦労しました。

プラグインとかテーマとかよくわからないし、そもそも「cssファイル」の編集の仕方も曖昧状態。

ローカル環境でhtmlとcssを勉強しながら、「あ~こうやるとこうなるんだ~」とか言いながら、作ったことはありましたが、正直本の通りにしか作れませんでした。

そんな感じだったので、当初から「小さな壁」は何度か来ていたんですが、なかなか越えられない「大壁」がついに現れました。

それは、「見出しの文字装飾」です。

え?

そんなに簡単なこと?

と思われるかもしれませんが、これがなかなか厳しいんですよね、初心者には・・・。

そこで今回、結果4時間悩んで解決した内容を赤裸々に公開したいと思います。

もし、同じ悩みを持っている方がいれば参考にしていただければ幸いです。

「スポンサーリンク」

【style.cssファイルの記述内容】

いきなり本番用に反映させるのは怖いので、とりあえずローカル環境のWordPressで試すことにしました。

「style.css」ファイルにタグ装飾の記述をし、投稿画面を確認すると下図のようにうまく反映されます。

※これが本来なってほしい姿(h3タグ

html文

あとは、これを本番環境の「style.css」ファイルにそのままコピーするだけ。

しかし、実際にやってみると投稿画面では下図のようになります。

投稿画面での表示

???

文字装飾はどこへやら?

そして、ここから長い戦いが始まります。

【検証してみた4項目】

とにかく素人なりに、できることを試してみました。

以下は、わたし試みた方法の数々です。

挑戦1.ワードプレスへの再ログイン → 失敗

例えば、プリンタのドライバを新たにインストールしたり、バージョンアップでファイルをアップデートした場合、パソコンを再起動する事が求められます。

Windowsの定期的なアップデートでもそうですよね。

そして、ワードプレスへ再ログイン。

しかし、結果は虚しく変わらず。

挑戦2.見出しを「再設定」 → 失敗

先日、当ブログのサーバが ” Https化 ” しました。

昨今はブログへの不正アクセルが多く、特に海外からの攻撃が多いこともあって、サーバ運営している各会社は、どこもセキュリティ強化に取り組んでいます。

ただ、Https化してくれるのはありがたいんですが、既存記事内の画像のファイルパスまでは自動で切り替わることがありません。

結果、わたしはプラグインの力も借りずに、100以上ある記事を全て見直して手修正を加えました。

何が言いたいかというと、設定を変えても、それを反映させる為には既にあるものを手直ししないといけないのでは?という事です。

「h3タグ」に対しての文字装飾設定であるので、任意の既存記事を開いて「見出し」→「段落」へ変更後、元の見出しサイズである ” h3 ” に戻します。

しかし、結果は反映されません。。。

挑戦3.プラグイン比較調整(その1) → 失敗

ネットで色々調べていると、cssファイルが反映されない原因の一つとして、こんなものがありました。

それは、

プラグインによるいたずら

確かに、ローカル環境と本番環境は入っているプラグインが違います。

※下図は、本番とローカルにおけるワードプレスの環境一覧

プラグイン一覧(その1)

プラグイン一覧(その2)
※ 〇:有効化済み 空欄:未インストール -:非有効化 ★:新たにインストール

しかし、本番用環境をローカル環境と同じにしても、全く状況は変わりません。。。

挑戦4.最後の挑戦 → 成功

ネットで検索していると、更に「キャッシュ」が関係しているかもという記事を発見。

同記事には、

キャッシュに関するプラグインを一旦「無効」にして、再度有効にすることでOK

とありましたが、残念ながらわたしの環境には、それらしきプラグインが入っていません。

とりあえず入っているプラグインを全部一旦「無効」にし、記事の内容にある通り再度「有効」に設定変更。

しかし、これでも文字装飾はされず何も変わりませんでした。

ただ、フッと気になって何気にスマホではどうなっているのか?と見てみると、なぜか文字装飾が反映されているではありませんか!

勘の良い方なら、もうおわかりかも。

そうです!

キャッシュはキャッシュでも、プラグインではなく単純に「ブラウザのキャッシュ」がクリアされていなかっただけなのです。

【まとめ】

どうでしょうか、みなさん。

初心者感満載の内容でしょう?

勿論プラグインがたくさん入っていると、cssで設定した内容が反映されないという事はあるようですが、そんな問題ではなく「キャッシュのクリア」という単純な操作で、文字装飾は反映されるのです。

ワードプレスが、そういうものなのかどうかわかりません。

が、少なくともキャッシュクリアで解決する事もあるので、cssが反映されないという場合には試してみて下さい。

ページ先頭へ戻る

「スポンサーリンク」

シェアする

  • このエントリーをはてなブックマークに追加

フォローする