Violet@Tokyo

常時SSL化の弊害となるエラー、ミックスドコンテンツに対する5つの対処法

約 9 分

「いつかやらなきゃ」と思いつつ、つい「面倒臭そう」と思って先延ばしにすることってありませんか?

私にとっての”それ”とは、このBlogを「常時SSL化」すること。

2014年8月にGoogleが「httpsをランキングシグナルに使用します」と発表。

「SSL」というのはネット上の情報を暗号化して送受信ができるようにする仕組み。「別に個人情報を扱うわけでもないし…」と、しばらく様子見をしていました。

ところがネット界隈では「常時SSL化」への流れが活発となり、それを受けてようやく私も一大決心。重い腰を上げて「常時SSL化」に踏み切りました。

結果から言えば、悪戦苦闘しつつも562記事全てを「https」に変えることに成功。

いやいやそれにしても、メッチャ大変でした。

今回は私がつまづいた箇所を中心にお話しを進めていきます。なお今回取得したSSL証明書はCoreSSL。利用しているサーバーはミニバードです。



難しいことはないけど、とても面倒でした!

やってみれば特に難しいことはありません。ミニバードのマニュアルに沿ってやっていけば、半日程度で独自SSLの導入が可能です。

ざっくり言えばやることは以下の3つ。

1.WordPress側の設定

「管理画面」に入り「設定」→「一般」へと進み、WordPress アドレス (URL)とサイトアドレス(URL)を、それまでの「http://ドメイン名」から「https://ドメイン名」に変更します。

次に設置しているSNSのボタン、記事や画像のURL、内部リンクなど、とにかく全てを「http」から「https」に変更します。

むろんテーマファイルやウィジェットエリアの見直しなども必要です。

膨大な数になるので考えただけでもめげそうになりますが、こんな時に便利なのがWordPressプラグイン・「Search Regex」。ダウンロードして有効化するだけですぐに使えます。

ここまでやれば個別ページはともかく、最低でもトップページには緑の鍵マークがついているはずです。

2.301リダイレクト

ftpソフトを立ち上げて「.htaccess 」をダウンロード。以下のように記述して再びアップロード。

「example.com」の箇所は自分のドメイン名に変える

3.外部リンクの変更

Search Consoleの登録もしておきます。それまでの「http://」から始まるサイトとは別扱いになるので、新たにプロパティを追加します。

Googleアナリティクスも同様ですが、こちらは「プロパティ設定」→「デフォルトの URL」のセレクトボックスから「https」を選択するだけでok。ここまで終わったらXMLサイトマップを送信します。

またブログのランキングサイトやアフェリエイト関連の修正も済ませておきます。このあたりはみな、サイトの移転を経験したことのある方ならすんなりできる作業です。

ただし、問題はその後。ここからが本題です。前置き長くてすみません(_ _).。o○

個別ページに飛ぶと以下のようなエラーが出まくりで、もう頭を抱えました。

1.Google Chromeのデベロッパーツールでエラーを突き止める

上の画像のようなエラーの原因はいったい何なのか。

Google Chromeにはその原因を突き止めるのに便利なデベロッパーツールというのがあります。画面を右クリックして「詳細」を選択するか、もしくは上の画像にある青い文字で書かれた「詳細」をクリックしてもいいです。

「Console」を選択すると、なにやらずらずらと細かい文字が表示されてきますが、この黄色い部分がエラーです。

私の場合はいずれもミックスドコンテンツ(Mixed Content)、つまり「”https”で作られているはずのサイト上に、”http”の画像が紛れ込んでいる不完全なサイトですよ」というもの。

エラーが出ているページはアフィリエイトのコード、あるいはカエレバ・ヨメレバのコードが貼られているページばかりでした。

それ以外にも、以前貼っていたブログ村のバナーとかクックパッドの小さなアイコンとか、いずれも外部から読み込んだ画像もエラーの原因の一つ。

このようにいくつかのページを検証してみると、何がエラーなのかがはっきりと見えてきます。

2.アフィリエイトの広告コード全てを貼り直し

私が登録しているアフィリエイトはさほど多くなく、A8.net、バリューコマース、もしもアフィリエイトくらいですが、現在はいずれもSSLに対応しています。

数も多くないこともあり、リンク切れのチェックも兼ねて全てを見直すことに。残すものは新たに貼り直し、不要なものはエイッと削除。

