先日重い腰を上げてこのブログもHTTPS化しました。
もっと早くにしようと思っていたのですが、仕事と子育ての合間に更新しているので、せっかく時間がとれれば記事を書く方を優先してしまっていました。。。。
HTTPS化とは
今更ですがHTTPSとはなんぞやということをさくっとまとめておきます。
私自身も理解があいまいなままでいたのでしっかり理解することができてよかったです。
このサイトをPCやスマホのブラウザで閲覧しているとページのURLの前に鍵のマークが付いていると思います。
これがHTTPS化している証となります。
HTTPとHTTPSの主な違いは通信内容が暗号化されていないか、されているかの違いです。
HTTPSに対応しているサーバでは、ホームページのデータをやり取りする際に暗号化されて通信するようになります。
通信内容を暗号化することで、安全にWebの情報をやり取りすることができます。
また、HTTPSにしておくとSEO対策でも有利になることをGoogle側も公式に宣言していますね。
「HTTPS をランキング シグナルに使用します」
HTTPS化したサイトをSEOで優遇すると公表しています。
ECサイトなどユーザー情報を管理するサイト以外の、ブログなどのサイトでも今後さらに（すでに）HTTPS化は必須となっていきますね！！
さくらレンタルサーバーでWordpressを使用している場合
私はさくらレンタルサーバーでWordPressを使用していたので、HTTPS化をやるぞ！と意気込んだもののわりとさくっと作業が完了しました。
これからブログを始める方であまりサーバーサイドに詳しくない方（私のような方）はさくらレンタルサーバーおすすめです！！
すでにHTTPでサイトを運用していても専用のWordPressのプラグインがありますので切り替えも簡単でした。
前提条件：スタンダートプラン以上で独自ドメインを取得済み
プランの詳細はこちら
さくらのマネージドサーバ
HTTPS化の手順
さくらインターネット会員ページトップからログイン
（コントロールパネルからもログインできます）
契約情報→契約サービス一覧ページへ
サーバー設定ボタンを押下
証明書欄の登録リンクを押下
（画像はすでにHTTPS後のため更新となっています）
無料SSL設定へ進むボタンを押下
無料SSLを設定するボタンを押下
設定完了！！
証明書の発行が完了すると完了した旨のメールが届きます！！
リダイレクト設定を忘れずに！！
さくらレンタルサーバーで稼働しているWordPressの場合、HTTP→HTTPSへのリダイレクト設定もプラグインひとつで対応できます！！
さくらのレンタルサーバ 簡単SSL化プラグイン
設定方法はさくらレンタルサーバー公式サイト内にかかれてありますのでこちらを忘れずに確認しましょう！
さくらのマネージドサーバ
それでも鍵マークが出ない場合
これでHTTPS化は完了しましたが、私の場合はこれだけでは不十分でした。。。。
サイト側の問題で鍵マークが表示されません！！！
「このサイトへの接続は完全には保護されていません」との表記が。。。
よくある問題
・ブログ内に使用している画像やリンクがHTTPS化できていない
・headにgoogleタグが重複してかかれている
・WordPressでHTTPS化と相性のよくないプラグインがインストールされている
サイト内の画像やリンクを一括変換してくれるプラグイン「Search Regex」
よくあるエラーの１つとして、画像やリンク先がHTTPのままというものがあります。
このエラーを解消するのに便利なのがWordPressのプラグイン「Search Regex」です！
プラグインをインストール後有効化したら、ツールから「Search Regex」を選択します。
「Source」「Limit to」「Order By」の3つについて設定します。
「Source」は検索・置換の対象を指定します。
今回は記事内に使用しているHTTPをHTTPSに変換したいので、デフォルトのPost content でOKです。
・Comment author （コメントの名前）
・Comment author email （コメントのメールアドレス）
・Comment author URL （コメントのURL）
・Comment content （コメントの内容）
・Post content （記事の本文）
・Post excerpt （記事の抜粋）
・Post meta value （記事のカスタムフィールド）
・Post title （記事のタイトル）
・Post URL （記事のURL）
「Limit to」は一度に置換する上限のことです。
デフォルトでは「No limit」となっていて制限がありません。上限を設定する場合は「10」「25」「50」「100」から選択して下さい。こちらもそのままでOK！
「Order By」は検索を行った時に並べ替えの方法を指定します。
「Ascending」であれば昇順、「Descending」であれば降順です。デフォルトは「Ascending」となっています。こちらもデフォルトのままでOKです。
Search patternに「http」を、Replace patternに「https」を入力し、Searchボタンを押下。
該当エリアが下に表示されますので、変換して問題ないか確認。
Repaceボタンを押下。変換された結果が表示されますので再度問題ないか確認します。
最後にRepace & Saveを押下して保存します。
CSSやテンプレートに直接記述されている部分は書き変わらないので、忘れずにチェックしておきましょう！！
私も<head>内に直接かかれてあった背景指定してある画像のURLのせいでエラーがなかなか消えませんでした。。。
忘れずにすべてHTTPSに書き換えましょう！！
その他のエラーの内容をConsoleで確認しよう
上記を対応してもブラウザURL前に鍵アイコンが出ない場合はまだ他のエラーがある為です。
エラーを確認する為にブラウザの開発ツールでConsoleを選択します。
Errors内容が表示されているので１つ１つ解決していきます。
上記はエラーが解消された後の為何もかかれていませんが、エラーがある場合はエラーとなっているファイルや内容が表示されます。
WordPressプラグイン「WP Post Email Notification」を停止しておく
ConsoleでJSがエラー表示されていたのでこちらも念のため停止しました。
その他に以下のエラーが表示されていました。
adsbygoogle.push() error: Only one ‘enable_page_level_ads’ allowed per page.
調べてみると、WordPressのテーマから設定できるアドセンスの自動広告の他に、<head>に直接アドセンス広告の設定が書かれていました。
二重に書かれてあった為、<head>に直接書いてある方を削除。
リフレッシュ後無事鍵マークがでるようになりました！！！
重複していたアドセンスタグ
<script>
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: “ca-pub-xxxxxx”,
enable_page_level_ads: true
});
</script>
そんなこんなで少し手間取りましたが、所要時間は１時間程度で無事HTTPS化することができました！
