お問い合わせフォームなどでメールアドレスや住所を入力してもらう場合、平文で送信すると内容を傍受されてしまう可能性もあります。
そこで送信内容を暗号化して送ることができるのですが、その暗号化プロトコルのことをSSLといいます。WEBサイトでSSLを利用したい場合、独自SSL証明書を購入してサーバーに導入するのが一番ですが、コストがかかってしまいます。
レンタルサーバーによっては、共用SSLを用意してあることがありますので、共用SSLを利用する方も多いと思います。
共用SSLを利用すると、たいていの場合URLを以下のように変えてアクセスしなくちゃいけません。
https://sslserver.jp/example.com/contact
共用SSLは非常に便利なのですが、URLが変わることで弊害が出てくることもあります。それは、サイトに適用していたスタイルシートや画像がロードされなくなることです。
実際に共用SSLを利用する機会がありまして、その時に画像やスタイルシートが正常にロードできませんでした。
色々試していたら対処できたので、対処法を備忘録的に残しておきます。
CSSがロードされない場合の対処法
結論からいうと、ロードするCSSを絶対パスで指定することで、共用SSLを利用してアクセスした場合も正常にCSSをロードできるようになります。
相対パスでロードするようにしていたら、URLが変わることで存在しないファイルをロードしようとしてしまうので、スタイルが崩れてしまいます。
もしもCSSの読み込みを以下のようにしていたら、、、
<link type="text/css" rel="stylesheet" href="css/style.css" />
以下のように絶対パスで指定します。
<link type="text/css" rel="stylesheet" href="http://example.com/css/style.css" />
このように絶対パスでロードすることで、URLが変わっても読み込むファイルは同じなので、SSLページでも正常にスタイルシートを適用することができます。
画像がロードされない場合の対処法
画像の場合は、CSSとは逆に相対パスで指定することで正常にロードできます。
例えば、以下のように画像をロードしていた場合、、、
<code><img src="http://example.com/img/image.jpg" alt="画像" /></code>
以下のように相対パスで指定するようにします。
<code><img src="img/image.jpg" alt="画像" /></code>
またCSS内でも背景画像など画像の読み込みは相対パスで指定するようにします。
.class1{
background:url(img/image.jpg) no-repeat;
}