どうしようか悩みに悩んで、ついに、当サイトもSSL化（http→https）しました。
作業自体は難しくはないものの、いろいろと「弊害」が考えられたので先延ばしにしていたんですが、こういうのは遅かれ早かれですからね。
考えられる「弊害」への対策をした上でSSL化してみました。ちなみに、エックスサーバーでサイト運営しているので無料でSSL化できました。
ということで今回は、僕がSSL化する前にやった作業と、SSL後に発生したエラーの対処法をご紹介してみます。
ブログカードのカスタマイズ
僕は、このサイトで「ブログカード」というものをよく使っています。URLを挿入するだけで自動でカード化されるWordPressの機能です。
でも、WordPressのブログカード機能は「https://〜のサイト」で使うことができません。（執筆時点）
SSL化前にブログカード化されていたリンクは、引用タグで囲まれたテキストリンク（元はiframe形式）になります。画像は表示されません。
まぁ、テキストリンクになるので、そこまで気にしなくてもいいのかもしれませんが、引用のデザインによっては見栄えが悪いですからね…笑
「寝ログ」さんのカスタマイズで大成功！
そこで、以前から気になっていた寝ログさんのブログカードカスタマイズを試してみました。結論から言うと、大成功です。
WordPressのブログカード機能は、リンク先がWordPressでバージョン4.4以上という制限があり、ほとんど「内部リンク」の時に使っていたので、まったく問題ありませんでした。
（外部リンクのカスタマイズは記事の最後で紹介されています）
カスタマイズ方法は非常に簡単なので、ぜひ参考にしてみてはいかがでしょうか？サムネのサイズとかも簡単に変更できます。
jQueryの読み込み方法変更
テーマによっては必要ない作業なんですが、jQueryの読み込み方を変更する必要があります。
「src=”http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js?ver=4.6.1“」
▲例えば、URLがこうなっていたら…
▼下記のように変更しましょう。「http」を削除したURLです。
「src=”//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js?ver=4.6.1“」
jQueryの読み込み方を調べる方法
ちなみに、jQuryを読み込む方法は3種類あるので、下記の文字列で検索することで、「自分のサイトのjQueryの読み込み方」を調べることができます。
- ajax.googleapis.com/ajax/libs/jquery（先述の読み込み方）
- code.jquery.com/jquery
- ajax.aspnetcdn.com/ajax/jQuery
もし、URLがhttp://〜で始まっていたら、httpを削除するか、違う読み込み方に変更しましょう。
このコードがある場所はテーマによって様々ですが、「ヘッダー」か「フッター」で読みこんでいるはずです。
SSL後にサイトの表示がおかしい場合、jQueryが原因の可能性が高いので、アクセスが多いサイトは特に注意しましょう！
アフィリエイトコードの差し替え
僕は、この作業が速攻で終わったんですが、アフィリエイターの方は「コードの差し替え」をする必要があります。
- テキストリンク
- バナー画像
ともに、「<img src=”http://〜」の箇所があれば、ページは表示されますが、SSL化はされません。（ブラウザ上部に「鍵のアイコン」があればOK）
A8.net・バリューコマース・アクセストレードのSSL未対応コードの検索方法
どれがSSL未対応コードで、どれがSSL対応コードかわからない時は、サイト内検索してみましょう。
- A8.net→http://px.a8.net
- バリューコマース→http://ck.jp.ap.valuecommerce.com
- アクセストレード→http://h.accesstrade.net
テキストリンクの「1px × 1pxの見えない画像」も探せたかは忘れましたが、バナー画像のコードはこれで探せると思います。
（昔からアフィリエイトを利用している場合、リンクが全然違っているかもしれません）
一括で変更する方法もあるけれど…
- A8.net
- バリューコマース
- アクセストレード
といった、大手のアフィリエイトサービスのコードをチェックしてみたんですが、「Search Regex」でコードを一括変更することもできそうです。
ただ、すべてをチェックしたわけではないし、万が一「コードの改変」とみなされても怖いので、手動での変更をおすすめします。
（微妙にコードの中の文字列の順番が違っていたり、数字が違っていたりします）
ちなみに、画像URLの「<img src=”http://〜」を「<img src=”https://〜”」にしてみたんですが、普通にアクセスできました。
カエレバ・ヨメレバのコードの一括変更
これもアフィリエイト（Amazonアソシエイト）なんですが、カエレバ・ヨメレバは簡単にコードを一括変更することができます。
さきほどチラッとご紹介しましたが、「Search Regex」というプラグインを使います。（WordPressのプラグインです）
- 変換前の文字列→「http://ecx.」
- 変換後の文字列→「https://images-fe.ssl-」
と入力し、変換すればOKです。（Amazonの商品からリンクを生成した場合のみ対応してます）
ポチレバはSSL未対応
残念ながら、ポチレバの画像はSSL未対応です。
アプリーチのコード差し替え
ポチレバの利用ユーザー数よりは少ないはずですが、iOSアプリとAndroidアプリを両方紹介することができるアプリーチも、コードを差し替える必要があります。
最近利用し始めた方で、すでにSSL対応のコードを使っている場合はスルーしてもOKです…と言いたいところですが、Androidの画像を選択しないと表示されない場合があります。
「追加機能」から選べるので、表示されない場合は差し替えましょう。
「にほんブログ村」のコード差し替え
当サイトでは利用していないんですが、ブログランキングの「にほんブログ村」を利用している方は、コードを差し替える必要があります。
- マイページログイン
- 登録URL変更（http:〜→https:〜）
- コード取得
- 既存のコードと差し替え
コードを差し替えないと、ポイントがつかないので、必ずマイページから変更しましょう。
「人気ブログランキング」のコード差し替え
SSLに未対応だった「人気ブログランキング」ですが、SSLに対応したようです。
にほんブログ村と同じ手順でコードを差し替えたところ、SSL化されたサイトでポイントがつくことを確認できました。
ただ、「勘違い」や「不具合」という可能性も考えられるので、ここからのアクセスが多いサイトはご注意ください。
（責任は負えないので、試す場合は自己責任でお願いします）
SSL化後の対応
さて、サイトを無事にSSL化したら、エラーが発生していないか確認しましょう。
- サイトにアクセスする
- URLが「https://〜」になっているか確認する
- ブラウザの上部に「鍵アイコン」が表示されているか確認する（スマホからも確認可能）
- 鍵アイコンが表示されていない場合はエラー内容を確認する
完璧に準備できたと思っていても、思わぬエラーに見舞われることもあります。僕もけっこうエラーありました…笑
とはいえ、簡単にエラー内容を確認できるので、冷静に対処したいところです。
エラーの確認方法と対処法
まず、エラーの確認ですが、基本的にパソコンから行いましょう。ブラウザは無料の「Google Chrome」がおすすめです。
- 表示（ブラウザ上部のメニュー）
- 開発/管理
- デベロッパーツール
とクリックしていくと、右下に表示されるはずです。Macは、”⌘”＋”option”＋”I”（アルファベット）がショートカットキーです。
例）バリューコマースのコードがSSL未対応の場合
例えば、バリューコマースでSSL未対応のコードを使っていると、このようにエラーが表示されます。
背景が黄色のエラーもあります。
いずれも、「外部から読み込んでいる画像のURLがhttp://〜で始まっているからSSL化できないよ」という内容のエラーです。
エラーの対処法
エラー内容によって対処法が変わってくるんですが、ほとんどの場合、先述のような「外部から読み込んでいる画像」が原因だと思います。
このようなエラーが表示された場合の基本的な対処法は下記の3つ。
- 画像のURLがhttps://〜のコードに差し替える（アフィリエイトなど）
- 画像を削除する
- そのページのSSL化を諦めて、そのままにしておく
そこまで重大なエラーでもないので、SSL未対応のコードしかなくて差し替えできない場合は、スルーしてもいいかもしれませんね。
まとめ
正直、ここまで神経質になって準備しなくてもいいんですが、公開前に対応した方がスマートだと思います。
SSL化後には「Googleアナリティクスの設定」や「サーチコンソールの設定」などもありますからね。
以上、僕と同じような理由でサイトのSSL化に迷っている方に参考にしていただければ嬉しいです！
また、エックスサーバー
なら無料でSSL化できるので、料金がネックになっているのであればエックスサーバーがおすすめですよ:)
