常時SSL化を進める際、自動チェックまたはプレビューによる目視チェックでエラーが出ることがあります。

本ページではエラーが出たときの対応方法をご案内します。

必要な対応方法

参照先のURLを https:// に変更する必要があります。

参照先とは
ページに「読み込んでいるもの」です。
CSSやJavaScript、画像、音楽、映像、テキスト、HTMLなど様々な読み込んでいるファイルが対象になります。

具体的には下記のようなファイルです。

例：
<link rel=“stylesheet” href=“http://not-my-shop.com/sample.css”>
<script src="http://not-my-shop.com/sample.js"></script>
<img src="http://not-my-shop.com/sample.jpg">
<object data="http://not-my-shop.com/sample.jpg" type="image/gif"></object>
<embed src="http://not-my-shop.com/sample.jpg">
<iframe src="http://not-my-shop.com/sample.html"></iframe>
<form method="post" action="http://not-my-shop.com/"></form>
<audio src="http://not-my-shop.com/sample.ogg" controls></audio>

※ その他、cssで設定しているbackground-imageなども修正する必要があります。

修正の判断ポイント

参照URLが【https://】で見ることができるか☑

■参照先が【 https:// 】で見れる場合

参照先のURLに飛んだとき、httpsで見れるようであれば、参照先のURLの記述をhttpsに修正するだけでOKです。

例：
http://not-my-shop.com/sample.jpg　->　https://not-my-shop.com/sample.jpg

■参照先が【 https:// 】で見れない場合

1. 参照ファイルを置いている場所を【https://】化する

参照ファイルを置いている外部の場所をSSL化します。

ファイルを置いているサーバーに「常時SSL」する契約プランがあれば、そのプランを契約することで、参照ファイルの置き場所を【https://】化できます。

参照ファイルのURLが【https://】で表示されるようになったら、カラーミーショップ内の参照ファイルのURLを【https://】に変更しましょう。

2. 参照ファイルを【https://】の場所に移動する

参照ファイルの置き場所がカラーミーショップ以外にあってhttpsで表示できない場合、SSLに対応している場所(https://...)にアップロードしなおし、それを参照するようにURLを変更します。

移動の際は、同じ階層に保存をしたほうがURL変更が簡単になります。複雑な場合は、変更前のURLと変更後のURLをまとめてメモし、URLの変換をするとよいでしょう。移動に際しては、ファイルの保存先としてカラーミーショップ内にもFTPによるファイルアップロード機能をぜひご活用ください。

※ファイルの移動の際には、完全に切り替えが終わるまで、現在httpに置いているファイルは削除せずに、複製したファイルを新しくhttpsの場所に置いてください。

あとは、リンクを新しい置き場所のURLに書き換えたら完了です。新しい置き場所と以前の置き場所で階層が異なる場合は、新しい置き場所のURLを正しく記載しましょう。

エラーになっている箇所の見つけ方

例えばプレビューをご確認いただいた際に、常時SSLを示す鍵マークが出ていなかった場合、ご利用のテンプレートやHTMLの記述が可能な箇所（商品説明など）の記述に原因があると考えられます。 自動チェックに引っ掛からなかった箇所になりますので手動にてエラーの修正が必要となります。

エラー箇所を見つけるには、「Chrome」ブラウザのデベロッパーツールが便利です。

1. Chromeでショップページを表示
2. 右クリック→検証 でデベロッパーツールを開く
3. 「Security」もしくは「プライバシーとセキュリティ」タブで「保護されていないコンテンツ」がないか確認
   ※うまくエラー個所が出てこないときは、ショップページを再読み込みすると出てくることがあります。 （URLの横にあるマークをクリックします）

※ デベロッパーツールの詳しい使い方は下記の参考サイトをご覧ください。Chromeのデベロッパーツールの使い方はサポート対象外になります。

参考：Chrome for Developers プライバシーとセキュリティパネル

修正の必要がないもの

aタグで設定されたリンク

例：　<a href="http://yahoo.co.jp"></a>

普通のテキストリンクやバナー画像のリンクで使われるaタグに設定された外部リンクは変更する必要はありません。

参照先が相対パスで書いてあるもの（http://がないもの）

例：　<img src="../img/sample.jpg">

上記のように相対パスで書いてあれば、変更の必要はありません。
相対パスと絶対パスの違いについては下記をご参考ください。

参考：【初心者向け】絶対パスと相対パスの違いをイラストを使って解説！