常時SSL化チェックでのエラー対応方法

こちらは、常時SSL化する際の「自動チェック」もしくは「プレビューチェック」でエラーが出たときの対応方法です。

必要な対応方法

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

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

変更対象となるもの

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

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

エラー箇所を見つけるには、Chrome」ブラウザのデベロッパーツールが便利です。
HTTPS接続の状態をチェックできるGoogle ChromeのSecurityパネルを使用します。
Chromeの[ 表示 ]の[ 開発/管理 ]から、[ デベロッパーツール ]を開きます。詳しい使い方は下記の参考サイトをご覧ください。
※ Chromeのデベロッパーツールの使い方はサポート対象外になります。

【参考】HTTPエラーチェックの探し方:レンタルサーバー比較口コミランキング
※うまくエラー個所が出てこないときは、ショップページを再読み込みすると出てくることがあります。 (URLの横にある マークをクリックします)

例: <img src="http://example.com/img/sample.jpg">

http:// https:// に変更しましょう。

http://から始まる自分のショップ以外のURLが参照先に設定されている

自分のショップ以外のURLに参照先が設定されているものが対象になります。

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

例:
<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なども修正する必要があります。

上記のようにショップ以外の外部サイト(Webサーバーなど)から、
ファイル(CSS、JavaScript、img、iframeなど)を読み込んでいる場合は、
その参照先URLだけでなく、参照先のファイル内に書いてあるURLもhttps:// 化が必要になります。

変更方法

画像やファイルを置いている場所:参照先が【 https:// 】で見れる場合

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

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

画像やファイルを置いている場所:参照先が【 https:// 】で見れない場合

2つの方法が考えられます。いずれかでご対応ください。

  • ファイルを置いているサーバーをSSL対応
    ファイルなどを置いているレンタルサーバーをSSL対応します。SSL対応後に参照するURLをhttpsに変更します。
  • ファイルをカラーミーショップなどSSL化している場所にアップし直す
    置き場所の外部サイトが非SSLの場合は、SSLに対応している場所(https://...)にアップロードしなおし、それを参照するようにURLを変更します。
    CSS・JS・画像ファイルなどに関してはFTPを使って、カラーミーショップにアップロードすることもできます。 FTPでのファイルアップロードに関してはこちら

※ ファイルの移動は、完全に切り替えが終わるまでは、現在置いている場所にファイルは残したまま、複製したファイルをSSLに対応している場所(https://...)に置いてください

変更しなくてよいもの

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

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

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

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

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

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

【参考】【初心者向け】絶対パスと相対パスの違いをイラストを使って解説!  webliker(web好きを生産するオウンドメディア)

 

 

 

この記事は役に立ちましたか?
  • はい (17)
  • いいえ (17)
2019.10.15