はてなブログで運営しているブログを常時SSL化（HTTPS化）しました。
SSL化は無料でできますが、いくつかやらなければいけないことがあります。
ということで、必要な準備や、SSL化の方法・手順、注意点、SSL化後にやることなどすべてまとめました。
これからSSL化しようとする人はぜひ役立ててください。
はてなブログのSSL化はやっておいた方がいい
- 検索流入でブログのアクセスを集めたい
- ブログで収益を得たい
そう考えている人は、SSL化はぜひやった方がいいです。
なぜか？
SSL化の目的はそのサイトのセキュリティの向上です。
SSL化したサイトでは通信が暗号化されるため、そのサイトのセキュリティが向上します。
SSL化したサイトはURLの冒頭が「https」になります。
逆に、SSL化されていないサイトは「http」で始まるということです。
既に、GoogleはサイトのHTTPS化の有無を検索順位に反映させると発表しています。
もちろんHTTPSのサイトの方が順位は優遇されるという意味です。
その影響度は今のところはそんなに高くないようですが、徐々にHTTPS化の重要度は高まると見られています。
その証拠に、Googleは2018年7月24日にアップデートされるGoogle Chrome 68ではHTTPS化されてないサイト（URLがhttpで始まるサイト）を閲覧した場合、アドレスバーに「保護されていません」という表記すること発表しています。
参考記事▶︎Google Chrome 68 introduces HTTPS as the new security must-have - The Garage
想像してみてください。
インターネットに詳しくないユーザーが、クリックしたサイトを1目見て「保護されていません」という表示があった時、どんな気持ちになるか？
何か危ないウイルスにでも感染させられるんじゃないかと不安になり、すぐにサイトから離脱する可能性は決して低くはないでしょう。
そしてこのGoogleがSSL化を重要視していっている傾向は、SSL化が検索順位に与える影響が今後増していく兆候だとも見て取れます。
検索流入からアクセスを集めたい、収益化につなげたいという人にとっては、ブログのSSL化は必要だということがわかってもらえたかと思います。
はてなブログも、2017/09/25にSSL化へ対応していくことを発表。
その後、2018/04/17にはてなが提供するドメインでSSL化が可能に。
そして、2018/06/11に、ようやく独自ドメインを含むすべてのドメインではてなブログのSSL化が可能になりました。
HTTPSを有効化する前の準備
HTTPSの有効化自体はワンクリックで終わります。
だけど、いきなりそれをしてしまうと思わぬエラーが出て損害が生じる恐れがあります。
しかもHTTPS化は1度実行すると、もう戻すことはできません。
そこで必要になるのが以下の事前準備。
- テスト環境を構築する
- テスト環境で、修正箇所を確認し、メモする
- SSLを有効化する時刻を決める
テスト環境を作る
いきなりSSL化して、すぐに復旧できないようなエラーが起こると困ります。
「デザインが崩れた」などの報告もチラホラ見かけます。
それだけならまだいいですが、もっと深刻なエラーが起こらないとも限りません。
そこで、自分の今のブログと全く同じ環境（テスト環境）を作って、自分のブログをSSL化したらどうなるかを試してみます。
テスト環境の構築はすぐできます。
- はてなブログの「ダッシュボード」へアクセスして新しいブログを作成（ブログは無料アカウントで3個、有料アカウント（はてなブログPro）で10個まで作成可能）
- テストブログの「設定」タブの「基本設定」「詳細設定」を本ブログと同じ設定にする（ドメインはいじらなくてよい）
- テストブログの「デザイン」にアクセスし、HTMLやCSSなどすべての設定を本ブログと同じにする。
- 本ブログの記事をエクスポートする（設定 >詳細設定 > エクスポート（記事のバックアップと製本サービス） >エクスポートする（1度エクスポートしている場合は「エクスポートし直す」） >ダウンロードする）
- エクスポート・ダウンロードした記事ファイルをテストブログにインポートする（管理画面左のインポートをクリックし、「一般のブログ」「ブログデータをアップロード」から「MovableType形式」を選択し、先ほどダウンロードしたファイルを選択し、インポートする）
2018年以降、新たに開設したはてなブログは自動でSSL化されているので、これでHTTPSのテスト環境は完成です。
テスト環境は、ブログデザインを変更するときなどにも便利なので1度作っておくと便利です。
次にエラーが起きている箇所を確認します。
テスト環境で、修正箇所を確認し、メモする
HTTPS化したサイトをGoogle Chromeで開くと、通常、アドレスバーの冒頭は以下のように「保護された通信」と表示されます。
しかし、おそらくあなたのサイト（テスト環境）は、このように表示されると思います。
これは混在コンテンツ（Mixed Content）という問題が起きている状態です。
サイト自体はSSL化されているけど、サイト外から引っ張ってきている画像やjQueryなどのコードはSSL化していないサイトのものを使っているから完全に安全とは言えないよ、ということを示しています。
これではせっかくSSL化しても、Chorome 68以降ではアドレスバーに「保護されていません」というマークが出てしまいます。
さらに、これが原因で、画像が表示されなかったり、シェアボタンやブログデザインに不具合も生じてしまいます。
Mixed Contentの原因は以下の手順で調べられます。
Google Chromeで右クリック > 検証 > 右に出てきたカラムの上にあるConsoleをクリック。
基本的に、この方法で調べていくことになります。
が、それだと大変ですので、多くの人に共通に生じるであろうMixed Contentの原因と修正方法を以下に挙げておきます。
ブログ全体の設定で生じる問題
まず、ブログデザインに関わるHTMLやCSSなどで生じる問題についてです。
はてなブログ読者登録ボタン
2016年以前ぐらいにこのボタンを設置した人は、画像のURLがhttpになっている可能性があります。HTMLで「iframe src="http~」に「s」を追加し、「iframe src="https~」にします。
Feedlyボタン
Feedlyの読者登録ボタンを使っている場合も、HTMLで「http」の部分に「s」を追加します。その後、ボタンがちゃんと機能するかチェック。うまくいかなければ、もう一度公式サイトからボタンを取得しましょう。
jQuery関連
ゆきひーさんや、いつ俺さんのオリジナルシェアボタンを使っている人は要チェック。
例えば、
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js">
の「http」に「s」をつけて、
<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js">
に。
また、はてなブックマークのシェアボタンで1つ注意点。
シェア数を獲得するためのコードに、
http://api.b.st-hatena.com/entry.count?
が含まれる場合は、
https://b.hatena.ne.jp/entry.count?
に直すと、シェア数がちゃんと取得できるようになります。
github関連（パンくずリスト、合わせて読みたいG、など）
「太陽がまぶしかったから」さんのオリジナルパンくずリストや「合わせて読みたいG」を使っている人は要チェック。
以下は、パンくずリストで必要なコードですが、httpの部分をhttpsに修正します。
<script src="http://bulldra.github.io/commons.js" charset="utf-8"></script>
<script src="http://bulldra.github.io/breadcrumb.js" charset="utf-8"></script>
↓
<script src="https://bulldra.github.io/commons.js" charset="utf-8"></script>
<script src="https://bulldra.github.io/breadcrumb.js" charset="utf-8"></script>
合わせて読みたいGは、httpsに書き換えると表示されなくなったのでMilliardに差し替えました。
デザインはこちらを参考にカスタマイズしました。
パンくずリストについて、1点注意点。
上記のように、httpsに修正すればMixed Contetの問題は解消します。
しかし、ブログによっては子カテゴリがうまく表示されなくなってしまうことが。
パンくずリスト
正しい表示
SSL化後に崩れた表記
▲子カテゴリが表示されない
カテゴリ表示も崩れることが。
正しい表示
SSL化後に崩れた表記
▲2行で表示されカテゴリの階層構造がわからない
子カテゴリを使ってない人はいいですが、子カテゴリまでちゃんと表示させたい人は、以下の記事を参考にパンくずリストを設定し直すのがいいです。
記事単位で生じる問題
次に記事単位のHTMLで生じる問題について。
アフィリエイト関連の画像
アフィリエイトのためにAmazonや楽天、各種ASPのサイトから引っ張ってきている画像の参照元が”http”の場合、修正の対象となります。
例えば、カエレバ・ヨメレバを使ってる人も多いと思いますが、この時に引っ張ってきている画像がAmazonや楽天のサイトが参照元になってます。
また、各種ASPのアフィリエイトリンクにはトラッキングのためのimgタグがついています。これも画像の1種です。
もちろん、各種ASPは今ではhttps化していますが、SSL化対応以前にアフィリエイトリンクを作成している場合、修正が必要になります。
SSL化対応の時期は各ASPで違います。
例えば、Amazonは2016年12月に、A8は2016年7月に対応しています。
はてなのブログカード
リンクにはてなのブログカードを使っている場合、古いものはカード内のサムネイル画像がhttpになっていることがあります。
▲ブログカードとはこういうヤツのこと
その場合、ブログカード自体が消えてしまいます。
画像のリンクに「s」を追加して「https」に修正してあげましょう。過去記事貼り付けで新たに貼り付けてもいいです。
以上、多くのブログで生じると考えられる問題を列挙しました。
ここで挙げた点を修正してもアドレスバーの警告が消えない場合は、Chromeの「検証」を使って問題解決を図ってください。
また、作業のほとんどは、「http」を「https」に直す作業です。
一括置換ツールを作り公開されている方もいるので、自己判断で使ってみるのも手です。
「ブログ全体の設定で生じる問題」と「記事単位で生じる問題」について触れましたが、まず大事なのは「ブログ全体の設定で生じる問題」を特定することです。
そのために、まずはテストブログのトップページで、Chrome右クリックの「検証」を使いながら、Mixed Contetを解消することを目指します。
その時、修正した点をメモしながら作業を進めます（本ブログの修正作業で使うため）。
次に、ブログの主要な記事（アクセス数が多い記事や収益が高い記事）のいくつかで、Mixed Contentを解消するための修正点をチェックします。
記事単位の修正では、各記事で修正のポイントが違うので、まずは優先して修正すべき主要記事で修正点を確認しつつ、自分のブログにどんな修正点が生じるのか、その傾向を把握します。
だいたいポイントを把握したら、その他の記事の修正はテスト環境ではなく本ブログで行えばいいでしょう。（でないと記事数が多い人ほど、いつまで経ってもテストが終わらないし、記事の修正作業がテストと本ブログで2度手間になってしまう）
そこだけ把握しておけば、SSL化直後に主要記事は復旧できます。
その他の記事は、徐々に修正していけば充分でしょう。
SSLを有効化する時刻を決める
SSL化した直後は、しばらくの間サイトにアクセスするとセキュリティーエラーが生じるようになります。
この表示を見たユーザーは不安を感じてサイトから離脱してしまう可能性が高いです。
ぼくのブログは1分程度で解消されましたが、長引く可能性も考え、アクセスが少ない時間帯に実行した方がいいでしょう。
一般的には午前2時〜7時ぐらいの間がアクセスが少ない時間帯です。
Googleアナリティクスで自サイトのアクセスが少ない時間帯を調べられます。
ホーム画面を下にスクロールし、「ユーザーが訪れる時間帯はいつですか？」という項目のグラフを見て、いつSSL化を行うか決めましょう。
HTTPS化の実行とその後の作業
準備が整ったらいよいよHTTPS化を行いましょう。
HTTPS化の実行
ワンクリックでできます。
設定＞詳細設定＞HTTPS配信から変更できます。
「変更する」をクリックすると警告が出るので「OK」をクリック。
前述のとおり、https化直後はサイトにアクセスするとセキュリティーエラーが出ますので注意を。
事前準備でメモした「ブログ全体の設定」の修正点を直す
事前準備でメモした修正点を直していきます。
まずは、「ブログ全体の設定」に関わる修正点から着手します。
記事単位の問題の修正を行う
優先度の高いものから記事単位の修正を行います。
主要な記事は、テストでメモした修正点を直していけばいいのですぐ済むはずです。
テストではタッチしなかった記事も、Google Chromeの検証などを適宜使って修正をしていきましょう。
Googleアナリティクス、サーチコンソールなどの再登録
サイトをhttps化すると、サイトのURLが変わることになるので各種解析ツールの再設定が必要になります。
主要記事の修正がひと段落したところで、適宜対応をしていきましょう。
Googleアナリティクス
Google アナリティクスにログインし、
管理画面左のサイドバー「管理」
→画面中央「プロパティ設定」
→デフォルトのURLをクリックしてhttp→httpsに変更して、下にスクロールし「保存」ボタンを押します。
アナリティクスの再設定はこれで完了です。
Google Search Console
サーチコンソールは、Googleアナリティクスのようにhttp→httpsと切り替えることができません。
なので、「プロパティの追加」から、httpsのサイトを新しく登録し直します。
また、サイトマップも新しく送信しておきましょう。
検索順位チェックツール
検索順位チェックツールを使っている場合も、再設定が必要になる場合があります。
アドセンス非表示コード
解析ツールではありませんが、こちらの記事などの「特定記事でのアドセンス非表示」の設定をしている場合、修正が必要です。
コード内の「http」を「https」に修正しましょう。
ASPへの再登録
ASPを利用している場合、サイト情報を更新する必要があります。
30秒で終わるのですぐやろう。
A8
画面右上の「登録情報」→「サイト情報の登録・修正」
URLの「http」のあとに「s」を追記します。
更新を押せば完了。
バリューコマース
ほぼ同じです。
画面右上の「設定」→「サイト情報」
あとはA8と同様に、URLをhttpsに修正すれば完了。
以下、他のASPもほぼ同様です。
ブログデザインの編集画面が崩れたら
HTTPS化すると、はてなブログのブログデザイン編集画面で、ブログのレイアウトが崩れることがあります（ブログ自体は正しく表示されて、デザイン編集画面だけでレイアウトが崩れるという現象）。
その場合、テーマを新しく入れ直すと直ります。
詳しくはこちらの記事が参考になります。
以上です。
記事数が多いと対応が大変ですが、早めに取りかかりましょう。
面倒くさいだけに終わった時はなかなかの達成感を味わえます。
