CSSを編集したらF5キー | 新・アメブロ向上企画書 アメブロの「CSS編集用デザイン」のカスタマイズ

新・アメブロ向上企画書 アメブロの「CSS編集用デザイン」のカスタマイズ

アメブロの新スキン(CSS編集用デザイン)のカスタマイズ
アメーバブログをCSSでカスタマイズして自分だけのオリジナルなデザインでアメブロを楽しんでください

このブログの説明の通りにやってプレビューでは大丈夫だったのに保存したら変わっていません?
翌日になったら表示されていました・・時間がかかるんですね?

・・・・


CSSを変更して変わっていないのはブラウザ(Internet Explorer・Firefox・Google Chrome・Opera・Safariなど)が古いキャッシュを表示しているからです
(古いといってもCSSの編集前の直前の状態を表示しています・・)




これはこのブログのソースの最初の部分です

<!doctype html>
<html lang="ja" class="columnC" xmlns:og="http://ogp.me/ns#" xmlns:mixi="http://mixi-platform.com/ns#">
<head>
<!--base_skin_code:new,skin_code:wu_pf_cssedit,default_custom_code:-->
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="keywords" content="新・アメブロ向上企画書 アメブロの「CSS編集用デザイン」のカスタマイズ,実験委員,ブログ,アメブロ,アメーバ,ameba" />
<meta name="description" content="実験委員のブログ、新・アメブロ向上企画書 アメブロの「CSS編集用デザイン」のカスタマイズです。アメブロの新スキン(CSS編集用デザイン)のカスタマイズ
アメーバブログをCSSでカスタマイズして自分だけのオリジナルなデザインでアメブロを楽しんでください" />
<title>新・アメブロ向上企画書 アメブロの「CSS編集用デザイン」のカスタマイズ</title>
<link rel="alternate" type="application/rss+xml" title="RSS" href="http://rssblog.ameba.jp/newcss/rss20.xml" />
<link rel="alternate" type="text/html" media="handheld" href="http://m.ameba.jp/m/blogTop.do?unm=newcss" />
<link rel="shortcut icon" href="http://stat100.ameba.jp/common_style/img/favicon.ico" />
<link rel="apple-touch-icon" href="http://stat100.ameba.jp/common_style/img/sp/apple-touch-icon.png" />
<link rel="stylesheet" type="text/css" href="http://stat100.ameba.jp/common_style/css/user/amebabar100314.css" />
<link rel="stylesheet" type="text/css" href="http://stat100.ameba.jp/blog/new/css/cmn/blog110824.css" />
<link rel="stylesheet" type="text/css" href="http://stat100.ameba.jp/p_skin/wu_pf_cssedit/css/skin.css" />
<link rel="stylesheet" type="text/css" href="http://usrcss.ameblo.jp/skin/templates/fc/88/10023972443.css" />
<link rel="stylesheet" type="text/css" href="http://stat100.ameba.jp/blog/new/css/orgn/cssedit/cssedit.css" />
<!--[if lt IE 9]><script src="http://stat100.ameba.jp/common_style/js/library/html5js/html5.js"></script><![endif]-->
<script src="http://stat100.ameba.jp/blog/new/js/cmn/blog_head.js" charset="UTF-8"></script>

http://usrcss.ameblo.jp/skin/templates/fc/88/10023972443.css


この部分がCSSの編集で使われているファイル部分です

このファイル名は固定でCSSの編集を行ってもファイル名が変わることはありません

ファイルの中身が変わっているだけです
これは新しいCSS編集用デザインのソースですが旧ベーシックスキンでも同じことです



つまり・・・CSSの編集をしてもこの部分にまったく変化はないわけで・・

ブラウザは前と変わっていないと判断して前の状態を表示します

(一昔前は通信速度が遅くて表示するたびにいちいち通信して読み込んでいたら表示されるまで時間がかかって大変でしたので変わっていなければ以前のキャッシュを表示するようにしています)

※たぶんココではなくて更新日付で判断していると思うのですが・・・?



どちらにしても・・・CSSの編集だけではどこにも変化する部分はありませんので

ブラウザは前の状態を表示することになり


CSSの編集をしたけど変化ないです・・?とか

その後記事部分とかさわって変化があったのでブラウザが再読み込みをして

時間がたったら変わっていました~ってことになっています



CSSの編集をして変わっていなければ・・・

ブラウザに変わっているはずだからもう一度最初から読み込んで・・って教える必要があります


それにはブラウザーについている更新ボタン(再読込みボタン)を押すか・・

キーボードの[F5]キーを押すかします


この現象はCSSで変更しようとして何度も同じページを見ているあなただけに起こります

あなたのブログの読者さまが見るときにはちゃんとCSSの編集された状態で表示されますから安心して大丈夫です





CSSの編集程度でしたら再読み込みで大丈夫なはずですが・・
それでもだめな場合は・・・


スーパーリロード(強制再読み込み)


Internet Explorer・Firefox・Google Chrome は・・・[Ctrl] + [F5]

Opera は・・・ [F5]

Safari(W) は・・・ [Ctrl] + [R]

Safari(M) は・・・ [Command] + [R]

これをやっても変わらない場合はCSSが間違っています
CSS 動きません・・ 質問するその前に

こちらを確認ください