ブログをhttps化（常時SSL接続）させた時につまづいたポイントを紹介

こんにちは、パラレルブロガーのゆーすけ(@yusuke_plmrstn)です。

すでにお気付きの人もいるかもしれませんが、このムクッといこうブログ、常時SSLに対応しましたっ！

安全な情報の取扱いに対する意識が高まり、セキュリティ対策も厳しくなる昨今の流れを考えると、例えブログであっても常時SSLへの対応は必須です。

そこで今回は

• なんでSSL接続を取り入れようと思ったのか
• その時につまづいたポイント

をご紹介したいと思います。

特につまづきポイントは今後SSL接続を取り入れようと考えている人にとって役に立つ情報が入っているのでぜひ参考にしてみてください。

スポンサーリンク

SSLとは？

SSLってなんとなく聞いたことあるけど何のことだっけ？と思うかもしれません。

SSLとは Secure Sockets Layer のことで、インターネットを安全に使うために情報を暗号化することをいいます。

例えばSSL対応してないサイトで氏名や住所、キャッシュカード情報などを入力すると悪意を持った第三者に盗み見されてしまう恐れがあります。

そのため個人情報を取り扱うWebサイト（銀行や通販サイト、Googleなんかもそうですね）ではほぼ確実にSSL接続するよう対策が取られています。

あの超大手ヤフージャパンも2017年3月までに全てのページにおいて常時SSL接続に対応させると公式発表しています。

時代は確実にSSL化へと進んでいます。

 

SSL接続されているかどうかの見分け方

訪問しているページがSSL接続しているかどうかを簡単に見分ける方法があります。

緑字で「保護された通信】

例えばChromeで今このページを閲覧している人の場合、アドレスバーの左側に緑色で「保護された通信」という文字があるのがわかりますよね。

この文字があればそのページは安全にSSL接続しているということがわかります。

もしこれがSSL接続していないと緑色の文字は表示されず、灰色になります。

HTTPか？HTTPSか？

もう1つの簡単な見分け方として、そのサイトのURLがHTTPSから始まっているか確認してみましょう。

• HTTP→暗号化されてない接続
• HTTPS→暗号化している接続

今までのムクッといこうブログはHTTPから始まっていましたが、今回SSLに対応したことでHTTPSから始まるようになっています。

自分がアクセスしようとしているページがHTTPから始まるのかHTTPSから始まるのかを確認するクセをつけるといいですね。

 

SSL接続してないから危険！というものでもない

SSL接続していれば確かに安全とは言われますが、じゃあ逆にSSL接続してないページは全部危険なのかというと実は必ずしも危険というわけじゃありません。

SSL接続していないブログ

世の中には人気ブロガーがたくさんいますが、その全てのサイトが安全なSSL接続をしているかというとそんなこともないんですね。

その一例を紹介します（2017年3月現在）。

「まだ東京で消耗してるの？」イケダハヤトさん

例えばブログ会の巨匠イケダハヤトさんのブログ「まだ東京で消耗してるの？」はSSL接続してません。

アクセスするとわかりますが、URL左側に「保護された通信」の緑文字は出ませんよね。

「No Second Life」立花岳志さん

他にも立花岳志さんが運営する「No Second Life」もSSLに対応していません。

「やぎろぐ」やぎぺーさん

人気ブロガーやぎぺーさんのやぎろぐも対応してないですね。

「ヨッセンス」よっさん

超わかりやすいブログでおなじみのヨッセンス。

こちらもSSLには非対応です。

「まじまじパーティー」あんちゃさん

美人ゲス下ネタブロガーあんちゃさんのまじまじパーティーもSSL非対応ですね。

「ごりゅご.com」ごりゅごさん

とにかく情報量が半端なく多いごりゅごさんのブログ。SSLには非対応ですね。

「むねさだブログ」むねさださん

わんぱくブロガーとして多方面で活躍されるむねさださんのブログも非対応です。

SSL接続しているブログ

ではSSLに対応しているブログにはどういうものがあるのかみていくことにしましょう。

「モノグラフ」PITEさん

おしゃれブログの代表ともいえるPITEさんのモノグラフ。SSL接続にもバッチリ対応してます。

「gori.me」goriさん

ガジェットブログといえばこの人以外にはいない！と言われるgoriさんのブログですが、SSL対応しています。

「ブログマーケッターJUNICHI」JUNICHIさん

SEOやマーケティングなどを専門に書かれているJUNICHIさんのブログ。SSL対応です。

