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

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

  関連記事

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

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

【RAKUWAネックX100】-ファイテンのネックレスを格安で手に入れる。@livett1
偽物が流通しているファイテンのネックレス!!正規品を激安40%引きで買う方法

『おわっっっ~~Σ(゚д゚ノ;)ノ頭がクラクラする~』 ファイテンの店舗で【RA …

WPとgoogle+(ぐぐたす)連動は注意が必要-WP&google+-@livett1
JetpackプラグインでWPとGoogle+(ぐぐたす)を連動したら【限定公開】に!【一般公開】で投稿する方法

WordPressでの投稿にようやく慣れてきた@livett_1です。 そしてつ …

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

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

amazon-sale
amazonが年に一度の【7日間セール】をやってるよ

みんな大好きamazonが年に一度の7日間セール【CyberMonday(サイバ …

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

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

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

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

docomoの有料オプションを解約する-iPhone-@livett_1
【iPhone6】docomoの有料コンテンツをサクッと解約する手順をご紹介

【iPhone】の操作の快適さは日に日に感じている@livett_1です。 さて …

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

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

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

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