SSL対応をしたらスライドショーが止まった。画像が表示されない。

こんにちは。
小規模ECサイトの中の人です。一年振りの投稿です。爆裂炸裂サボり癖…💤

ECサイトの他にWebサイトもいくつか運営してまして。そちらで何度か困った事例と対応をメモとして残しておきます。

SSL対応をしたらスライドショーが止まった

10年前に作ったWebサイト

10年前に作ったWebサイトをリニューアルをすることに。デザインは数ヶ月掛かるから、先にSSL対応だけしておこうかね〜と手続きを。サーバーはさくらインターネットです。

Webサイトは

• 情報掲載のみ
• お問い合わせフォーム不要（個人情報の取り扱いナシ）

これなら一番安いプラン「ドメイン認証型 990円／年間」で良いかなと。（2023年3月15日現在の価格）
ポチポチッと手続きを。

これなら簡単に出来る。後輩（仕事仲間）に覚えてもらうために手続きをお願いすることに。

手続きはすぐに終わったのですが

ー　後日　ー

WebサイトはHTMLとCSSで作ったもの。10年前のままなのでHTML4です（懐かしや）。コードは特にいじってないしなぁ。なんじゃろか。

WordPressサイトにSSL対応をして画像が表示されなくなった

そういえば以前も同様の現象が。原因は…

別のWebサイトをSSL対応した時にも同様の現象が。一部の画像が表示されなくなったんですよね。5つのサイトで対応したかな。どれもWordPressで作ったWebサイトです。あの時も苦しんだな。結果「パス」が原因でした。

パスってなんじゃい！の方へ
簡単にいうと画像の住所です。住所が間違っていたんです。Webサイトは、サーバーにデータをアップロード→公開→表示 してます。SSL対応したので正しい住所を教えてあげる必要があったのですね。

WordPressのテーマ機能を使って作っているので、ほとんどが自動でhttpsに変更されたのですが、デザインをテコ入れしたくでhtmlを独自に書いていたところや、直書きしていたところの画像が表示されなくなっていました。なので

確認のステップ

1. 画像が表示されていないページを確認
2. 対象となる画像のコード（html）を確認
3. http → httpsに変更

これで表示されるようになりました。

今回の場合は

スライドショーが止まったWebサイトはWordPressではなく、普通の？HTMLとCSSで作ったものです。

チェック対象のWebサイト

• 10年前に作ったWebサイト（HTML、CSS、jQuery）
• HTML4
• 相対パス（WordPressは絶対パス）

対応策と解決

スライドショーのhtmlをチェック

スライドショーの画像はリストで記述してました。相対パスで書いてるし、ここにはhttpのパスの記述はありませんでした。

スライドショーはjQueryで作っていた

すっかり忘れていたよ。10年前のものですし。更新はしていたけど本文中の文字をいじったり画像を差し替える位だったもんね。こちらも懐かしい。バージョンが1.5.2だよ。

HTMLエディターで「http」を検索

HTMLエディタの検索機能を使って「http」を見つけます。複数ヒット。あったあった。外部ソースをひっぱってきて使っていたところに「http」がありました。恐らくコレかなと。

httpsに修正する前に

不安になりコピペしてアドレスバーに貼り付けてみる。次にhttpをhttpsにしてみる。
よし、コード確認できた。大丈夫そう。

スライドショーが復活しました。良かった。

WordPressサイトで同じような現象が起こっていたたのが功を奏しました。推測できたので時間もさほどかからず。止まった時は

ちょっとめげました。だってもうすぐリニューアルするんだもん。時間かけたくない。

そういえば画像が表示されなくなった時はテンパったなぁ。メダパニですよ。相談できる人もいないし。レンタルサーバーに問い合わせても対応してくれないだろうし（もちろんレンタルサーバー会社側の問題じゃないからね）。

解決して安心しました。

とはいえ、やっぱり10年前のものは古いなぁー。懐かしのコードがチラホラでしたよ。リニューアルを急ごうと思います。