仕事でサイトルート相対パスで記述されたhtmlに出くわす事が多く、Dreamweaverでプレビューされない、ローカルでプレビューできない状態が辛かったので、プレビューする方法を調べてみました。
パスの種類について
まず始めにパスの種類について簡単に説明します。
サイトのURLやファイルのリンク指定は大きく分けて、相対パス・絶対パス・サイトルート相対パスの3種類があります。それぞれの指定方法は以下の様になります。
相対パス
リンク指定が「./（ドットスラッシュ）」または「../」で始まる書き方を「相対パス」と呼びます。
これは現在いる階層を基準にして、目的地や情報がどこにあるのかを伝えます。
<img src="./img/title.png" alt="無能屋">上記の例だと、現在いる階層（./）にある「img」ディレクトリの「title.png」を示しています。
<img src="../img/title.png" alt="無能屋">上記の例になると、現在いる階層の一つ上の階層（../）にある「img」ディレクトリの「title.png」を示す事になります。
絶対パス
リンク指定が「http://」または「https://」で始まる書き方を「絶対パス」と呼びます。
<img src="https://munouya.com/wp/img/title.png" alt="無能屋">上記の例だと、「https://munouya.com/wp/」上にある「img」ディレクトリの「title.png」を示しています。
サイトルート相対パス
本題となるサイトルート相対パスは、リンク指定が「/（スラッシュ）」から始まる書き方をサイトルート相対パスと呼びます。
簡単な言い方をすると、「絶対パス」の「http://」を「/」に置き換えた指定が「サイトルート相対パス」という事になります。
<img src="/img/title.png" alt="無能屋">上記の例がどこを示しているかというと、htmlが置かれているサイトのURLとなります。
例えば当ブログに置かれているなら、「https://munouya.com/wp/」上にある「img」ディレクトリの「title.png」を示しています。
Dreamweaverでプレビューする方法
「サイトルート相対パス」の問題点は、ローカル環境でプレビューできない点です。
サイトルート相対パスで記述されたhtmlをDreamweaverで開くとこんな感じになります。
一応ソースも記述。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Sample</title>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<h1><img src="/img/title.png" alt="無能屋"></h1>
<dl>
<dt><img src="/img/vs.png" alt="VS"></dt>
<dd><img src="/img/dog.jpg" alt="犬"></dd>
<dd><img src="/img/cat.jpg" alt="猫"></dd>
</dl>
</body>
</html>画像の右側のライブビューに本来ならプレビューされるはずですが、サイトルート相対パスで記述している為、スタイルシートと画像が反映されていない状態になっています。
それでは、ここからプレビューできるようにDreamweaverの設定を行って行きます。
ライブビューでプレビューする方法
STEP1
メニューの[サイト(S)]から[新規サイト(N)]を選択します。
STEP2
サイト設定ウィンドウの左側から[サイト]を選択（デフォルトで選択状態）し、右側の赤枠内を指定します。
「サイト名」は自分が管理しやすいように、サイト名を付けると良いでしょう。
「ローカルサイトフォルダー」はプレビューしたいhtmlが入っているフォルダーを指定します。本記事では「C:\Users\Owner\Desktop\sample\」の中にサイトルート相対パスで記述された「index.html」が入っています。
STEP3
続けて左側から[詳細設定]-[ローカル情報]を選択し、右側の赤枠内を指定します。
「相対リンク」項目は「サイトルート」を指定します。
「Web URL」項目は適当なURLを記述します。
最後に右下の「保存」ボタンをクリックします。
Web URLについて補足
Web URLの入力にあたり、実在するURLを入力しなければならないように思えますが、実際は「http://」から始まれば何でも良いようです。極端に言えば、「http://」だけ指定してもプレビューは可能です。
Web URLが何の為の指定かというと、Dreamweaver自身が「http://」から始まるパスは理解できるけど、「/」から始まるパスは理解できないって頭をしているので、Dreamweaverが理解できるように「サイトルート相対パス」を「絶対パス」に置換する為に代替で「http://」から始まるURLの「素材」を指定してくれって事になります。
例えば、
<img src="/img/title.png" alt="無能屋">このパス指定だとDreamweaverは理解できない為、「Web URL」で「http://」と指定してあげる事によって、
<img src="http://img/title.png" alt="無能屋">この様に内部的に置き換えてパスを理解してくれます。
設定完了
以上で設定は完了し、ライブビューにプレビューされるようになりました。
※表示されない方はタブまたはDremweaverを閉じてから読み込み直すとプレビューされると思います。
注意点
この設定は、STEP2で指定した「ローカルサイトフォルダー」と、STEP3で指定した「Web URL」をそれぞれ起点（現在いる場所として）に、「相対パス」でパスを見ることになりますので、階層を合わせる必要があります。
例えば、サイトルート相対パスで記述されているパスの種類が以下のようにあったとします。
/css/style.css
/img/title.png
これらは「ローカルサイトフォルダー」で指定したパスを起点にファイルを参照する事になるので、STEP2で「C:\Users\Owner\Desktop\sample\」を指定したのであれば、
C:\Users\Owner\Desktop\sample\css\style.css
C:\Users\Owner\Desktop\sample\img\title.png
このような階層になってなければなりません。
プレビューがうまくいかない方は「ローカルサイトフォルダー」の指定先も確認してみてください。
リアルタイムプレビューでプレビューする方法
リアルタイムプレビューでプレビューする場合、さらにもう一つ設定を行う必要があります。
STEP1
メニューの[編集(E)]から[環境設定(E)]を選択します。
STEP2
環境設定ウィンドウの左側から[リアルタイムプレビュー]を選択し、右側の赤枠「一時ファイルを使用してプレビュー」にチェックを入れて「適用」します。
STEP3
リアルタイムプレビューを実行すると正常にプレビューされます。