どうしてみんなバラバラなのか？

今紹介したのはほんの一例だけです。

ですが月間何十万PV、いやそれ以上叩き出す人気ブログでさえもSSLに対してここまで対応が違うというのはちゃんと理由があります。

他人の氏名や住所、電話番号やクレジットカード情報などの個人情報を取り扱わないブログにおいてSSL接続に対応しようとする場合、メリットよりもデメリットが大きいと考えられているためです。

そうなんです、ブログをSSL接続させようとするとメリットとデメリットが存在するのです！

 

SSLのメリットとデメリット

まずメリットについて。

SSLのメリット

SSL接続に対応した場合のメリットはこのようなものがあります。

• セキュリティ性が向上する
• ユーザーに安心感を与える
• HTTP/2対応ブラウザで表示が速くなる
• SEOに有利になる
• リファラー精度が向上する

こうやって書き出してみるとけっこうな数のメリットがあることがわかります。

セキュリティ性が向上する

データのやり取りが暗号化されるので個人情報を抜かれる心配が激減します。

お問合わせフォームなんかも対象になるので個人ブログといえどもこれはメリットになりそうですね。

逆にいうとお申込みフォームを載せて個人情報を取り扱うページ名のにも関わらずSSL接続に対応してないサイトで申し込みするとデータが盗み見されるリスクがあるということです。

ユーザーに安心感を与える

これはもちろんHTTPとHTTPSの違いをちゃんと知ってる人が見ること限定の場合ですが、やっぱりちゃんとセキュリティを意識したサイトなんだということで安心感がありますよね。

それが信頼に繋がり、ブログファンになってくれる可能性だって高まります。

HTTP/2対応ブラウザで表示が速くなる

ごめんなさい、難しい情報は専門外なので端的に短くっ！

ページの表示速度が上がるよ！ということです。

最新のIE11やChrome, FireFox, Safari, Operaなどなど、ほとんどのブラウザはHTTP/2に対応しているため速度アップが期待できます。

SEOに有利になる

検索業界を牛耳るGoogleさんの発表によると、常時SSL化されたサイトを優先的にインデックスに登録して表示させるよということ。

でも実はこれ、検索エンジンのアルゴリズムのうちほとんど影響を及ぼさない極わずかな要素にすぎないため、SEOに対して有利に働くというのは現実的には考えにくいのかも。

リファラー精度が向上する

自分のブログへのアクセス経路を解析したとき、どこのページから訪問してきたのかという情報をリファラーといいます。

アナリティクスを使って解析するならリファラー情報はかなり大切な項目になるんですが、もし自分のサイトが常時SSLに対応してないサイトの場合、訪問元のページがHTTPSだった場合に正確にリファラーが表示されません。

これがもし自分のサイトが常時SSLに対応している場合、訪問元のページがHTTPSでもHTTPでもちゃんとカウントして表示されます。

SSLのデメリット

続いて常時SSLのデメリットはこちら。

• 費用がかかる
• HTTPS未対応の広告が表示されない
• 一時的に検索順位が落ちる
• SNS系サイトのシェア数がリセットされる
• とにかく面倒！

費用がかかる

SSL化させようとすると証明書取得などの費用がかかります。

サーバーにもよりますが、だいたい1万円前後でしょうか。

でも僕が使っているエックスサーバー だとなんとこの費用は一切かかりません。

すべて無料で常時SSL接続できるようになります。

エックスサーバー 、ぱねぇす！

http://www.xserver.ne.jp/

HTTPS未対応の広告が表示されない

これは特にアドセンス広告に当てはまることですが、HTTPSに対応していない広告が表示されなくなります。

つまり今まで読者さんが興味を持ってくれる広告が表示されていたところ、全然関係のない広告が表示されてしまいクリック率の低下につながることが考えられます。

一時的に検索順位が落ちる

HTTPからHTTPSに移行している間は検索順位が落ちる可能性があります。

しばらくすれば元に戻るようですけど、それも個人差があります。

ちなみに僕のブログでやった時は目立った検索順位の下落はありませんでした。

SNS系サイトのシェア数がリセットされる

ブログの記事はSNSにシェアするためのボタンが用意されています。

こんなやつですね。

シェアされるほどだんだん数字が積み上がっていく仕組みのためやる気にもつながりますが、HTTPからHTTPSに乗り換えるとこの数字が全てリセットされてしまいます。

実は常時SSL接続するためHTTPからHTTPSに変更した場合、HTTPSは全く別の新しいサイトとして認識されるという仕組みがあります。

