ロリポップでCSS変更が反映されない時の確認順番

ロリポップでCSSを変更してFTPでアップロードしたのに、画面の色、余白、ボタン、スマホ表示が変わらないことがあります。

この時はCSSの書き方だけを疑うより、読み込まれているCSSファイル、キャッシュ、アップロード先、更新日時を順番に確認する方が早いです。特にロリポップへFTPでアップロードしている場合、ブラウザキャッシュ、ロリポップ！アクセラレータ、別フォルダへのアップロードが混ざりやすいです。

確認順の全体像

CSSが反映されない時は、キャッシュ、読み込みパス、サーバー側の更新日時を順番に確認します。

まず強制再読み込みする

ブラウザはCSSをキャッシュします。古いCSSを見ているだけなら、強制再読み込みで変わります。

実際に見る順番

「CSSを保存したのに変わらない」と感じた時は、次の順番で確認します。途中で直ったら、そこで止めて大丈夫です。

linkタグのパスを見る

HTMLやPHP側で読み込んでいるCSSのパスが違うと、編集したCSSは使われません。

<link rel="stylesheet" href="/assets/css/style.css?v=2.6">

先頭の / はサイトのルートから見たパスです。記事が深いフォルダにあっても、同じCSSを読み込めます。

検証ツールでCSSが200か確認する

ブラウザの開発者ツールでNetworkを開き、style.css が 200 で読み込まれているか確認します。

• 404: CSSのパスが違うか、アップロード先が違う
• 200 でも古い: キャッシュか別ファイルを編集している
• 403: パーミッションやアクセス制限を確認

FTP側の更新日時を見る

FTPソフトの右側で assets/css/style.css の更新日時を見ます。ローカルで保存した時刻に近くなければ、サーバーへ送れていません。

CSSだけを更新したつもりで、別サイトのフォルダへ送っていたというケースもあります。独自ドメインの公開フォルダをもう一度確認します。

ロリポップ！アクセラレータを確認する

ブラウザを強制再読み込みしても変わらず、CSSの直接URLでも古い内容が見える場合は、ロリポップ側のキャッシュも確認します。

ロリポップ！アクセラレータを使っている場合、設定変更やキャッシュ削除の反映に時間がかかることがあります。キャッシュ削除後すぐに判断せず、少し時間を置いてから再確認します。

バージョン番号を変える

キャッシュ対策として、CSSのURL末尾に付けているバージョンを変えます。ファイル名は同じでも、ブラウザは別URLとして読み直します。

<link rel="stylesheet" href="/assets/css/style.css?v=20260509">

画像差し替えでも同じ考え方を使えます。画像ファイルを上書きしたのに古い画像が出る場合は、画像URLの直接確認と、HTML側の img src や srcset に古いURLが残っていないかを確認します。詳しくは 画像やCSSを更新したのに古いまま表示される時の直し方 で整理しています。

毎回ランダムな値は付けない

?v=999 のような値は、一時確認には便利です。ただし、毎アクセスで現在時刻やランダム値を付けると、ブラウザが毎回CSSを読み直すため表示が遅くなります。

運用としては、CSSファイルを更新した時だけ値が変わる形が安全です。PHPサイトなら filemtime() を使うと、CSSの更新時刻を自動で ?v= に入れられます。使うべき場面と避けるべき場面は、画像やCSSのキャッシュバスター運用 で詳しく整理しています。

CSSの記述ミスも確認する

CSSは途中にミスがあっても全体が真っ白になるわけではありません。ただし、閉じ括弧の不足などで後ろの指定が効かなくなることがあります。

.button {
  color: white;
  background: #2563eb;
/* } が抜けると、後ろのCSSが崩れやすい */

AIに相談する時のメモ

AIに聞く時は、CSS全文をいきなり貼るより、どのCSSを編集し、どのURLで確認し、何が変わらないかを先に整理します。パスワードやFTP情報は貼らないでください。

ロリポップでCSS変更が反映されない件について相談します。

変更したCSSファイル:
例: /assets/css/style.css

変えた内容:
例: ボタンの背景色を青から緑に変更

確認しているページURL:

CSSファイルの直接URL:

FTPソフト右側の更新日時:

試したこと:
- Ctrl + F5 / Command + Shift + R:
- 別ブラウザ:
- CSSの直接URL確認:
- linkタグのhref確認:
- ロリポップ！アクセラレータのキャッシュ確認:

パスワード、FTP接続情報、DB情報は伏せています。
初心者向けに、次に見る順番を教えてください。

公式情報で確認するところ

関連記事

• Web公開トラブル症状別レスキュー
• AIコードを本番に入れる前後の安全確認入口
• ロリポップ公開トラブル解決まとめ
• FTPでアップロードしたのに反映されない時の確認手順
• 画像やCSSを更新したのに古いまま表示される時の直し方
• ロリポップでサイトを公開する手順
• CSSの基本：コピペで使える完全ガイド
• CSSで長い説明文やログをスクロール枠にする方法