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