当サイトのリンクにはアフィリエイト広告が含まれています

サイト(ブログ)のSSL化前の作業とエラーの対処法!

どうしようか悩みに悩んで、ついに、当サイトも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の読み込み方」を調べることができます。

  1. ajax.googleapis.com/ajax/libs/jquery(先述の読み込み方)
  2. code.jquery.com/jquery
  3. ajax.aspnetcdn.com/ajax/jQuery

もし、URLがhttp://〜で始まっていたら、httpを削除するか、違う読み込み方に変更しましょう。

このコードがある場所はテーマによって様々ですが、「ヘッダー」か「フッター」で読みこんでいるはずです。

POINT

SSL後にサイトの表示がおかしい場合、jQueryが原因の可能性が高いので、アクセスが多いサイトは特に注意しましょう!

アフィリエイトコードの差し替え

僕は、この作業が速攻で終わったんですが、アフィリエイターの方は「コードの差し替え」をする必要があります。

  • テキストリンク
  • バナー画像

ともに、「<img src=”http://〜」の箇所があれば、ページは表示されますが、SSL化はされません。(ブラウザ上部に「鍵のアイコン」があればOK)

A8.net・バリューコマース・アクセストレードのSSL未対応コードの検索方法

どれがSSL未対応コードで、どれがSSL対応コードかわからない時は、サイト内検索してみましょう。

  1. A8.net→http://px.a8.net
  2. バリューコマース→http://ck.jp.ap.valuecommerce.com
  3. アクセストレード→http://h.accesstrade.net

テキストリンクの「1px × 1pxの見えない画像」も探せたかは忘れましたが、バナー画像のコードはこれで探せると思います。

(昔からアフィリエイトを利用している場合、リンクが全然違っているかもしれません)

一括で変更する方法もあるけれど…

  1. A8.net
  2. バリューコマース
  3. アクセストレード

といった、大手のアフィリエイトサービスのコードをチェックしてみたんですが、「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の画像を選択しないと表示されない場合があります。

「追加機能」から選べるので、表示されない場合は差し替えましょう。

ssl-error-2

「にほんブログ村」のコード差し替え

当サイトでは利用していないんですが、ブログランキングの「にほんブログ村」を利用している方は、コードを差し替える必要があります。

  1. マイページログイン
  2. 登録URL変更(http:〜→https:〜)
  3. コード取得
  4. 既存のコードと差し替え

コードを差し替えないと、ポイントがつかないので、必ずマイページから変更しましょう。

「人気ブログランキング」のコード差し替え

SSLに未対応だった「人気ブログランキング」ですが、SSLに対応したようです。

にほんブログ村と同じ手順でコードを差し替えたところ、SSL化されたサイトでポイントがつくことを確認できました

ただ、「勘違い」や「不具合」という可能性も考えられるので、ここからのアクセスが多いサイトはご注意ください。

(責任は負えないので、試す場合は自己責任でお願いします)

SSL化後の対応

さて、サイトを無事にSSL化したら、エラーが発生していないか確認しましょう。

  1. サイトにアクセスする
  2. URLが「https://〜」になっているか確認する
  3. ブラウザの上部に「鍵アイコン」が表示されているか確認する(スマホからも確認可能)
  4. 鍵アイコンが表示されていない場合はエラー内容を確認する

完璧に準備できたと思っていても、思わぬエラーに見舞われることもあります。僕もけっこうエラーありました…笑

とはいえ、簡単にエラー内容を確認できるので、冷静に対処したいところです。

エラーの確認方法と対処法

まず、エラーの確認ですが、基本的にパソコンから行いましょう。ブラウザは無料の「Google Chrome」がおすすめです。

  1. 表示(ブラウザ上部のメニュー)
  2. 開発/管理
  3. デベロッパーツール

とクリックしていくと、右下に表示されるはずです。Macは、”⌘”+”option”+”I”(アルファベット)がショートカットキーです。

例)バリューコマースのコードがSSL未対応の場合

例えば、バリューコマースでSSL未対応のコードを使っていると、このようにエラーが表示されます。

ssl-error-1

 

背景が黄色のエラーもあります。

ssl-error-3

 

いずれも、「外部から読み込んでいる画像のURLがhttp://〜で始まっているからSSL化できないよ」という内容のエラーです。

エラーの対処法

エラー内容によって対処法が変わってくるんですが、ほとんどの場合、先述のような「外部から読み込んでいる画像」が原因だと思います。

このようなエラーが表示された場合の基本的な対処法は下記の3つ。

  1. 画像のURLがhttps://〜のコードに差し替える(アフィリエイトなど)
  2. 画像を削除する
  3. そのページのSSL化を諦めて、そのままにしておく

そこまで重大なエラーでもないので、SSL未対応のコードしかなくて差し替えできない場合は、スルーしてもいいかもしれませんね。

まとめ

正直、ここまで神経質になって準備しなくてもいいんですが、公開前に対応した方がスマートだと思います。

SSL化後には「Googleアナリティクスの設定」や「サーチコンソールの設定」などもありますからね。

以上、僕と同じような理由でサイトのSSL化に迷っている方に参考にしていただければ嬉しいです!

また、エックスサーバーなら無料でSSL化できるので、料金がネックになっているのであればエックスサーバーがおすすめですよ:)


カテゴリー:サイトSSL化

シェフ

このサイト「Fantastech」を運営している人