ブログSSL化により画像が表示されないエラー解消!ロリポップ/ワードプレス

長々と書いてきましたブログSSL化にともなう古い画像のエラーですが、やっと全てが解消しました!

備忘録を兼ねて、なにが起こってどう解決したか書いておきます。

読んでもおもしろくないです。はい。


エラー発生までの背景

このブログですが、2017年11月まではライブドアブログを使って書いていました。

2017年11月、より自由に管理がしたくなりロリポップという会社のサーバーを借りて、ワードプレスというブログ構築ソフト(CMS)を使って運営するかたちに移行しました。

その際に独自ドメイン(yukinoblog.site)を取得し、ブログURLがhttp://yukinoblog.site/になりました。

その後2018年10月、ブログをSSL化しました。ブログURLがhttps://yukinoblog.site/になりました。

ロリポップFTPから.htaccessにアクセスしてリダイレクト用の設定を追記し、俺のブログ上ではhttpにアクセスされてもhttpsにリダイレクトされるようにしました。


エラー内容

上記の作業後、2017年11月より後に投稿したブログは何も問題なかったのですが、それ以前の投稿は画像が表示されなくなりました。

つまり、ライブドアブログから移行した投稿の画像にのみエラーが発生しました。

エラー内容は404エラー。

原因を調べてみると、それらの画像は独自ドメインのアドレスで表示されないことが原因だと思われました。

ブログ上では画像も投稿自体と同じくアドレスが存在しています。

例えばある画像をアップロードすると、https://yukinoblog.site/wp-content/uploads/media/1/001みたいなアドレスが割り当てられ、投稿上にこのアドレスを書くことでその画像が表示されるわけですね。(この画像アドレスはテキトーです)

ちなみに、ロリポップでは独自ドメインではなく、ロリポップ自体のドメインも存在しています。

例えば、http://123456789.main.jp/というドメインだとしましょう。

画像はまずロリポップドメインに基づきhttp://123456789.main.jp/wp-content/uploads/media/1/001ってアドレスが割り当てられますが、独自ドメインの設定によりその画像がhttp://yukinoblog.site/wp-content/uploads/media/1/001でも表示されるようになります。

SSL化しているので、https://yukinoblog.site/wp-content/uploads/media/1/001でも同じ画像が表示されます。

先ほどの設定でhttpへのアクセスはhttpsにリダイレクトされるようになっているので、http://yukinoblog.site/wp-content/uploads/media/1/001で画像を表示しようとしても強制的にhttps://yukinoblog.site/wp-content/uploads/media/1/001に飛びます。

新しい投稿は全てその通りになっており、問題ありませんでした。

しかし古い画像は、なぜか独自ドメインのアドレスで表示されなかったんです。

例えばOLD001って名前の画像としましょう。

本来はhttps://yukinoblog.site/wp-content/uoploads/media/OLD001で表示されるはずなのに、されない。

リダイレクト設定をはずしてhttp://yukinoblog.site/wp-content/uploads/media/OLD001で試して見てもダメ。

なので俺は、なにかサーバー側の問題で、これらの古い画像にだけ独自ドメインが適用されていないのかな?と疑いました。素人考えで。


応急処置

これまで表示されていた古い画像が表示されなくなったのは、全てのhttpアクセスをhttpsに飛ばすよう設定したからです。

この時点ではあくまで推察でしたが、古い画像はロリポップドメインのアドレスでは表示できていたはずです。

つまり、http://123456789.main.jp/wp-content/uploads/media/OLD001のままなら問題なく表示されていたはずです。

しかしリダイレクト設定によりそのアドレスで画像を表示しようとしても強制的にhttps://123456789.main.jp/wp-content/uoploads/media/OLD001に飛ばされてしまう。

しかしhttps://123456789.main.jp/というアドレスは存在していない。

なので画像が表示されない、という状況だと推察しました。

最終的にはSSL化した独自ドメインのアドレスで表示されるようになってくれないと困るのですが、とりあえずはすぐに画像を表示してくれないと困るので、古い画像が入っているフォルダにもうひとつ.htaccessを作成しそのフォルダの中だけはリダイレクトを禁止しました。

つまり、古い画像だけはもともとのhttp://123456789.main.jp/wp-content/uploads/media/OLD001というアドレスで表示され続けるようにしました。

これで、とりあえず古い投稿も見れるようにはなりました。

しかしここで、新たなエラーが発生。

投稿の中では見れるようになった画像ですが、その画像を右クリックで新たなページで開こうとすると、また404エラーが出るのです。

画像のアドレスをブラウザに直接打ち込んで開こうとしても同じです。

これは、なんだ?


解決

素人ではお手上げになり、ロリポップのサポートに問い合わせたところ、ライブドアブログから画像をインポートした際の設定の問題だと思われるので、一度それらの画像をすべて削除して再度アップロードするようアドバイスを受けました。

めんどくさいと思いつつ、約5000のファイルをアップロードし直しました。

しかし、同じエラーがまだ発生しました。

これで解決されると期待したのに。

しかし素人も捨てたもんではありません。どうしたもんかとサーバーのFTP上でアップロードしたファイルやフォルダを見ていて気がつきました。

ライブドアブログからエクスポートした画像ファイルは10000個あったのに、いまアップロードしたファイルは5000個しかないことに。

おかしい。

これ、原因ははっきり追及していないのですが、実はオリジナルの画像はアップロードされず、小さくリサイズした画像のみがアップロードされていました。

ライブドアブログからエクスポートした10000個の画像のうち半分は、オリジナルの画像です。残りの半分は、オリジナルの画像をウェブでの表示に適した大きさにリサイズした画像でした。

オリジナルの画像がOLD001って名前だとすると、リサイズされたほうはOLD001-sって名前になっていました。

俺がワードプレスに入れているプラグインの影響だと思うのですが、このリサイズされたほうの画像だけがアップロードされ、オリジナルの画像はアップロードされていなかったのです。

大きすぎる画像をアップロードすると自動でリサイズするようなプラグインを入れているので、それが原因かもしれません。

とりあえず、そのプラグインと、念のためセキュリティ関係のプラグインもいったん全て停止し、改めて10000個の画像をアップロードし直しました。

結果、エラーが解消しました。

投稿内では全ての画像がリサイズされた-sファイルで表示され、別ページで開こうとするとオリジナルの大きなファイルが開くような設定で画像を投稿していたので、応急処置後は投稿内でだけ画像が見れていたのです。


以上がエラー発生から解消までの顛末です。

一応伝えておきますが、俺、IT素人です。

まーーーったくの素人です。

自分でサーバー借りてブログ運営するの、かなり無理してます。

なのでこんなエラーも起こるわけですが、、、ここに書いた内容ももしかしたら誤記、誤解、誤説明があるかもしれません。

詳しい人からみたらトンチンカンなこと書いてるかもしれません。うん。十中八九書いてると思います。

自分のための備忘録というか、こんだけ苦労したから記録に残しておきたい、というテンションだけで書いてますので、その点、何とぞご容赦ください。

とりあえずエラーが直ってよかった。ほんとよかったです。

思考も時間もそうとう使い、頭が疲れました。

これだけがんばってもしょせんは自己満という現実に、少し涙がこぼれます。

それでも好きでやってることだから、仕方ないんですけどね。

はい、今度の今度こそ、SSL化に関連した話は完結でーす!

にほんブログ村 セクマイ・嗜好ブログ 同性愛・ゲイ(ノンアダルト)へ

にほんブログ村

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA