どうも！トリでございますよ。
さて、前回に引き続きWPのSSL化のお話をしていきます。今回は新規ブログではなく、ある程度育ったブログをお持ちの方に向けての内容となっております。
前回お伝えした手順でhttps表示にはできたかと思います。が、「アドレスバーに鍵マークがつかないんだけど・・・」という問題にぶつかっている方が多くいるかと。
トリもその１人でした。「なんでや！？なにがあかんのや！？」と一人PCの前で唸っておりました。そして鍵マークがつかない原因という原因を１つずつ潰して、無事常時SSL化に成功しました！
今回は全米が涙したトリの汗と涙の常時SSL化に向けての戦いの記録をお伝えして参りたいと思います。
トリの記事を参考にWPの設定やテーマを編集する場合は必ず先にバックアップを取って下さいね！
目次
アドレスに鍵マークが付かない場合の対処法
URLはhttpsと表示されているのに、上記のように鍵マークが表示されない・・・という場合、もう少し細かいところまで設定してあげないと完全なるSSL化ブログにはなりません。
で、ここが厄介なところで、どこをどうすれば完全なSSL化になるかってという答えは実はなくてですねーそれぞれのブログによって異なってくるんですねー。めんどうですねー。
なので、httpsって表示されているのに鍵マークが出ていないって方は、１つ１つその原因を探って潰していくしかないんです。そんなわけで、以下トリが試したことを列挙しておきますので、参考にしてくださいね。
トップページにあるhttpのリンクを全てhttpsに変更
そのサイト自体がSSL化できていたとしても、非SSL化（httpで始まる）のサイトへのリンクが貼られていると完全なSSL化にならないことがあるようです。
ただし完璧に外部リンクを全てhttpsにしないといけないかというと、実はそうでもないみたいで・・・。このブログのリンク集とか見てもらうとわかるのですが、httpのアドレスを持つサイトへのリンクが貼られていますが、きちんと完全SSL化の証拠である鍵マークが表示されているんですよね。
なので、とりあえずどのページへ行っても表示されるグローバルメニューやウィジェットに貼られているリンクはhttpsにしておくと良さそうです。
また、トップページにある画像や動画ファイルの参照先もhttpsのリンクにしておくと無難です。ま、とりあえずやれることは全てやってみましょう！
ブラウザの機能でSSL化のエラーを探す
トップページのリンクを全てhttpsにしてもまだ鍵マークが表示されない！となった場合、ブラウザに何がいけないのか聞いてみましょう。
- Chromeの場合
まずはF12ボタンを押してみましょう。右側にズラズラズラーとなんかややこしそうなソースが出てきます。注目すべきは右下のボックスの"Console"タブ。"Mixed Content"というところにヒントが隠されています。要はそこに「httpsとhttpのリンクが混在してるよ～」って警告が出ている状態なんですね。なので、その表示されているリンクを直してあげればOKです。
今回の場合だとリンクにhatenaの文字が・・・。どうやらはてなブックマークへのリンクが影響している模様です。ということで、GOISBLOGさんのこちらの記事を参考にやってみました。
まず「テーマの編集」という禁断のゾーン（？）に潜入します。
各phpファイルで"hatena"で検索をかけて、引っかかったところを片っ端から下記コードに書き換えました。
引用元：GOISBLOG
「SSL化(https)後のはてなブックマークが消えちゃう件」より
【BEFORE】
警告にも出ているように、一部httpの表記のままになっている箇所があります。
【AFTER】
上記コードを<li>～</li>の間にコピペして、全てhttpsの表記に変更しました。
これで、どや！？
とトライしてみたら、やった！鍵マーク出た～♪（´∀｀人）
・・・
・・・
・・・
(。´・ω・)ん?
まだなんかアドレスバーの右側に警告マークみたいなのが出てるけど・・・。
な、なんだこれは・・・？と思って「安全でないスクリプトを読み込む」をポチッてみた。
すると・・・
んNOOOOOOOOO！！！
なんと、余はまだ満足しないと申すか！ういやつよのぉ！
「教えてChrome！」ともう一度F12ボタンをポチー。
どうやら今度はjQueryとi2iが影響している模様。
まず、jQueryから潰そうか。
テーマの編集から「ヘッダー.php」を"jQuery"で検索をかけて、単純にhttpにsを付け加えました。これだけでエラー一覧からは消えてくれたので、まずはOK。
つづいてi2i。
i2iアクセス解析はSSL化対応してるんかな～とサイトへ飛んで調べてみる。
ありゃ～httpsのパーツを使うには有料版にせんとだめなのね。。。でもGoogle Analyticsも使ってるし、もうそっち一本でいこうかな～と思ったので、i2iアクセス解析を外すことにしました。
「ヘッダー.php」からi2iアクセス解析のコードを消して、無事エラー解除に成功。
- Internet Exploreの場合
Chromeと同じくF12ボタンを押すとポップアップウィンドウが開きますので、「コンソール」タブに表示されているエラーを１つ１つ探っていってください。
で、原因を潰して鍵マークが表示されても、ウィンドウ下段に下記のような警告文が出ている場合は、まだSSL化ブログ完全体にはなっていないということです。試しに「すべてのコンテンツを表示」を押してみると、「保護されていません」モードになるはずです。そういう時は再び、IEのコンソール機能を使って、セキュリティで保護されていないコンテンツが何かを探って、原因を潰していってください。
※トリの場合はi2iアクセス解析がそれに該当していたようです。鍵マークが表示されている時はi2iアクセス解析が表示されていなかったのですが、「すべてのコンテンツを表示」とするとブログ内に表示されましたので。ご参考まで。
その他やっておくべきこと
サイトの完全SSL化がすんだら、「やれやれだぜ・・・」とジョジョ立ちをする前にまだやるべきことが残ってるんですねー。以下、更にトリがやったことをまとめておきます。
各種サービスの登録サイトを変更
ASPやランキングサイト等の各種サービスに登録してあるURLを「https」に変更しましょう。特にGoogle AnalyticsとGoogle Search Consoleは忘れずに。
- Google Analytics
１．ログインして、「管理」→「プロパティ設定」でデフォルトのURLを「https://」に変更して保存します。
２．「管理」→「ビュー設定」でウェブサイトのURLを「https://」に変更して保存します。
- Google Search Console
つづいて、みんな大好きサチコちゃん。実はサチコはアナリティクスとは違って、１から登録し直さないといけないんです。登録の仕方を忘れちゃったという方は過去のサーチコンソールの記事を参考にしてくださいね。
SNSのカウント数を元に戻す
http→httpsにすると、なんと別サイトと見なされてSNSのカウントが0に戻っちゃうんです。こりゃ勿体ない！しかし、そんなお悩みも「SNS Count Cache」というプラグインで解決します。
ただ、私の場合、下記画像の通りFacebookとGoogle+だけはどうしても復活しなくて・・・値がN/Aのままなんですよ。こちらは目下調査中ですので、解決したらまたブログでシェアするようにしますね。
１．プラグインの新規追加で「SNS Count Cache」をインストール→有効化にする。
２．ダッシュボードの「SNS Count Cache」→「設定」をクリック。
３．シェア数を復活させたいSNSをチェックし、HTTPからHTTPSへのスキーム移行モードを「有効」にして「設定の更新」をクリック。
４．しばらく時間が経てば、SNSのカウントが復活しているはずです。
まとめ
トリの完全SSL化をするまでの軌跡をご紹介しました。いや～めっちゃ長かったですね。あれこれやりまくって、結局何日か掛かった気がします。大変っていうより、めんどくさっ！っていう、これに限りますね。とにかく地道な作業なので。
でも１回やっておけば、後は特にすることもないですし、Googleの今後の評価にも多少繋がってくるんじゃないかな（現時点でSSL化は順位への影響は１％未満しかないようですが）。
めんどくさいことは先回しにしたい気持ちはわかります！が、今度記事が更に増えてもっとSSL化作業が大変になる前にちゃっちゃとやっちゃいましょう！
同じ問題を抱えて詰んでいる方は、トリの戦歴が少しでも役立ってくれると幸いです。
はぁーつかれた┐(´д｀)┌
★２つのランキングに参加中！この記事がお役に立ちましたらクリック・シェアして頂けると励みになります(*´∀`*)
カテゴリ：インターネットの基本 [コメント：9]
はじめまして、今回わたしのサイトをSSL化するにあたりこのページの「混在されたコンテンツ」部分がとても役に立ちました。わたしの場合はトップのロゴ画像がhttpとhttpsとで混在していたようで、一旦画像を削除して再アップしたところSSL化することができました。大変有益な記事で救われました。ありがとうございました。
はじめまして！
変なテンションの記事が役に立ったようで何よりです（笑）
今後も私が「おや？」と思ったネタを気まぐれにあげていきますので、またお立ち寄りくださいー＾＾
ありがとう！
ようやく鍵マーク現れました！！
わかりやすくて、助かりました（_ _）
megさん、コメントありがとうございます！
SSL化できて良かったです＾＾
トリさんこんばんは。
以前ツイッターでちょっと絡んでいただいたことのある、sayakaです(#^^#)
この9月、遅ればせながらサイトのSSL化をやってみたのですが、１サイトだけ鍵マークが出なくて困っていたところ、そうだ！トリさんのブログ！と思って読ませて頂きました。
F12ボタンを押す→コンソールで確認で、画像のURLにhttpの物が残っていることが判明し、一発で解決できました！有り難うございます！
欲しい情報がちゃんとある、すごいですし有難いです☆
SSL化の記事を書いたので、「参考にさせて頂いたサイト様」の中にリンクを張らせて頂きました。（勝手にスミマセン）
sayakaさま
ご無沙汰してますー！！リンク貼って下さりとっても嬉しいです＾＾
私は今別ブログを細々と運営しており陰が薄くなっておりますが、生きております（笑）
このブログが絶賛放置中になっているのが悔やまれるのですが、落ち着いたらまたカムバックして引き続き役立ち情報を更新していけたら・・・と思っています。
またいつでもお越しくださいね☆
[…] そこで、使っていた画像の差し替えやリンクの変更など、一通り見直しましたがやはり改善せず。どうしたものかと思いながらトリさんのこちらの記事にお邪魔したら、解決策がありました。 […]
もいさん、はじめまして！
SSL化の記事役立ったみたいで嬉しいです～＾＾
今読み返してみると、すんごい変なテンションで書いていてお恥ずかしい限りです・・・
リンクも貼って下さり、感謝です。
また良い情報を提供できるよう頑張ります！
[…] というわけで調べてみたところ、解決策としてプラグインを使う方法がヒットするのですが、プラグインでhttpをhttpsに修正する方法は既にやってますし、同種の異なるプラグインを利用するのはなんとなくトラブルの元になりそう。なのでさらに別の方法を探っていると、どうやら根本的な原因は「サイト内にhttpsでない要素へのリンク等があること」らしいことがわかりました。このときに全ての「http」を「https」に置換したはずなのですが、漏れがあったということなのかなぁ・・・？ […]