戦いの巻!!WebサイトSSL化してhttpsなのに鍵マークが表示されない

SSL化したものの「アドレスバーに鍵マークがつかない・・・」という壁にぶつかっている方が多くいるかと思います。

私もその一人です。

さくらサーバを利用していますので、2017年10月17日から、独自ドメインでも無料SSLが使えるようになったのを機に設置いたしました。

さくらレンタルサーバ無料SSLの設定/サイトに鍵はかかっていますか?

 

※ 利用しているWordPressのバージョン、テーマ、その他のプラグインの競合、サーバ環境によっては、 エラーや不具合が発生する可能性もありますので、テスト環境などで試した上で利用することをお勧めします。

導入にあたっては、必ずバックアップをしてから作業してください。 プラグイン導入については、自己責任にて導入ください。

※注意 Facebookのいいねなど、SNSのリンク数も「0」にリセットされます。消えると困る方は、あらかじめ必要なプラグインを調べておいてください。

 

設置は、楽勝でした。

 

 

ところが

「なんでなん!?あれれ?またもとに戻ってる」

1日1日別の事が見つかったり、青くなったりしたました。

「なにがあかんの!?」と一人PCの前で唸っておりました。

 

そして、鍵マークがつかない原因と次から次へと起こるエラーの原因を1つずつ潰して、無事常時SSL化にしました。

 

 

WebサイトをSLL化した後鍵マークが表示されない戦いの巻!!

 

お!!できた!???と思っても

すぐに「鍵マーク」が表示しないことがほとんどだと思います。

 

その時の対処を書いておきます。
私の備忘録でもあります。

 

更新をかけたら鍵マークが消えた

■ 「https://himetei.com」になりました。一瞬、うれし!!と思ったけれど・・・。

 

更新をかけたら鍵マークが消えました。

 

 

 

 

サイト内URL(画像・リンク)の変更 

 

SSL証明書を発行したのに、httpsの横に鍵マークが表示されないという症状は、「混在コンテンツ」が原因らしいです。

つまり、画像が原因の場合が多いですが「https://‥‥」と「http://‥‥」がサイトに入り混じっているので、「このサイトは変よ」認識されるようです。

 

貼られた全てのリンクや画像のURLを書き直すのは、はっきり言って無理!

URLを置換してくれるプラグインを使います。「Search Regex

Search Regex は、検索のための完全な正規表現をサポートし、WordPressに強力な標準検索機能と置き換え機能を追加してくれるプラグインです。

 

Search Regexの設定

プラグインをインストールして「ツール」→「Search Regex」をクリックしてください。

 

 

■ Search Regexの設定を下記のようにしてください。

※ 確認中!!! 本当に「https:」を省いたものでよいのか?
「http: 省いたURL」を記入という情報もありましたがアイキャッチが消えるという事態になってしまいました。

【ポイント】「Replace pattern」にはSSL化した後のURLを書かないで「http: 省いたURL」を書いてください。

 

「http: 省いたURL」を記入という情報もありましたが秘亭のネタは、アイキャッチが消えるという事態になってしまいましたので 下記のように入力しました。

正しくは

「Search pattern」に変換前の文字を入力

「Replace pattern」に変更後の文字を入力

 

 

SLL化後にアイキャッチが消えたら上の入力が間違っているかもしれないので確認してみてくださいな。

 

 

【画像のURLが変わったのかみてみましょう。】

画像をクリックしてくだい。

 

 

「https:・・・jpg」に変更出来ていますね。

 

これで、画像すべてのURLが、変わっているはず。

 

 

問題発生! その1

 

ダッシュボードで見る限りは「保護されたサイト」になりました。

しかし「投稿を表示」にすると、鍵マークが消えます。

 

まだうまくいってないということです。

 

Developer Toolsの「Console」から修正

「F12」おしてデネロッパ―の「Console」から修正してください。

 

プラグインの「Search Regex」を使っても画像が修正できていないものがあったようです。

そんな時は、Developer Toolsの「Console」を使います。

 

 

Developer Toolsで修正しましょう。

 Google Chromeではhttp接続を行っているリソースを簡単に探すことができます。

■ トップのページを開いて「F12」を押します。

■ Developer Toolsというウィンドウが開きますので、「Console」ボタンを押します。

 

 

 

■ URL部をクリックすると画像が表示されるので、修正してください。

修正の方法は、いろいろあるようですが、私は画像をダウンロードして保存しておいて「メディア」から対象となる画像削除。

再び画像をアップロードしました。

 

 

このエラーの画像は、たいてい「カスタマイズ」から設定した画像が怪しいです。

 

(ロゴとかスライドショーに使っている画像とか) トップをおしゃれにするためにスライドショーに設定されているときは、ヘッダーとか背景画像が「http://・・・のままになっていないか疑ってください。

 

できた!!

 

 

 

 

ところがところが、再び問題発生 その2

 

■ トップは、ひゃんと表示しているのに、記事部がおかしくなっている。

 

 

 

■ アイキャッチが出てこない

 

 

■ おまけに

 

 

■ こんなことになって・・・・。

 

 

こうなったら師匠に泣きつくしかない。すると・・・

 

PCまなぶ

今見たらリダイレクトを繰り返していないので、究明はできない。

リダイレクトを繰り返しているのだから、
http://himetei.comと https://www.himetei.comを行ったり来たりしているのが安易に想像できる。
htaccessとwordpressとの間で矛盾する設定を入れているんだろうね。

 

とアドバイスをいただき、再びチャレンジしました。

(師匠のアイコンも変更できません。これは、もしかするとテーマのショートコードが対応していない可能性があるんではないかと思うのです。) 

 

解決への道

 

■ プラグインの停止

■ テーマの変更

■ プラグインの再開

■ 他のブラウザで確認

■ プラグイン及びSSL化のために設定したものを再度見直し

 

以上をゆっくり時間かけてやりましたら、何とか今のところ回復したようです。

しかし、記事によっては「鍵マーク」が付いていないページも存在しています。

予想としては、アイキャッチを疑っています。

 

ダッシュボードでは、画像のURLが「https://~~.jpg」となっていますが、ダウンロードしてから、

メディアを削除して、再びアップロードさせるとちゃんと「保護されたページ」になりました。

 

あとがき

プラグインのSearch Regexは、すべての画像を変換できていないことを疑って、べつの方法を考えるべきかな・・。と思います。 

ブログ内部リンクのURLを変更するのは、「Search-Replace-DB-master」というプログラムを使うと簡単に一括置換できる。

・・・らしいです。

安全のためFTPソフト系で、サーバーに「Search-Replace-DB-master-dragonballz」をアップロードしてから、プログラムを起動させて、設定するとかあります。

 

とっても危険ですので、私はやめときますけど。

画像以外にもリンクにも関係ある場合もあるという情報も有ります。

ゴールは、きっと見えてきます。

皆さんも頑張ってね ♪

 

 

しかし

戦いは、終わりではなかった。

戦いの巻その2!!Webサイト常時SSL化してアイキャッチ画像が表示されない

 

Pocket

カテゴリー

当ブログの記事に共感していただけたら、嬉しいです。