httpsへのSSL化、ページの一部が安全でない状態で対応したこと

本日、WordPressで運営する2サイトをようやくhttpsへのSSL化を行いました。当サイトと別サイトを合わせて約1,000記事分も対応するとかなり大変だろうと思いきや、すんなりとSSL化完了。がしかし、「ページの一部が安全でない状態」となり、ここで多少つまづくことに。

無事クリアできましたが、ここでは「ページの一部が安全でない状態のクリア」への対応に焦点をあてレポートします。

スポンサーリンク

前提、SSL化の過程など

まずは、前提、SSL化の過程についてです。SSL化する前は、エックスサーバーとWordPressのテーマとしてSimplicityを利用していたのですが、SSL化する直前にSimplicityと同じく「わいひら」さんのテーマ「Cocoon」に変更しています。

 

▼さすがにわいひらさん。痒い所に手が届く、かなり扱いやすくブログ記事編集に集中できるテーマです。SimplicityからCocoonに変更しました。

Cocoon
SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100%GPLテーマです。

▼エックスサーバー・CocoonでのSSL化は、同じく わいひらさんの以下の記事に頼りっきり。

WordPressをhttpからhttpsにSSL化した全手順まとめ(エックスサーバー環境)
XSERVERで常時SSLが無料なので、WordpressサイトをHTTPS化したときに行った全ての手順をまとめてみました。

 

上記の記事の目次を抜粋させていただき、対応した流れは以下です。()は私の対応状況です。

  1. エックスサーバーでSSL設定を行う。(エックスサーバー側でツールが用意されており、20分ほどの待ち時間で完了)
  2. WordPressの設定からURLを変更する。(こちらは即終了)
  3. 内部リンクをSearch Regexで全て置換する。(Search Regexは使い慣れていたのですが、なぜか何度もフリーズしたものの完了)
  4. .htaccessにリダイレクト用のコードを追記する。(汎用ソフトで.htaccessがダウンロードできない状況のため、エックスサーバーのサーバーパネルより対応)
  5. セキュリティー状態のチェック。(ここでエラーが発生)

「ページの一部が安全でない状態」で対応したこと

こちらもわいひらさんの記事「WordPressをhttpからhttpsにSSL化した全手順まとめ(エックスサーバー環境)」に従い対応しました。

Google Chrome、あるいはedgeでチェックする手段もあるようですが、最も簡単そうなFirefoxにて対応しました。

 

▼URLの前のカギにビックリマークが付き「安全ではない状態」になっています。

この状態ではSSL化した意味がないので早速対応することに。

 

▼カギをクリックすると以下の子画面が表示されます。うち、赤枠の「詳細を表示」を選択。

やや上に「Firefoxが一部のコンテンツをブロックしていますが、ページ上には安全でないコンテンツ(画像など)が含まれています」と記載されています。

 

▼別画面にて詳細が表示されます。

「メディア」を選択すると画像のURLが表示されますが、うち「 http://」となっている箇所が「安全でない状態」。これを個別に確認し対応します。

 

▲私は「https://」もエラーとなっているものと勘違いし、その数から途方に暮れていましたが、実際に「http://」で留まっているのは以下の3箇所のみでした。

2サイト合わせて1000記事もあり、また画像もかなりの量でしたが、3箇所でおさまったのはプラグイン「Search Regex」にて、http://www.kimanagu.comからhttps://www.kimanagu.comに一括変換したおかげです。

 

エラーの箇所は

  1. ヘッダー画像
  2. サイドバーのウィジェットの画像
  3. 利用しているテーマ「Cocoon」の独自仕様

 

1,2については、リンク先をhttps://に修正するのみで即対応できたのですが、3の「Cocoon」独自仕様の修正(対応方法の確認)が難航。

 

▼上記3については、Cocoonのヘッダーが読み込まれエラーとなっていると思われます。

▲▼わいひらさんのどの記事のコメントだか失念したのですが、対応方法らしきものの記載があり、以下の対応でクリアできました。原因は理解できずでしたが。。。

 

▼WordPress ダッシュボードにある「Cocoon 設定」の「OGP」を選択。

 

▼OGPの下方にある「ホームイメージ」「画像のアップロード」をクリアすることにより対応できました。

 

▼ビックリマークがとれ、「保護された通信」となりました。

まとめ

アクセスに支障が出ないよう、本日の朝4時半から2サイト分をSSL化したのですが、Google アナリティクス、Search Consoleの設定も含め、最後のテーマ独自仕様のエラー以外はすんなりと対応できました。これも、わいひらさんの記事をはじめ、エックスサーバー・WordPressでのSSL化の記事があふれているおかげです。みなさん頼りになります。

コメント