WordPressやiPadをはじめ、必要な情報を簡潔にまとめたサイト

iPhone6とWordPress情報を中心に、あなたの生活・知識を向上させるサイト

*

CSSを変更しても表示が変わらない。自動的にスグ表示を変更させる設定方法。【STINGER改造】

      2014/05/03

WPで簡単CSS反映(oh my god)-@livett1-

サイトデザインを変更するためにCSS(カスケード・スタイル・シート)を修正。

ワクワク気持ちでサイトを確認…んっ??変更されてないじゃんΣ(゚д゚ノ;)ノ

あなたのファンの方がサイトを再訪問してくれても、せっかくの変更が反映されていない!

 

こんな経験はありませんか?そんなモヤモヤは終わりにしましょう。
CSSを変更したらスグにサイト反映されるように設定してしまいましょう。

サイトの大切な情報を修正するので必ずバックアップをとってから作業してください。

photo credit: Alex E. Proimos via photopin cc

 

スポンサーリンク

なぜCCSを変更してもスグに反映されないのか?

WPで簡単CSS反映(CSS)-@livett1-
photo credit: laRuth via photopin cc

ブラウザの仕様により、一度閲覧したサイトの情報をパソコン内に保存します。そして2回目以降は全てのデータをサーバーからダウンロードせずにパソコン内のデータを参照する事により表示速度を速くします。これがキャッシュと呼ばれるものです。

CSS(カスケード・スタイル・シート)を更新保存したとしても、閲覧しているパソコンがCSSが修正された事がわからないのでパソコン内のデータを読み込んでしまいます。

つまりCSSを変更した時にブラウザに対して『CSSを変更したよ』と伝えられればいいわけです。どうすれば良いのか?簡単に言えばパソコン内に保存したデータとは違うデータになっていますよ。という事を伝えられればいいわけですね。

それを実現させる方法は、修正するごとに読み込むCSSの名称を変更すればいいんです。

『そんなの面倒くさすぎ!!』

 

ごもっともです^^;
という事で、今回はCSSを修正するたびに自動で名称を追加してくれるようにstingeを変更する方法をご紹介します。

ちなみにボクが使っているのは【stinger3ver20131016】ですが【STINGER3_ver20130327】でも同様の手順で変更可能です。
他のバージョンでも応用が可能だと思いますが、修正等は必ずバックアップをとってから修正してください。

 

変更したCSSに自動で文字列を追加する

パソコン用CSSの修正箇所

今回変更する箇所は、

《WordPress管理画面》⇒《外観》⇒《テーマ編集》をクリックします。
まず修正するコードは[ヘッダー(header.php)]にあります。

に変更します。

 

↑コレが

このようになります。黄色ラインが変更箇所です。

パソコン用のみで良ければモバイル用CSSを修正する必要はありません。モバイル用CSSを即時反映させたい場合は以下も実施してください

 

モバイル用CSSの修正箇所

パソコン用CSS修正箇所の少し上にある

に修正します。

 

パソコン用とモバイル用CSS両方を修正した場合は

↑コレが

手順は以上となります。

 

上記作業でCSSがどうなるの?

この手順によって【filemtime】という関数が追加されます。これはファイルの更新時間を取得する関数なのです。つまりCSSの名称の後にCSSを修正した時間が追加される事になります。

上記修正作業後にページのソースを確認するとスタイルシートの名称の後に【?○○○○○○○○】○は数字が追加されます。

WPで簡単CSS反映(作業前)-@livett1-

↓このようになります

WPで簡単CSS反映(作業後)-@livett1-

【style.css】の後に【?1381161540】が付いていると思います。この数字の羅列がファイルを更新すると自動で付加されます。

 

まとめ

今回の作業でCSSを修正したらスグにサイト反映されるようになり、サイトの修正作業がラクになります。些細なことですが、一度変更しておけば今後もモヤモヤが少しは解消されるかと思います。

また元に戻したいのであれば、上記の逆で簡単に戻せます。

 - PC・web, STINGER

スポンサーリンク

Comment

  1. […] ヘッダー部分の下記のところを変更したら、解決した。お知恵を拝借したのはここ。管理人さんありがとう。 […]

  2. ホームページのフォントが変わらない場合の対処方法 より:

    […] 今回参考にさせて頂いたサイトは、livet1.com様です。(本当に自分はこの記事を見つけたおかげで助かりました) […]

  3. […] CSSを変更しても表示が変わらない。自動的にスグ表示を変更させる設定方法。【STINGER改造】 […]

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  関連記事

ウィジェット消したら表示スピードが3倍になった
3倍速くなった!?あの人気ウィジェットがサイト表示スピードを遅くしている

ん~何かサイトの表示スピードが遅い気がする! でもなぜか分からない。立ち上げたば …

windows8でMicrosoftアカウントを統合しないでskypeを使う方法!

みなさんwindows8使ってますか? 私は、つい先日以前使っていたPCが壊れて …

chrome【Alt+←】が使いづらい!拡張機能【Back Space】で前のページに戻るを復活させる-chrome-@livett1
chrome【Alt+←】が使いづらい!拡張機能【Back Space】で前のページに戻るを復活させる

みなさんはネットを見るときにプラウザは何を使ってますか? ボクは数個のパソコンを …

2016年版 メイン機として使用できるおすすめ超軽量ノートパソコン一覧-軽いPC-@livett1
2016年版 メイン機として使用できるおすすめ超軽量ノートパソコン一覧

ノートパソコンを持ち運びする機会が多くなり、普段持ち歩いているノートパソコンの重 …

RoboFormバージョンアップ-RoboForm@livett1
【実は簡単】パスワード管理ソフト『RoboForm』のアップデート方法を公開

インターネット閲覧の際、パスワードやID管理はどうしてますか? まさか同じパスワ …

【google xml sitemaps】を更新で気をつける事-wow@livett1
【要確認】WPプラグイン《Google XML Sitemaps》更新でサイトマップが作成されない時の対処法

少しづつWordPressでのサイトの更新に慣れてきた@livett_1です。 …

no image
当エントリーは削除いたしました。

当エントリーは、baidu株式会社様からのご指摘により内容を再確認したところ【事 …

【使用レビュー】人生最高のノートPC!世界最軽量《LaVie Hybrid ZERO》が快適すぎてオススメ-キャプチャ-@livett1
【使用レビュー】人生最高のノートPC!世界最軽量《LaVie Hybrid ZERO》が快適すぎてオススメ

パソコンについて詳しい事は分からない。でも一度使ったらその快適さに驚愕。 ノート …

個人情報流出は他人事じゃない?あなたのパスワードは危ない!?

adobeサイトから290万人分の情報が流出したようですが、みなさんパスワードの …

WordPress投稿画面が変-復帰前後キャプチャ-@livett1
WordPressを更新したら投稿画面がおかしくなった。ここを確認すればOK!

WordPress3.9.2が2014年8月7日に公開されました。WordPre …