ブログで今や人気のテーマSTORK。
このブログも例にもれずSTORKで書いてたりします。
無料で俺はやるぜ！って人にはちょっぴり敷居の高い1サイトあたり10,000円ですが、
特段何もしなくても見やすくて良いので、初心者さんにもオススメ。
販売元はOPENCAGE。使ってない方はとりあえず機能を見るだけでも勉強になりますよ(^^)/
WordPressテーマ「ストーク」
今回は既にSTORKを使ってる人向け（初心者さん向け）の内容なので、興味ない人はごめんなさい。
さて、サイトを作ってるとデザインやら機能のカスタマイズにあたってCSS編集することが出てくると思います。
カスタマイズを紹介しているサイトは山ほどありますが、これいーなー！って思って紹介されているCSSコードをコピペして自身のスタイルシートに貼り付けても何も変わらない・・・って経験は誰しも1度は経験するはず・・！
完全初心者ブロガーはまず間違いなくつまづいて、諦めて、ブログ止めた！！！って流れに。
目次
CSSが反映されない一番の原因はキャッシュ
少し前はサーバ側の初期設定によってCSSが正しく読み込めない・・・なんて事象も頻発していたようなんですが、
今は初期設定自体の見直しによって改善されました。
なので、今もしCSSを書き換えてもなんも変化が起きないって方は、キャッシュが原因と思ってほぼ間違いないと思います。
キャッシュってなんだろう？
聞いた事あるけど、そもそもキャッシュって何さ？って人は多いと思う。
使用頻度の高いデータを高速な記憶装置に蓄えておくことにより、低速な装置から読み出す無駄を省いて高速化すること。
サイト作成にあたって簡単に言い換えると、
一度読み込んだページや設定をPCやスマホに記憶しておいて、そのページを開きなおした時に記憶した情報を再利用する仕様の事。
なので、CSSを書き換えても保存されてる昔のCSSを利用してページが表示されちゃうから、実際は更新されているにも関わらず見た目には変化がみられないんですね。
って事でとりあえず解決法。まずは本当にそれがキャッシュが原因なのか確かめましょう。
スーパーリロード！
キャッシュ削除が一番簡単っちゃ簡単なんですが、必要なキャッシュまで全部削除してしまうので、他サイトの読み込みが遅くなってしまいます。なので原因を探るだけなら、そのページのキャッシュを無視して読み込むスーパーリロードをおすすめ。
もう名前からしてスーパーですからね。カッコいい・・・。
まー冗談はさておきやり方がブラウザによって変わるので、ご自身の使ってるブラウザに合わせてやってみてください。
１．IE/ファイアフォックス/GoogleChome
CTRL＋F5
２．Safari/Opera
CTRL＋R
※Operaはスーパーリロードしても駄目な場合があるようなので、キャッシュ削除が安定・・かもしれません。
３．スマホ・タブレット
スマホやタブレットではスーパーリロードコマンドがないので、以下の方法でキャッシュ削除をするしかないようです。
２．ブラウザメニュー ＞ 設定 ＞ プライバシーとセキュリティ ＞ キャッシュを消去
３．ブラウザメニュー ＞ その他 ＞ 設定 ＞ キャッシュを消去
画面いっぱいにスーパーと表示され、読み込まれましたか？
あ、嘘です。ふつーに読み込まれます。
いずれにしてもこれで書き換えたCSSが反映されているなら、キャッシュが原因って事がわかりましたね。
じゃーこれからはスーパーリロードすればいいんだね！みんなに言っておこうって思ったそこの君。
読者さんはそんな優しさ持ってません。
なのでひと手間かけて、キャッシュを無効にするようCSSを書き換えてしまいましょう。
以下CSSは 子テーマを使用している事を前提にしています。もし使ってないのであれば、使ってください。
CSS編集には必須ですよー。
functions.php（子テーマ）
さて、ここで書き加えるのは6行目の末尾赤字部分。もともとは何もないはずです。
get_stylesheet_directory_uri() . ‘/style.css?20171207‘,
これはスタイルシートを読み込む指示文ですが、末尾に「?」から続く文字列を入れておくことで、違うファイルだと認識してくれるのでキャッシュを無効化してくれるんです。
ここに書き込む「？」以降の文字列は何でもOK。更新日なんかがオススメですね。
んん？スタイルシートのファイル名も変えなきゃ？って心配はありません。
ここで何を書き加えようとも、読み込むのはstyle.cssになります。
ただキャッシュ機能をだますだけです。
毎回スタイルシートを強制的に再読み込みさせる記述もあるにはありますが、CSSを書き換えていない場合にもキャッシュが無効となってしまって、ページ読み込み速度に影響が出るのでオススメしません。
ここはひと手間かけてユーザビリティの向上！ですね。
これで快適なブログライフが送れる事間違いなし(^^♪
コメントを残す