最新記事 by ソルティー (全て見る)
- ブログを毎日更新したい！と思ったら読む記事【保存版】 - 2019年12月11日
- WordPressテーマとは？初心者にも分かりやすく解説 - 2019年12月6日
- ブログを書く時間がない！と思っている方に実践して欲しい9つの改善法 - 2019年12月3日
- 初心者でも分かるように図解付き！WordPressのメリットとデメリットとは？ - 2019年12月1日
- ブログで収益を上げるのはなぜ難しいのか？稼げるブログにするのに必要な3つのポイント - 2019年12月1日
どうも！ソルティーです！
さて、最近はhttps移行の話が多くなってきましたね。
「そろそろhttpsに移行したほうが良いんじゃないか？」って思って自分でやってみようと思っている人も多いと思います。
そう、httpsはSEOに影響したり、何よりも安全な通信を行うためには必須！
フォームによる入力や、ECサイト（ショッピングするためのサイト）を構築している場合は絶対に設定しておきたい項目です。
今回はこのhttpsに移行するための全手順をエラーの解決法付きで、どこよりも分かりやすくまとめてみましたので、ぜひ参考にしてくださいね〜！
見出し
まずはhttpsが有効かセキュリティー状態をチェックする
まず、httpsになっているかチェックをしてみましょう。
お使いのブラウザでhttpsになっているか確認できます。
基本的にはブラウザのURLの欄に南京錠のようなマークがhttpsの証です。
例えばGoogleChromeで安全な通信（SSL通信って言います）ができている場合は緑色の鍵マークが表示されます。
httpsがうまく設定できていない場合
httpsの設定がうまくできておらず、SSL通信ができていない場合は「保護されていない通信」のように表示されてしまいます。
httpからhttpsに移行するとほとんどのサイトは何もしなければこのような表示になってしまうでしょう。
この場合は、URL上はhttps://◯◯.comのようになっていてもhttpsの効果は発揮されていません。
安全な通信はされないし、SEOの恩恵もありません！早急に直しましょう！
[box class="blue_box"]【ブラウザ毎のhttps確認方法】
ブラウザによってhttpsの確認方法が若干違っています。GoogleChrome以外のブラウザを使っていて、どこを見ればいいか分からない方は詳しい記事があったのでこちらを見てください。
▶主要ブラウザ（Chrome, Firefox, Edge, IE, Safari）のSSL関連挙動一覧
[/box]
SSLエラーをチェックする方法
もし下記のような状態になっていたら要注意。
[box class="red_box"]
- 「安全でない通信」と表示されている
- 「保護されていない通信」と表示されている
- https://が緑色ではない
- 南京錠アイコンに警告マークが表示されている
- 南京錠アイコンが表示されていない
こんな時はエラーを解消しなければいつまで経っても解消できません。
エラーの確認をする場合はツールを使ってチェックしましょう。
Google Chromeのデベロッパーツールでhttpsエラーを確認
Google Chromeにはページ情報を解析するツールが標準で付いてきます。
そのツールを使うとhttpsのエラーを解析することが可能です。
httpからhttpsに移行した場合、画像のURL指定が間違っていることが多いので、そのチェック方法を教えておきます。
[メニュー] → [表示] → [開発/管理] → [デベロッパーツール]と選択しましょう。
※ちなみにWindowsはF12を押しても起動します。
そして、「Console」タブを選択します。
これでエラーや、警告が確認できます。
No.Warningが0になればhttpsとして表示されます。Errorは項目があってもhttpsとして認識されます。
ただし、Errorの中にはhttpsに関わる項目があるのでチェックしておきましょう。
続いて、デベロッパーツールを開いたままGoogle Chromeでエラーのあるページを開きましょう。
すると、Console上のリストにエラー箇所が表示されます。
これらは全て画像のURLがhttpのままになっていますよと警告されています。
一つひとつhttpsにURLを置き換えていけばOKです。
Firefoxの開発ツールでhttpsエラーを確認
Firefoxの開発者ツールでチェックする場合、[ハンバーガーメニュー] → [ウェブ開発] → [開発ツールを表示]を選択すればツールが起動します。
安全でない表示コンテンツが混在している場合、その一覧を確認することが可能です。
Firefoxのページ情報ダイアログでチェック
Firefoxの場合、ページ情報の詳細を表示して確認する方法があります。さきほどのコンソールよりもかなり分かりやすいです。
まずは、https化がうまくできていないページを開いて、南京錠に警告マークがあるアイコンがあったらクリックしましょう。
「この接続は安全でありません」と表示されるので右矢印を押して…
[詳細を表示]というボタンを押しましょう。
[ページ情報]が表示されるので[メディア]タブを選択します。
https化を妨げている画像が一覧で表示されるので、その画像をクリックしてみてください。
画像がプレビューされるので、その画像のURLをhttpsに直していきましょう。これを一つひとつやっていきます。
文字情報だけよりは圧倒的に直しやすいかなって感じますね。
手作業はやはり大変なのでWordPressならプラグインを使ってパッと変更しちゃいましょう。
その他のhttpsのチェック
これらのチェックを行ってもうまくhttps化ができていない場合は、これから紹介する内容を一つひとつチェックしていってみてください。
内部証明書のチェック
前提条件となりますが、httpsはサーバー証明書を取得していなければ設定できません。
SSLサーバ証明書とはSSL暗号通信時に利用する証明書です。電子証明書のひとつでサーバに対する印鑑証明書のような役割があります。SSL通信の暗号化に使用する公開鍵（暗号鍵）とコモンネーム（FQDN）やドメインの所有者情報を、認証局が紐づけて証明書を発行します。発行されたSSLサーバ証明書はWebサーバやメールサーバにインストールします。
出典：SSLサーバ証明書とは？
めっちゃ難しく書いてありますが、簡単に言うと「本人だし、安全ですよ」と第三者に認められた状態になると証明書がもらえます。これがなければhttpsにはなれません。
お金を出して証明書を入手する場合もありますし、レンタルサーバーの場合はサービスとしてSSLサーバー証明書を申請できるようになっているところも増えています。
私はエックスサーバーを使っていますが、手順はレンタルサーバーによって変わります。
マニュアルが用意されていることも多いのでチェックしておきましょう。
[box class="yellow_box"]▶独自SSLを設定してhttpからhttpsに変換する手順
⇒SSL設定の手順はこちらにまとめてあります。
ちなみにサーバー証明書には種類がたくさんあり、無料もあれば有料もあります。
有料のほうがセキュリティが高くなるようですが、無料だからといってGoogleの評価に優劣が生まれるかと言えば関係ないようです。
WordPressの設定変更
WordPressをお使いの方はWordPressアドレスとサイトアドレスのURL出力設定をHTTPSアドレスに変えたかチェックしておきましょう。のURL出力の設定をHTTPSのアドレスに変更します。
WordPress以外であっても、CMSであれば同じ用な設定箇所があります。
[box class="yellow_box"]▶httpからhttpsに切り替える手順
⇒WordPress設定、サイトアドレス設定手順もこちらにまとめてあります。
rel=”canonical”の更新
ちなみにrel=”canonical”をHTTPSのURLに向けます。
これがhttpのままだと、httpsに301リダイレクトしてもhttpに正規化されてしまうようです。
[box class="blue_box"]上記のトラブルの例
▶HTTPSへの移行時にはrel=”canonical”が指すURLもHTTPSに必ず更新すること
[/box]
WordPressの設定で行えるWordPressのURL、サイトアドレス設定で同時に置き換わります。
忘れずに設定しておいてくださいね。
内部リンクの修正
httpから移行した方がつまづくのは画像のURLでしょう。
srcの値（画像表示の際には必ず使われています）がhttpのままだとSSL暗号化通信は使えません。
そのため、一つひとつ書き換えていく必要があります。
が、めんどうなので
WordPressであればSearch Regexというプラグインを使うことによって一括置換ができます。
※失敗すると大変なので事前にバックアップを取っておきましょうね。
まずはSearch Regexをインストールし、有効化しておきましょう。
[ダッシュボード] → [ツール] → [Search Regex]を選択します。
Search Regexの設定画面では以下のように設定していきましょう。
- Source：Post content（変更の必要なし）
- Limit to：No limit（変更の必要なし）
- Order By：Ascending（変更の必要なし）
- Search pattern：http://◯◯.com（SSL化する前のあなたのブログのURL）
- Replace pattern：https://◯◯com（SSL化後のあなたのブログのURL）
- Regex：選択不要
上記は必ず自分のブログの設定にしてくださいね。
設定が済んだら、[Replace]ボタンを押してみましょう。
すると、置換するリストが出てきます。
薄緑の欄が置換前のURLで、薄黄色の欄が置換後のURLです。これを一つひとつ確認していきましょう。
[Replace & Save]のボタンを押して変換してしまうと元に戻すことはできません。
挙動がおかしくなってしまうこともあり得るので、置換後のURLは間違っていないか？はしっかりチェックしておきましょう。
一括置換内容に問題がなければ、置換を行いましょう！
[Replace ＆ Save]ボタンをクリックします。
テーマなどの設定を見直す
画像のURLを直しても実は投稿、固定ページなどのURLが置換されただけ。
実はテーマ内の設定ではそのままhttpが指定され続けている可能性があります。
投稿ページはhttpsが有効なのに、トップページはhttpsではないなど、一部のページのみ設定が有効にならない場合は見直してみてください。
カスタマイザーの画像チェック
テーマ内で、画像を設定している箇所は同じ画像をもう一度設定してあげましょう。
同じ画像を指定し直せば良いだけなので、新しくアップロードする必要はありません。
これだけでhttpsに切り替わってくれます。
[box class="green_box"]【一般的に変更が必要になる箇所】
- ロゴ画像
- ヘッダー画像
- ファビコン画像
- アップルタッチアイコン
- 背景画像
など……。
[/box]
ウィジェットエリアのチェック
ウィジェットの中でimg、iframe、form、scriptタグを使っていたら要注意。
ウィジェットでは、Search Regexで置換をしても対象となっていません。そのため、自分自身でhttpが残っていないか確認していきましょう。
もし、httpsにしてもエラーが出続けるなら相対URLにしてhttp、httpsの両方で対処できるようにしておきましょう。
相対とは、今いる場所（階層）を基準にして、目的地（情報）がどこにあるのかを伝えること。
ちょっと難しい話なのでこのように書けばカンタンに実現できます。
「https://salty.style/pasolack/gazou」を「//salty.style/pasolack/gazou」のようにhttp:を省くことによって相対URLになります。
相対URLを詳しく知りたい方はこちらの記事をどうぞ。
アフィリエイトタグのチェック
ASPタグなどアフィリエイトのタグを本文に貼り付けている場合はhttpsに変換する必要があります。
画像はA8.netの画像ですが、すでにhttps化されていますね。
ただ、全てのアフィリエイトサービスが対応しているワケではありませんので注意しましょう。
SSL対応ではないスクリプトの呼び出しを削除
ちょっと難しい話なのですが、SSLに対応していないアクセス解析呼び出しは削除する必要があります。
考えられるのはアクセス解析系…かな？
[box class="pink_box"]【スクリプトがhttps化を妨げていないか確認する方法】
- WordPressをログアウトします。
- GoogleChromeの場合、メニューの[表示] → [開発/管理] → [ソースを表示]を選択します。
- ソースが開くので検索（ Ctrl + F ）から「<script」と検索し、http://のスクリプトが呼び出されていないかチェック。
WordPressをログアウトした状態ソースコードを開いて検索機能（ Ctrl + F ）から「<script」などと検索してみて、http://のスクリプトが呼び出されていないかチェックしてみましょう。
まとめ：一つひとつ丁寧にやればHTTPS化はできます
難しいと感じるかもしれませんが、慣れてしまえば時間がかかっても２時間くらいの作業です。
むしろPHPコードなどゴリゴリのカスタマイズを行っている人でないならば、カンタンにhttpsに移行できるでしょう。
でも、安心してはいけません。
httpsになった後、適切な処置をしなければ勿体ない想いをしてしまうかも…！？
次回はそのまとめを書きます。お楽しみに〜。
