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

2014/04/30 2024/11/16

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

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

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

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

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

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

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

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

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

パソコン用CSSの修正箇所

今回変更する箇所は、

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

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="all" />

1	<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="all" />

を

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); echo '?' . filemtime( get_stylesheet_directory() . '/style.css'); ?>" type="text/css" media="all" />

1	<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); echo '?' . filemtime( get_stylesheet_directory() . '/style.css'); ?>" type="text/css" media="all" />

に変更します。

<!---css切り替え--->
<?php if(is_mobile()) { ?>
<link rel="apple-touch-icon-precomposed" href="<?php echo get_template_directory_uri(); ?>/images/apple-touch-icon-precomposed.png" />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/smart.css" type="text/css" media="all" />
<?php } else { ?>
<meta name="viewport" content="width=1024, maximum-scale=1, user-scalable=yes">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="all" />
<?php } ?>
<?php wp_head(); ?>
</head>

<?php if(is_mobile()) { ?>

<?php } else { ?>

<?php } ?>

<?php wp_head(); ?>

</head>

↑コレが

<!---css切り替え--->
<?php if(is_mobile()) { ?>
<link rel="apple-touch-icon-precomposed" href="<?php echo get_template_directory_uri(); ?>/images/apple-touch-icon-precomposed.png" />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/smart.css" type="text/css" media="all" />
<?php } else { ?>
<meta name="viewport" content="width=1024, maximum-scale=1, user-scalable=yes">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); echo '?' . filemtime( get_stylesheet_directory() . '/style.css'); ?>" type="text/css" media="all" />
<?php } ?>
<?php wp_head(); ?>
</head>

<?php if(is_mobile()) { ?>

<?php } else { ?>

<?php } ?>

<?php wp_head(); ?>

</head>

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

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

モバイル用CSSの修正箇所

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

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/smart.css" type="text/css" media="all" />

1	<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/smart.css" type="text/css" media="all" />

を

<link rel="stylesheet" href="<?php bloginfo('template_url');  echo '/smart.css?' . filemtime( get_stylesheet_directory() . '/smart.css'); ?>"  type="text/css" media="all" />

1	<link rel="stylesheet" href="<?php bloginfo('template_url'); echo '/smart.css?' . filemtime( get_stylesheet_directory() . '/smart.css'); ?>" type="text/css" media="all" />

に修正します。

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

<!---css切り替え--->
<?php if(is_mobile()) { ?>
<link rel="apple-touch-icon-precomposed" href="<?php echo get_template_directory_uri(); ?>/images/apple-touch-icon-precomposed.png" />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/smart.css" type="text/css" media="all" />
<?php } else { ?>
<meta name="viewport" content="width=1024, maximum-scale=1, user-scalable=yes">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="all" />
<?php } ?>
<?php wp_head(); ?>
</head>

<?php if(is_mobile()) { ?>

<?php } else { ?>

<?php } ?>

<?php wp_head(); ?>

</head>

↑コレが

<!---css切り替え--->
<?php if(is_mobile()) { ?>
<link rel="apple-touch-icon-precomposed" href="<?php echo get_template_directory_uri(); ?>/images/apple-touch-icon-precomposed.png" />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="<?php bloginfo('template_url'); echo '/smart.css?' . filemtime( get_stylesheet_directory() . '/smart.css'); ?>"  type="text/css" media="all" />
<?php } else { ?>
<meta name="viewport" content="width=1024, maximum-scale=1, user-scalable=yes">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); echo '?' . filemtime( get_stylesheet_directory() . '/style.css'); ?>" type="text/css" media="all" />
<?php } ?>
<?php wp_head(); ?>
</head>

<?php if(is_mobile()) { ?>

<?php } else { ?>

<?php } ?>

<?php wp_head(); ?>

</head>

手順は以上となります。

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

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

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

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

↓このようになります

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

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

まとめ

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

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

- PC・web, STINGER

Comment

フォントの大きさと行間を変えてみたより:

2014年6月28日 2:47 PM

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

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

2014年7月7日 10:20 AM

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

返信
stinger3forLADYで左寄りの件 | 黒髪部より:

2015年8月5日 7:16 PM

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

返信
フォントの大きさと行間を変えてみた | 交通事故被害者を２度泣かせないより:

2020年1月4日 10:41 PM

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

返信