今まで積み上げてきたサイトの評価が0になったりインデックスが急に無くなったりということはないですけど、SNSシェア数はリセットされてしまうんですね。

でもこれ、プラグインを使うと解消できちゃいます。

こちらで紹介されている SNS Count Cache というプラグイン。

これを使うことでシェア数を引き継ぐことができるんですね。

興味がある人は覗いてみてください。

とにかく面倒！

とにかく面倒なことが多い！

今紹介したデメリットが小さく感じるほどに常時SSL化に対応させるには面倒な作業が多くなります。

具体的には

• 旧サイト（HTTP）に来たアクセスを新サイト（HTTPS）にリダイレクトさせる
• アナリティクスやサーチコンソールの設定を変更する
• 内部リンクの置換
• コードの書き換え

などなどあります。

これらのやり方は僕が別で運営しているご署名ネットをHTTPS化させた時の具体的な方法で紹介しているのでそちらを参考にしてみてください。

 

今回紹介したいこと

で、前置きがかなり長くなってしまいましたが、今回紹介したいのはとにかく面倒なことの中の1つ「コードの書き換え」の話。

HTTPSにするためには今まで投稿した画像や内部リンク全てを「http→https」というリンク先に書き換える必要があります。

普通に考えたら何百、何千というリンク先を手作業で書き換えるのは無理ゲーなんですけど、これは Search Regex という置換プラグインを使うことでものの数秒で終わってしまいます。

詳しくはやはり先程紹介した過去記事に載せています。

ところがプラグインで置換しただけではうまくHTTPSとして動かすことができないんです。

プラグインでも変更できないところは手動で修正するしかないんです。

それも1ページ1ページを確認してちゃんとHTTPSになってるかどうかをチェックしながらです。

これが本当に手間なんですが、ここをこうして修正したら効率的に作業できるポイントをまとめてご紹介します。

 

HTTPS化させるため確認しておきたいこと

んではさっそくいきましょう。

まずはこちらの記事を参考にして契約サーバーの設定やリダイレクトなど必要な作業を済ませておきましょう。

今までの投稿記事が少なかったり新規サイトの立ち上げの段階であればこの記事の通りにするだけでHTTPS化できるはずですが、大半の人は一発でクリアするのは難しいです。

例えばMacでChromeを使っている人だとページを開いている状態で Option+Command+I を押すことでデベロッパーツールが起動し、HTTPS化の邪魔になっている項目があといくつあるか知ることができます。

↑この状態だと修正しないといけない項目が6つありますね。

これを見ながら1つ1つチェックしてもいいですが、修正すべきポイントたちをまとめました。

ウィジェットのテキスト

サイドバーにプロフィールを表示させたりテキストでリンク先を貼ってる人いると思います。

Search Regex で置換してもウィジェットの中身には非対応なのでここは手動で変更しましょう。

例えばリンク先として自分のプロフィールページに誘導している記載があれば、「http://profile」→「https://pfofile」のようにhttpをhttpsに書き換えてやりましょう。

プロフィールだけじゃなく、画像のリンクやその他ページのリンクがあればそちらも全て書き換えます。

style.cssでURLを指定している場合

style.cssに手を加えている人はそこがひっかかることがあります。

僕が先日紹介した「カエレバ・ヨメレバのCSSカスタマイズ」に関する記事の中で背景に画像を指定する方法を紹介しました。

この方法では画像URLをCSSに書き込むのですが、Search Regexでは変更できずそこがhttpのまま残ってしまうため、手動でhttpsに書き換えましょう。

ファビコン画像の設定

Word Pressのカスタマイズ画面からファビコン画像を簡単に設定することができる機能があります。

画像自体は Search Regex のおかげでhttpsになってますが、ファビコンに設定している画像は古い情報（http）が残ったままになってます。

これがhttps化を妨害する要因になります。

対策は一度「削除」ボタンを押してもう一度画像を指定してやるだけです。

これでファビコンはクリアです。

ヘッダー画像の設定

ヘッダーに画像を使っている場合もファビコンと同じように古い情報が残っていることがあります。

そのため一度画像を削除してもう一度同じ画像を設定してやることでhttp画像からhttps画像に更新することができます。

Pz-Link Card

リンク先をおしゃれにカスタマイズできるプラグイン “Pz-Link Card” を使っていてファビコンとサムネイル画像を自動取得にしている場合、取得先がhttpsに対応していません。

