wordpressの使い方。CSSが反映されない時の対処法

プログラミング 初心者独学

wordpressの使い方。CSSが反映されない時の対処法

こんにちはnikonekoです。

先日、”送信ボタン”を作っていたら、どうしてもうまくWordpressに”反映”してくれないという現象がおきてしまいました。

原因は、「 }」が抜けていた…という、なんとも悲しい結果に終わりました。

もちろん!WordPressに反映されない原因は、他にもあります。

万が一、また「送信ボタンを作ってもWordpressに反映されない」という現象が起こっても慌てないように、デザインがWordpressに反映されない時に試した対処法をご紹介します。

WordPressにCSSファイルが反映しない時に、確かめること

確認すること
1.Wordpressの編集画面に直接、CSSコードを書いてしまっていないか。
2.キャッシュを消去しているか。
3.CSSの優先順位が高いか。

1.Wordpressの編集画面に直接、CSSコードを書いてしまっていないか。

WordPressでHTMLでコードを書くには、①HTML挿入から書くか、②テキストで書くかです。

編集画面に直接CSSコードを書いてしまうと、エディター機能により必要がないタグが記述されてしまいます。

①HTML挿入から書く

②テキストで書く

2.キャッシュを消去しているか。

キャッシュは、キャッシュした時の情報が残っているため、Webサイトの最新情報更新があったとしてもその内容は反映されない。

キャッシュを定期的にクリアにすることで、速やかな読み込みができるのです。

WordPressの場合

ダッシュボードの管理メニューからキャッシュ削除を選択します。

キャッシュを削除する場合

chromeの場合の手順
①設定を開く
②.その他のツールから閲覧履歴を消去キャッシュを消去
③できれば全部チェックをいれてデータを削除

3.CSSの優先順位が高いか。

CSSは複雑になると、想像しているものと違う表示になる場合があります。
それは、HTMLに適用されるstyleの優先順位が関係あるようです。
同じスタイルシート内で同じセレクタを指定する場合は、後者(下に記述されているコード)が適用されます。

まとめ

今回、先日、”送信ボタン”を作っていたら、どうしてもうまくWordpressに”反映”してくれないという現象がおきてしまいました。

私の原因は、「コード記述ミス」でしたが、WordpressでCSSが反映されないのは、保存忘れや操作ミスなどもデザインが反映されないこともあるので、念のためにもう一度記述ミスがないかを確認していきましょうね。

すぐに使えるコードを提供してくれているのが、サルカワさんのページです。

大変勝手ながら勉強させていただいてます。

コメント