こんにちは、竜也です！
今回はWordPressでstyle.cssがうまく反映されない時の対処法について書いていきたいと思います！
僕がWP製作を始めて最初につまづいたのはcss設定でした。
始めの方は仕方ないなと思い、カスタマイズの画面から追加CSSで !importantをつけてしのぐ日々…。
このままではいけないなと思い、WPのstyle.cssをテーマエディター からいじってcssを編集できる方法を発見しましたので今回はその方法を教えていきたいと思います！
１. なぜstyle.cssの設定が反映されないのか？
まず、設定が反映されない原因はキャッシュにあります！
スタイルシートはブラウザがキャッシュ（パソコン内に保存され、それが使われる。）からスタイルシートを呼び出しているからです。
反映されない原因はここにあり、ブラウザが呼び出しているスタイルシートと、テーマエディター から変更したスタイルシートとでは別のURLになっているからです！
２. 解決方法
結論から先にお話しします！
下記のコードをheadタグ内に追加してください！
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); echo '?' . filemtime( get_stylesheet_directory() . '/style.css'); ?>" type="text/css" />これを行うだけで、テーマエディター から編集した内容をサイト上で反映させることができます！
なぜたったこの作業で編集した内容を読み込むことができるのか？その理由を説明していきます！
３. 解説
デフォルトで出力されるstyle.cssには語尾にver=x.x.xのような感じで書かれており、style.cssを編集しても、更新前のcssが反映されていたためcssがおかしくなっていたんですね〜
先ほど挿入したコードをみてみると、出力されるコードはこのように変わります！
<link rel='stylesheet' href='https://actiblog.jp/wp-content/themes/actiblog/style.css?ver=5.3.3' type='text/css' media='all' />↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
<link rel='stylesheet' href='https://actiblog.jp/wp-content/themes/actiblog/style.css?1588751506' type='text/css' media='all' />ver=x.x.xと表示されておらず、ただの数字の羅列になっていれば成功です！
この違いはと言うと、自動更新するかどうかの違いですね！
まとめ
今回はWordPressのstyle.cssの反映方法について書いてみました！
いやぁ〜記事を書くのって難しいですね…。いつかブログに焦点を当てたライティング術などの記事もかけるようになったら面白そうですね！
WordPressやその他諸々、質問などありましたらお問い合わせページよりお問い合わせください！
それではまた次回の記事でお会いしましょう〜
