Yahoo!ショッピングと楽天のhttps化に伴ってファイルの変更が必要になったのでパスの指定方法を調べてみた。
https化に伴ってすることを確認
サイトの証明書は用意されてるので置いといて、今回の仕様変更でhttps化に必要なのはページ内の読み込むファイルのパスを全て「https」で始まるものに変更すること。
対応できていたらブラウザのアドレスバー付近に「保護された通信」のような表示される。
ブラウザとかSSL証明書とかによっても表示が違う。
やりたいこと
トリプルや楽天GOLDでページを作成していて、ショッピングガイドページなんかはPCとスマホでフォルダの階層が違う。
PC用のhtmlをスマホ用にloadしてcssでスマホ用にデザインを変更してたから、画像は絶対パス指定。
画像を相対パスで指定し直すと階層が違うのでloadする側のソースが表示されなくなるのでNG。
絶対パスで指定し直すとソースが長くなるし、httpとhttpsどちらにも対応したいし、後々変更があったときにめんどくさいので今回は却下。
相対パスと絶対パス以外にあるのか調べたらあるんですね！
その前に。
絶対パス
http://mugen00.moo.jp/web/test.jpgのように「http://ドメイン名/フォルダ名/ファイル名」の指定の仕方。
どの階層からでも参照できるので構造的にはわかりやすい。
外部ドメインのファイルを参照する場合は必須。
相対パス
このような階層があったとして、
http://mugen00.moo.jp/web/html/test.html
./test.jpgのように「階層の指定/ファイル名」の指定の仕方。
階層の指定はそのhtmlファイルから参照するファイルの位置を指定する方法。
今回は「html」フォルダの「test.html」に記述するやり方です。
./ 「html」のフォルダと同じ階層にある「test.jpg」を参照する。
../ 「html」のフォルダから一つ上の階層「web」のフォルダと同じ階層にある「test.jpg」を参照する。
../フォルダ名/ 「html」のフォルダから一つ上の階層「web」のフォルダと同じ階層にある「img」のフォルダの中の「test.jpg」を参照する。
PCでのフォルダ移動を思い浮かべるとわかりやすいかも。
書くファイルの種類によって基準が違うこともあるので注意。
cssで相対パス指定の場合、
そのcssを基準にしての相対パス。htmlは関係ない。
jsで相対パス指定の場合、
読み込むhtmlを基準にしての相対パス。jsがいる階層は関係ない。
頻繁にサイトの構造が変わる場合を除いては、基本的にパスの指定は相対パスで問題ないと思います。
サイトルート相対パス
/web/test.jpg
サイトのルートディレクトリを指す、「/(スラッシュ)」から始まってそれ以降の階層を指定する方法。
まさに今回の条件にぴったりの方法でした！
これで階層が違うhtmlをloadしてもルートディレクトリからの指定なので画像も問題なく表示されます！
特殊なパターン以外は相対パスで問題ないと思います。
同じ画像を３つのパターンで指定するデモを作ってみました。
画像クリックで指定方法を表示できます。
コメント