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改造】 […]

ホームページのフォントが変わらない場合の対処方法 へ返信する コメントをキャンセル

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

  関連記事

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

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

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

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

【ESET ファミリー セキュリティ】がAmazonで今夜から割引タイムセール!-満足度No.1-@livett1
【ESET ファミリー セキュリティ】がAmazonで今夜から1,000本限定割引タイムセール!

パソコンのセキュリティソフトは何を使っていますか? あらゆるセキュリティの総合満 …

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

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

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

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

evernote
ブログ記事を作るのにEvernoteは、最高のツール!?

みなさんEvernoteは使ってますか? 恥ずかしながら最近Evernoteを知 …

【実体験】Amazonアカウントが乗っ取られ、突然大量の問合せメールが!!

いま横行しているAmazonアカウントの不正アクセス! 自分は大丈夫。なんて他人 …

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

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

windowsXPサポート終了
本日4/9ついにwindowsXPサポート終了。どういう事かを簡潔に解説。

2001年12月に誕生し個人、企業ともに人気を博したOS(基本ソフト)の【win …

IEの脆弱性が見つかる。@livett1
マイクロソフトのIEに現状解消できない脆弱性が見つかる。解決策は?

インターネットを閲覧するために使用する日本シェア50%のブラウザ。 マイクロソフ …