そのためプラグイン設定からAPIを変更してあげましょう。

まず Word Press管理画面から[設定]-[Pz-カード設定]に進み、下のほうにある「画像取得APIの指定」までスクロールします。

するとファビコンの取得APIとサムネイルの取得APIの項目があります。

ここを次のように変更します。

ファビコンの取得API

（変更前）http://www.google.com/s2/favicons?domain=%DOMAIN%

（変更後）https://www.google.com/s2/favicons?domain=%DOMAIN%

サムネイル画像の取得API

（変更前）http://s.wordpress.com/mshots/v1/%URL%?w=100

（変更後）https://api.thumbalizr.com/?url=%URL%&width=240

こうすることでちゃんとhttpsに対応した画像を取得できるようになり、Pz-Link Cardプラグインによるエラーを回避できます。

iTunes Widget Builder

Appleオリジナルのツールで iTunes Widget Builderという、アプリをおしゃれに紹介できるものがあります。こんなやつですね。

今まではこれを使ってアプリを紹介することが多かったんですが、どうやらhttps化させるには画像取得のコードが一部ひっかかるようです。

そのためそのコードは全てかん吉さんの「ポチレバ」、もしくはまなしばさんの「アプリーチ」に置き換えましょう。

今までたくさんリンクを貼っていた人は大変な作業かもしれないですね。

カエレバ

非常にお世話になってるかん吉さんの「カエレバ」。

今はちゃんとhttpsに対応したサムネイルを取得するようコードが書き換えられているので問題ありませんが、昔の古いコードはhttpsに対応しておらずエラーが出ます。

長くブログをやってる人やアフィリエイト中心の人だと相当な割合でカエレバを使っているケースがあり、いちいち手動で修正するのは気の遠くなる作業です。

そこで置換プラグイン Search Regex を使ってサクッと終わらせましょう！

置換1

Word Press画面から[ツール]-[Search Regex]を開き、次のように入力します。

このツールは①に入力した文字列をブログ全体から見つけ出し、それを②に入力した文字列と入れ替える（置換する）という機能があります。

このおかげでいちいち手動で修正する手間が大幅に削減できるわけです。

今回の例でいうとカエレバの古いコードで使われている画像取得URLの「http://ecx.」という文字列を、httpsに対応した「https://images-fe.ssl-」に置換するという作業です。

OKであれば3つ並んだボタンの一番右「Replace & Save」をクリックします。

これで一気に置換完成です。

置換2

もう1つ作業があります。

今と同じ要領で次はこんな風に入力します。

同じような文字の置換に見えますが、httpとhttpsが微妙に違ってます。

僕の場合はなぜかhttpバージョンがいくつか残っており、これが原因でエラーが出ていました。

この修正を行うことでカエレバも完全にhttpsに対応させることができます。

バリューコマース

大手アフィリエイトサイトですが、ここでYahooショッピングと連動させていた僕は多くのエラーに悩まされました。

こんな感じ。

これもやはりサムネイル画像取得のリンク先がhttpsに対応してないことによるエラーです。

古いコードを使っているとこれがたくさん残っていることがあるんですね。

もちろん手動で対応すれば出来なくはないんですが時間がもったいない！

ということでここでも Search Regex を使ってさくっと終わらせます。

設定はこうしてください。

やってることは単純で、バリューコマースのコードに使われているリンクの一部をhttpからhttpsに置換しているだけのこと。

画像左下にResultsが表示されてますが、該当箇所が139箇所もありますね。

これを全て手動でやってたらと考えると・・・

と嘆いていたことでしょう。Search Regex、マジ感謝。

 

画像が原因になることがほとんど

これが今回僕が実施した修正でした。

https化させるためにひっかかるのは実は画像がほとんどの理由を占めます。

今紹介したものでも画像関連の原因が大半でしたよね。

これ以外にもエラーが出る要因はたくさんあると思いますが、デベロッパーツールを使いつつ原因を1つ1つ潰していきましょう。

スポンサーリンク

まとめ

常時SSL化は時代の流れからするといずれは必須となる条件かもしれません。

色々なブログを見てもSSLを導入しているところは本当に少なく、今後何かあれば対応しようと考えている人が多いんでしょうかね。

エラーを潰していく作業はたしかに大変で、長くブログ運営をしている人ほど敬遠しがちなhttps化。

でもネットメディアに携わる者としてセキュリティに対する設定はきちんとしておくほうがいいなと感じる今日このごろです。

ぜひ参考にしてみてください。