サブディレクトリ公開でCSSパスが崩れる時の確認手順

トップページではCSSが効くのに、下層ページやサブディレクトリのページだけ崩れる時は、CSSの書き方そのものより先に「そのページがどこからCSSを探しているか」を確認します。

特にロリポップでは、独自ドメインの公開フォルダ名がURLに出ない場合と、/test/ や /lp/ のようにURLへサブディレクトリ名が出る場合があります。この2つを混ぜると、/assets/css/style.css が正解にも不正解にもなります。

このページで整理できること

• トップではCSSが効くのに、下層ページだけ崩れる原因を分ける
• 相対パス、ルート相対パス、絶対URLのどれを使うべきか判断する
• ロリポップの公開フォルダ名と、ブラウザに出るURLの違いを分ける
• CSS、画像、JavaScript、SVG図解が404/403/200のどれになっているか確認する
• AIや制作会社へ相談する時に、伏せる情報と伝える情報を分ける

最初に分けること

CSSが崩れている時は、ブラウザキャッシュ、CSSの記述ミス、パス違い、アップロード先違いが混ざりやすいです。まず「どのページでだけ崩れるか」を分けます。

サブディレクトリではCSSを探す基準点が変わる

相対パスは今開いているページから探し、ルート相対パスはドメインの根元から探します。ただし、URLに /test/ が出るサイトでは、そのURL上の置き場所も含めて考えます。

1. CSSの直接URLを確認する

まず、ページが読み込もうとしているCSS URLを直接開きます。ブラウザの開発者ツールでNetworkを開き、style.css のURLとステータスを見ます。

2. 相対パスがどこを見ているか確認する

assets/css/style.css のような相対パスは、今開いているページの階層から見た場所になります。下層ページで使うと、存在しない場所を見に行くことがあります。

<!-- 下層ページでは壊れやすい例 -->
<link rel="stylesheet" href="assets/css/style.css">

ページURL:
https://example.com/templates/lolipop/page.php

ブラウザが探すCSS:
https://example.com/templates/lolipop/assets/css/style.css

3. 公開URLにサブディレクトリ名が出るか確認する

ルート相対パスは便利ですが、サイトを本当に /test/ や /lp/ の下で公開している場合は、先頭の / がドメイン直下を指します。

4. サブディレクトリ公開用の基準パスを決める

/test/ や /lp/ 配下でサイトを見せ続けるなら、基準パスを1つ決めておくと、CSS、画像、JavaScriptの指定をそろえやすくなります。

<?php
$base_path = '/test';
?>
<link rel="stylesheet" href="<?= $base_path ?>/assets/css/style.css">
<script src="<?= $base_path ?>/assets/js/app.js" defer></script>
<img src="<?= $base_path ?>/assets/images/main.jpg" alt="">

ドメイン直下へ移す予定があるなら、移動時に $base_path = ''; へ変えるだけで済むようにしておくと、修正範囲を小さくできます。

5. 公開フォルダとURLの違いを見る

FTP上の場所とブラウザのURLは、同じ文字列になるとは限りません。ロリポップの独自ドメインで公開フォルダを指定している場合、公開フォルダ名はURLに出ないことがあります。

6. 画像やJavaScriptも同じ考え方で見る

CSSだけでなく、画像、JavaScript、SVG図解、OGP画像も同じように階層で崩れます。ページの階層が深いほど、相対パスはずれやすくなります。

• 共通CSS: /assets/css/style.css または /test/assets/css/style.css
• 共通JS: /assets/js/app.js または /test/assets/js/app.js
• 共通画像: /assets/images/main.jpg または /test/assets/images/main.jpg
• ページ固有画像: そのページと同じフォルダに置くなら相対パスでもよい

AIに貼る相談メモ

AIに相談する時は、FTP情報や管理画面情報ではなく、公開URL、CSSの直接URL、link タグ、ファイルの置き場所を整理します。

ロリポップでサブディレクトリのページだけCSSが崩れています。

崩れているページURL:
例: https://example.com/test/page.php

正常に見えるページURL:
例: https://example.com/

CSSのlinkタグ:
例: <link rel="stylesheet" href="assets/css/style.css">

ブラウザが実際に読み込もうとしているCSS URL:
例: https://example.com/test/assets/css/style.css

CSSの直接URLを開いた結果:
例: 200 / 404 / 403 / 古いCSSが出る

ロリポップの公開フォルダ:
例: /example

FTP上のCSSの場所:
例: /example/test/assets/css/style.css

公開URLにサブディレクトリ名が出るか:
例: 出る / 出ない / 分からない

伏せている情報:
FTPホスト、FTPユーザー名、FTPパスワード、管理画面URL、DB接続情報、個人情報

相対パス、ルート相対パス、公開フォルダ、URL上のサブディレクトリのどこが原因か、次に確認する順番を教えてください。

制作会社やサーバー会社へ聞く時の文面

自分で判断しきれない時は、接続情報ではなく、URLと確認結果だけを伝えます。入力しながら整理したい場合は、問い合わせ文メーカーや公開フォルダ・アップロード先確認メモメーカーを使います。

サブディレクトリ配下のページだけCSSが崩れる件で確認したいです。

崩れているURL:
https://example.com/test/page.php

正常に見えるURL:
https://example.com/

CSSの直接URL:
https://example.com/test/assets/css/style.css

確認結果:
- CSSの直接URLは 200 / 404 / 403 でした
- ページ内のlinkタグは次の指定でした:
- ロリポップ側の公開フォルダは次の設定です:
- FTP上のCSSの場所は次の場所です:

確認したいこと:
公開URLに出るサブディレクトリ名と、FTP上の公開フォルダ・CSSの置き場所が合っているか確認したいです。

FTPパスワード、DB接続情報、管理画面ログイン情報は記載していません。

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

公開フォルダやアップロード済みファイルの見え方は、サーバー側の設定に関わります。画面名や仕様が変わる可能性があるため、最後はロリポップ公式情報でも確認してください。

次に読む記事