フリーランス|WEB 制作経験丸7年、制作会社様からのご依頼に丁寧・高クオリティでお手伝いいたします。 IRODORI DESIGN

B L O G

【.htaccess】サブディレクトリでルート相対パスを使う方法

.htaccess
ルート相対パス

こんにちは、岐阜・名古屋を拠点に全国各地からご依頼いただくWEBサイトを制作しているフリーランスエンジニアの寺井です。

画像やCSSなどのファイルを参照する際には、通常「絶対パス」、「相対パス」、そして「ルート相対パス」の3種類の書き方があります。
ルート相対パスを使用する場合、参照の起点は常にWEBサーバーの最上位にあるルートディレクトリになります。

WEBサイトのファイル一式をサブディレクトリにアップロードすると、ルート相対パスで参照されているファイルがリンク切れを引き起こす可能性があります。
この問題を解決するためには、参照されているファイルをルートディレクトリを基準に移動させるか、相対パスに変更するか、または絶対パスに変更するかのいずれかの方法を選択する必要があり、そのまま一式をアップロードすることは出来ません。

最終的には、再度ルート相対パスに書き換えることで問題を解決できますが、出来るだけそのままの記述を維持したいという場合もあります。
そこで今回はサブディレクトリでルート相対パスを使う方法をご紹介したいと思います。

前提条件

まずはじめに前提条件を記載します。

ディレクトリ構成は以下のような状態です。

root/
 └ staging/
   ├ index.html
   ├ css/
   │ └ style.css
   └ images/
     └ logo.jpg

そして、index.htmlからstyle.cssとlogo.jpgのパスは以下のように指定されている想定です。

<link rel="stylesheet" href="/css/style.css">
<img src="/images/logo.jpg" alt="サイトロゴ">

index.htmlに書かれているルート相対パスはindex.htmlがどんなに深い階層にアップされていたとしてもルートディレクトリにあるファイルを参照するため、参照ファイルが見つからずリンク割れになります。

root/
 ├ staging/
 : ├ index.html
 : ├ css/
 : │ └ style.css
 : └ images/
 :   └ logo.jpg
 │
 ├ css/
 │ └ style.css ← ここを参照している
 └ images/
   └ logo.jpg ← ここを参照している

サブディレクトリでルート相対パスを使う方法

サブディレクトリでルート相対パスを使う場合、.htaccssに以下のようにコードを書きます。

Options +SymLinksIfOwnerMatch
RewriteEngine on
RewriteBase /
RewriteCond %{HTTP_REFERER} /staging/
RewriteCond %{REQUEST_URI} !/staging/
RewriteRule ^(.*)$ staging/$1 [L,R]

そしてこのファイルをルートディレクトリにアップします。ここで注意が必要なのがサブディレクトリではなく、ルートディレクトリにアップするという点です。

root/
 ├ staging/
 │ ├ index.html
 │ ├ css/
 │ │ └ style.css
 │ └ images/
 │   └ logo.jpg
 └ .htaccess ← ここにアップする

これだけでサブディレクトリでルート相対パスを使うことが出来るようになります。

まとめ

いかがでしたか?
.htaccess を使うことで、サブディレクトリでルート相対パスを利用することができます。サブディレクトリにアップロードする際に書き換える方法もありますが、その際には余計な手間がかかったり、変換ミスが発生したり、不要なバグが発生する可能性が高くなるため、出来るだけ避けたいところです。
その代わりに、.htaccess を使ってサブディレクトリでルート相対パスを利用出来るように設定する方法を採用することがおすすめです。