httpをhttpsにしたときのレイアウト崩れについて

Question

いつもお世話になっております。
本日お伺いしたい内容なのですが、
いくつかのページでCSSが効いてないようなレイアウト崩れを起こしておりました。
原因として考えられるとしたらサイトのｈｔｔｐをｈｔｔｐｓに変えたくらいで他はいじってないと思います。
ｈｔｔｐをｈｔｔｐｓにした際にCSSが効かなくなることがあるらしいことは調べたのですがそれの
改善策を見つけることができておりません。
もし何か改善策をご存知でしたらお教え頂けたら幸いです。

Answer

ECマスターズの田中です。

ライムさんのショップのソースを確認したところ、
各スタイルシートを「http://」で始まるCSSにより読み込んでおられるようです。

HTTPSは、HTTPと違い通信内容が暗号化され、安全にデータのやりとりができるのですが、
（楽天大学に、わかりやすい動画がございます→ https://daigaku.rms.rakuten.co.jp/rmsapp/watch/60069 ）
ページ全体を折角HTTPSでやりとりしているのに、
その中で外部ファイル（CSSファイル、JSファイル等）をHTTPで読み込んでしまっては
その部分は暗号化されていないため、セキュリティが台無しになってしまいますので、

HTTPSで読み込んだページの中に、HTTPで外部ファイルを読み込む指示があると
ブラウザによっては読み込みを拒否してしまうことがあります。

逆に、HTTPで読み込んだページの中にHTTPSで外部ファイルを読み込むのは問題ないため、
各外部ファイルのURLを、「http://」から「https://」にご変更いただくことで
解決する可能性がありますので、
まずは、上記の通りご変更いただきますようお願いします。

https://www.rakuten.co.jp/shops/manual/navi/design/02_r001.html
上記URLの通り、ヘッダー・フッター・レフトナビの内容は
既にhttps化対応を行っていただくことが可能となっております。

もし、URLを変更しても問題が解決しない場合は、
実際に崩れているページを確認する必要がありますので、
崩れたページのURL、商品ページの場合は商品管理番号など、
崩れたページを確認するための情報をお知らせください。
フォーラムにてご回答いただき辛い場合は、リクエストフォームよりお知らせください。