もし数が多ければ、先にご紹介したプラグイン・Search Regexで該当箇所を検索・置換してもいいですね。

もし提携しているアフェリエイトがSSL未対応なら、そのページのSSL化を諦めるか、もしくは業者を見切るしかないようです。

けれど世の中の流れがSSLに傾いているので、気長に対応を待ってその時に直すという手段もあります。

3.カエレバ・ポチレバのSSLをどうするか?

便利なのでよく使用するカエレバとポチレバ。アマゾンの画像にはSSLの対応がされています。

「画像ssl化(Amazonのみ)」を「ON」にすればいいとのこと。それでもエラーが出てしまいます。これには困りました。

アマゾンの商品に関して言えば、「Amazon JS」というプラグインもあるのでそれを使ってもいいのですが、やはりカエレバ・ヨメレバのブックマークレットは非常に使いやすい…。ということで、対応策を探してみました。

するとFirefoxのアドオン・「FoxReplace」が非常に使えるということで、早速試してみました。

・Amazonアソシエイト
「http://ecx.images-amazon.com」を「https://images-fe.ssl-images-amazon.com」に変更。
・バリューコマース
「http://ck.jp.ap.valuecommerce.com」を「//ck.jp.ap.valuecommerce.com」に変更。
「http://ad.jp.ap.valuecommerce.com」を「//ad.jp.ap.valuecommerce.com」に変更。
・もしも
「http://c.af.moshimo.com」を「//af.moshimo.com」に変更。
「http://i.af.moshimo.com」を「//i.moshimo.com」に変更。

情報源: Firefoxアドオンの「FoxReplace」でカエレバ・ヨメレバのアフィリエイトリンクを一括(Multi Replace)でSSLに置換する

しかしこれだけではアマゾンはよくても楽天の画像を読み込む時にエラーになる。日本のショッピングサイトといえば、そのほとんどが楽天かアマゾンかって感じなので、これは痛い。

そこで私はこの5行の文字列の他に、楽天の商品にも対応できる以下の1文を追加。

「http://thumbnail.image.rakuten.co.jp/」を「//thumbnail.image.rakuten.co.jp/」に変更。

すると今までエラーになっていたページに次々と緑の鍵マークがつくではないですか!

ずっとここでつまづいていただけに、もうホント、嬉しかったなぁ…。(←遠い目)

これでカエレバ・ヨメレバは無事に解決しました。

しかしポチレバはエラーになります。

そこでサムネイル画像を一旦自分のサイトにダウンロードして、そこの部分だけを書き換えることにしました。画像を外部からの読み込みにするのではなく、自分のサイトから見せるという苦肉の索。邪道かもしれませんが今のところこれしか思いつきません。

4.Pz-LinkCardがエラーになった!さてどうする?

リンク先をはてなカードのように表示できるWordPress・プラグイン「Pz-LinkCard」。

これもエラーになりました。やはり外部からの画像の読み込みが原因。そこでサムネイル画像の読み込みを諦めました。

「管理画面」→「Pzカード設定」と進み「外部リンク」の項目にある「サムネイル」と「サイトアイコン」ともに「なし」にして「変更を保存」。これでokです。

5.なんといっても最後は目視チェック!

先にご紹介した「Search Regex」を使用しても、内部URLのいくつかが「http」のままでした。

となると残る手段は目視チェックしかなく、一つ一つのページに目を通して直していきました。

大変といえば大変ですが、これをしておけば「全ページ、SSL化に成功しました」と言いきれるし、なによりも自分の安心材料になります。

最後に

以上が今回やったことの全てです。

途中でめげそうにもなりましたが、これ以上記事が増えてから直すのはもっと大変!

そう思うと、やってよかったと思っています。

それになにより久しぶりにこんな風に手をかけたことにより、このブログが今まで以上により愛おしく感じるようになりました。

ではまた。

Digiprove sealCopyright secured by Digiprove © 2017

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitter でvioletをフォローしよう!

Pick Up


(最終更新:2017/08/31)

About The Author

violet
はじめまして。ブログの管理人Violetです。
このブログは私が日々感じたこと、考えたことに独自の視点を交えて書き留めている忘備録です。読者の方に少しでも楽しんでいただけたら幸いです。詳しいプロフィールはこちら!
Follow :