WordPress

SSLで保護された通信が表示されない!httpsで鍵マークがでない理由

霧島ユウタのメルマガ

SSLによる暗号化通信をおこない、URLをhttpからhttpsに変更したものの…

緑色の鍵マークが表示されないという事件が発生したかたは多いのではないでしょうか?

調べたところ、たとえhttps〜と表示されていても、緑色の鍵マークに「保護された通信」と表示されなければ暗号化は行われていないとのことでした。

暗号化通信はSEOにも影響しますので、早急に対処するべきです。

このページは、WordPressを使っているユーザー向けのページです。

SSLで暗号化通信を設定したのに鍵マークが出ない!

このページをご覧になっているということは、

SSLによる暗号化通信を設定にもかかわらず、緑色の鍵マークが表示されずに困っている状況ではないでしょうか?

通常、httpからhttpsに移行すれば、セキュリティが強化された証として以下のように表示されます。

企業が運営するメディアをはじめ、個人ブログでもプライバシーにかかわる情報を入力するページには暗号化通信を行うのは当たり前とされ、今はSSLの常時接続も当たり前となってきました。

つまり、どんなページを開いても、緑色の鍵マークがついているということです。

ところが、SSL設定をおこない、httpからhttpsに移行したのは良いけど、

こんな感じでhttps〜と表示されているのに、グレーの!マークが表示されるケースがあります。

いつも見かける緑色の鍵マークではないけど、https〜と表示されているから大丈夫!と判断しそうですが、コレってきちんと暗号化通信が行われていない状態なんです。

SSL設定をおこない、https://〜と表示されているにもかかわらず、実際はうまく機能していない…というなんともおかしな状態なんです。

https://〜で「!マーク」の理由

緑色の鍵マークが表示されずに、グレーの!マークが表示される理由は至ってシンプルでした。

原因はWebサイトで使用している画像リンクがhttpのまま残っているからです。

いくらSSL設定をおこない、URLをhttpsに切り替えても、サイトにhttpの画像リンクが残っていれば…

「このサイトには暗号化されていない画像が張り付いているから危険だ!」と判断されて、うまく暗号化通信が行えないということです。

緑色の鍵マークを表示させる解決策

ズバリ!解決方法は、画像リンクをhttpからhttpsに変更するしかありません。

とはいっても、一つずつ画像リンクをみつけてhttpsに変更していては、いくら時間があっても足りません。

そこで、「Search Regex」という便利なプラグインを利用します。

指定した文字を特定の文字に一括で置換できる便利なプラグインです。すぐにインストールして有効化しましょう。

※心配な方は必ずバックアップをとってから実行しましょう!

ダッシュボード(管理画面)→ツール→Search Regexをクリックします。

すると、以下の画面が表示されます。

セッティングするのは2箇所です。

Search pattern:http://y-kirishima.com/
Replace pattern:https://y-kirishima.com/

あなたのサイトのURLを入力します。上がhttpで、下がhttpsです。間違えないように入力しましょう。

セッティングが終われば、Replace(置き換える)ボタンをクリックします。

すると、http://〜の画像リンクと、置き換えたあと(https://〜)のプレビュー画面が表示されます。

あまりに膨大な画像データが表示される人もいらっしゃるかと思いますので、ひとつずつ入念にチェックをする必要はないです。

確認できたら、「Replace&Save」ボタンを押して実行します。

これで、サイトに貼ってある画像リンクがhttpからhttpsに変更されました。

続いて、WordPressの設定を行います。この項目は1分で終わりますので、サクッと進めましょう。

WordPress管理画面→設定→一般をクリックします。

  • WordPressアドレス
  • サイトアドレス

上記の2箇所をhttps://〜のURLに変更しましょう。

この設定を行わないと暗号化通信がうまく機能しませんので、気をつけてください。

.htaccessにリダイレクト用のコードを追記する

ここでは仮にユーザーがhttp://〜でアクセスしても、https://〜に自動で切り替わるリダイレクト機能を設定します。

Googleは重複コンテンツをきらい、httpとhttpsでも表示されるコンテンツは重複コンテンツとみなし、記事の評価が下がると言われています。面倒くさいようで簡単な作業ですので、すぐに済ませておきましょう。

設定はレンタルサーバーの管理画面からおこないます。ここではエックスサーバーを例に解説します。

エックスサーバーの管理画面にログイン→サーバーパネル.htaccess編集をクリックします。

編集するドメインを選択して、「.htaccess編集」のタブをクリックします。

すると、

こんな感じでズラーッと英語が並んだ画面に切り替わります。

まずは# BEGIN WordPressの文字をみつけてください。

次に、その文字の上に以下のコードを入力します。

サンプルのように貼り付けたら、右下の確定ボタンをクリックします。

これで作業は終わりです。

http://〜のURLを入力すると、自動でhttps://〜に切り替わるようになりました。

それでも鍵マークが出ない場合

まだサイトのなかに、httpの画像リンクが隠れているということです。

実は、さきほどプラグイン「Search Regex」を使い、画像リンクを一括でhttps://〜に変更しましたが、以下の場所は反映されませんので、1つずつ変更する必要があります。

  • ウィジェット(顔写真、SNSボタンの画像、古いリンクなど)
  • メニューのカスタムリンク(入力しているURLがhttp://〜など)
  • ヘッダー画像、サイトロゴ(※見逃しやすいポイントです)

とくに忘れがちなのは、メニューのカスタムリンクです。僕のサイトでは、トップページのメニューのMAIL MAGAZINEがそれにあたります。

WordPress管理画面→外観→メニューから変更できますの、カスタムリンクを設定している方は確認してみましょう。

ヘッダー画像やロゴは、同じものを再度アップロードして貼り付けるだけでOKです。

最終手段はコチラ!

ここまでの作業で緑色の鍵マークが表示されるはずですけど、まだうまくいかない場合は直接原因をチェックするほうが早いです。

その名は、ダイレクトリサーチ。

英語ばかりで難しそうですが、やってみるとカンタンです!

まずは緑色の鍵マークが表示されないページを開き、Macの場合は画面上で右クリック→検証を選択します。

  • 右上に黄色の!マークが表示されているはずですので、クリックします
  • 画面の一番下にエラー項目が表示されます
  • http://〜のURLをクリックします
  • どの画像リンクに問題があるのかひと目でわかります

あとは問題になっている画像リンクを差し替える、もしくは削除することで解決します。

たとえば、フッターに小さな画像を貼り付けていて、その画像がネックになっているケースなどは多いはずです。目視では見逃してしまうことも、コレならすぐに原因を見つけることができます。

この機能を使えば、ダイレクトに問題の画像リンクを見つけることはできますけど、ある程度問題を解決した段階で利用するほうが作業も効率的ですので、最後に紹介しました。

個人的な話ですけど、

このダイレクトリサーチを使い、トップページの小さな画像リンクがhttp://〜のままになっていることが判明しました。

ほかに細かいところでは、WordPressのユーザー設定で登録したプロフィール写真の画像なども影響します。

WordPress管理画面→ユーザー→ユーザー一覧でチェックできます。

このように最終手段のダイレクトリサーチまで使えば、1つずつ問題を解決できて、無事に鍵マークが表示されます。

早めに常時SSLの暗号化通信がおこなえるように、設定を済ませましょう。

霧島ユウタのメルマガ