SSL　鍵マーク

• シェア
• 
• 
• 
• 

どうも！トリでございますよ。

 

さて、前回に引き続きWPのSSL化のお話をしていきます。今回は新規ブログではなく、ある程度育ったブログをお持ちの方に向けての内容となっております。

 

前回お伝えした手順でhttps表示にはできたかと思います。が、「アドレスバーに鍵マークがつかないんだけど・・・」という問題にぶつかっている方が多くいるかと。

 

トリもその１人でした。「なんでや！？なにがあかんのや！？」と一人PCの前で唸っておりました。そして鍵マークがつかない原因という原因を１つずつ潰して、無事常時SSL化に成功しました！

 

今回は全米が涙したトリの汗と涙の常時SSL化に向けての戦いの記録をお伝えして参りたいと思います。

 

 

 

 

アドレスに鍵マークが付かない場合の対処法

 

 

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"で検索をかけて、引っかかったところを片っ端から下記コードに書き換えました。

hatena

<a href="https://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php the_title(); ?>｜<?php bloginfo('name'); ?>" data-hatena-bookmark-layout="vertical-balloon" title="このエントリーをはてなブックマークに追加"><img src="https://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

1

<a href="https://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php the_title(); ?>｜<?php bloginfo('name'); ?>" data-hatena-bookmark-layout="vertical-balloon" title="このエントリーをはてなブックマークに追加"><img src="https://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

引用元：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化作業が大変になる前にちゃっちゃとやっちゃいましょう！

 

同じ問題を抱えて詰んでいる方は、トリの戦歴が少しでも役立ってくれると幸いです。

 

はぁーつかれた┐(´д｀)┌

 

 

★２つのランキングに参加中！この記事がお役に立ちましたらクリック・シェアして頂けると励みになります(*´∀`*)

 

 

• シェア
• 
• 
• 
•