こんにちはTac^^です。
エックスサーバーが独自SSLを無料かつ無制限で利用できるようになりました。
この、エックスサーバーの「ユーザーにどんどん利便性を提供していく姿勢」には相変わらず頭が下がります。
ブログをSSL化した方法が面倒
そのSSLなんですが、何年か前なら結構なお金のかかっていたものが無制限で無料になったわけです。ここまでお膳立てされたのなら、さすがに使用してみたくなるじゃないですか。
今回は、その時行った手順をできる限りメモしておいたので、それについてまとめたいと思います。
SSL化（http→https）の主な手順
今回僕が試した限りでは、SSL化するのに以下の手順を行いました。
- エックスサーバーでSSL設定を行う
- WordPressの設定からURLを変更する
- 内部リンクをSearch Regexで全て置換する
- .htaccessにリダイレクト用のコードを追記する
- テーマなどの設定を見直す
- その他サービス・ツールの設定の変更など
- SNSのシェアカウントを引き継ぐ
なお、今回SSL化で利用するサービスは、エックスサーバーを使用したものになります。
その他のサーバーで変更する場合は、「サーバー名 SSL化」などで検索してください。
エックスサーバーでSSL設定を行う
次に、エックスサーバーのサーバーパネルにログインします。
ログインを終えたら、サーバーパネルから「SSL設定」をクリックします。
すると、「ドメイン選択」画面が表示されるので、SSL化するドメイン列の「選択する」リンクをクリックしてください。
すると「SSL設定」画面が表示されるので「独自SSL設定の追加」タブを選択してください。
「独自SSL設定の追加」タブでは、「サイト」を確認後、「独自SSL設定を追加する（確定）」をクリックしてください。
独自SSL設定を追加すると、「SSL新規取得申請中です。しばらくお待ちください。」と出るのでしばらく待ちます。
申請が完了すると、以下のような完了メッセージが表示されます。
「ドメイン名」に独自SSL設定を追加しました。
なお、SSL設定が反映するまで、最大1時間程度かかります。今しばらくお待ちください。
「SSL設定の一覧」タブを開くと以下のように「SSL用アドレス」が表示されているのが見て取れます。
「SSL用アドレス」をクリックすることで、サイトを開くことができます。
ただし、先程のメッセージでも出ていたように独自SSL設定を追加した後、だいたい数十分から最大1時間程度時間がかかります。
ですので、1時間ぐらい待たないと、Chromeの場合は以下のようなエラー画面が表示されます。
ちなみに、Firefoxだと以下のように表示されます。
マイクロソフトのEdgeだと以下のエラーメッセージが表示されます。
このようなエラーが出た場合は、もうしばらく待って「SSLアドレス」を開いてください。
数十分後「SSLアドレス」をクリックしたら、表示されました。
このように「SSLアドレス」からサイトが開けるようになってから次の設定を行います。
WordPressの設定からURLを変更する
次に、Wordpress管理画面から「設定 → 一般」設定を開きます。
「一般設定」にある以下の項目を変更します。
- WordPressアドレス（URL）
- サイトアドレス（URL）
それぞれのURLの「http」部分を「https」に変更します。
変更後はこんな感じ。
設定を変更し終わったら「変更を保存」ボタンを押して変更内容を適用してください。
内部リンクをSearch Regexで全て置換する
次に、Wordpress本文内の内部リンクや、imgの内部画像リンクを全てhttpsに変更します。
これは、投稿や固定ページを1つ1つ開いて手作業で編集を行っても良いです。ただ、それだと余りにも時間がかかってしまうため、今回はSearch RegexというWordpressプラグインで一括変換する方法を紹介します。
Search Regexのインストール
とりあえず、Search Regexがインストールされていない場合は、プラグインをインストール画面からインストールして有効化してください。
一括置換内容の設定
本文を一括置換するには、Wordpress管理画面の「ツール → Search Regex」を選択します。
「Search Regex」画面で以下のように設定します。
- Source：Post content（デフォルト）
- Limit to：No limit（デフォルト）
- Order By：Ascending（デフォルト）
- Search pattern：http://wp-simplicity.com（SSL化する前のあなたのURL）
- Replace pattern：https://wp-simplicity.com（SSL化後のあなたのURL）
- Regex：選択不要
置換リスト一覧を確認
とりあえず設定が済んだら、一旦「Replace」ボタンを押してみてください。
この時点で、まだデータベースの内容は書き変わらないのでご安心を。
「Replace」ボタンを押すと、「こんな感じで置換を行うよ」という一覧がズラズラと表示されます。
Search Regexが置換する部分は、以下のように赤色で表示されます。
薄緑色の上が置換前の状態で、薄黄色の下が置換後のソースコードになります。
Search Regexで変換後保存を行ってしまうと、基本的に元に戻すことはできないので、こういった部分は、丹念に丹念にチェックをしておくことをお勧めします。
ちなみに、チェック項目を挙げると以下のようなものがあります。
- 置換するURLは間違っていないか？
- 置換後のURLは間違っていないか？
- 置換後のURLはアドレスとしての体（てい）をなしているか？
- 多くの結果リストをなるべくチェックしておかしな部分はないか？
ここは非常に大事な部分なので、これくらいは丹念にチェックしておいても損はないと思います。
URLを一括置換後保存する
一括置換内容に問題がないようであれば、一括置換してデータベースに保存します。
置換した結果を、データベースに保存するには、「Replace ＆ Save」ボタンをクリックしてください。
大事なことなので、何度も言いますが、このボタンを押す前に置換設定に問題がないか何度も確認してください。
全ての置換が終了したら、以下のように置換完了メッセージが表示されます。
この作業乗り切ってしまえば、あとはそれほど難しくはありません。（以降は、失敗したとしても比較的手軽に元に戻せる変更です）
.htaccessにリダイレクト用のコードを追記する
次に、FTPでサーバーにログインして.htaccessファイルを編集します。
僕の利用しているサーバーは、エックスサーバーなので、以下ではエックスサーバーを例にして紹介したいと思います。
FTPでサーバーにログインして「public_html」ディレクトリを開いてください。
「public_html」ディレクトリの位置は以下です。
/home/サーバID/ドメイン/public_html
「public_html」ディレクトリにある.htaccessファイルをダウンロードします。
ダウンロードした.htaccessファイルをコピーして複製しておきます。
あとは、先程ダウンロードした.htaccessファイルをエディターで開きます。
あとは、エディターの先頭部分に以下のコードをコピペします。
|
1
2
3
4
5
|
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{HTTPS} !=on [NC]
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>
|
あとは、編集した.htaccessファイルを保存して、サーバー上の「public_html」ディレクトリ上書きにアップロードします。
これを行うことで、これまで「http://wp-simplicity.com/」に来ていたアクセスを「https://wp-simplicity.com/」にリダイレクト（転送）してくれます。
例えば、試しに「http://wp-simplicity.com/」のリンクからサイトへ飛んでも、「https://wp-simplicity.com/」になっていることがわかると思います。
上記のコードを.htaccessに書くことで、全てのページにおいてこの転送作業を行ってくれます。
また、こうやってリダイレクトさせておくことによって、httpで得た検索エンジンの評価も、httpsアドレスに引き継がせることもできます。
テーマなどの設定を見直す
ブラウザのチェックツールなどの利用に慣れていない方のために、SSLエラーのでそうな場所をいくつか紹介したいと思います。
テーマのテンプレートや、設定などで、img、iframe、form、scriptからhttp://～が呼び出されていないかをチェックすることをおすすめします。
テーマ自体のチェック
あとは、テーマ内などでimgのsrc属性をhttpで呼び出していないかチェックします。
エディターのgrep検索機能などで「http://」と原因部分を特定しやすいかと思います。
ちなみに、僕が試した限りでは、現在使用しているSimplicityのテンプレートファイル自体には問題はありませんでした。
ウィジェットエリアのチェック
「外観 → ウィジェット」のウィジェットエリア内にあるテキストウィジェットなどでimgタグやiframeタグ、formタグ、scriptタグからhttpを呼び出していないかチェックします。
テキストウィジェットなどでは、Search Regexで置換が行えないため目視でチェックを行う必要があります。
アフィリエイトバナーのIMGや、Googleのサイト内検索用のタグがウィジェットなどに貼り付けてある場合は、チェックが必要です。
テーマカスタマイザーのチェック
テーマカスタマイザーで以下のような設定で画像を設定している項目がある場合は画像を再設定する必要があります。
例えば、ヘッダー画像とか、ロゴ画像とか、ファビコンとか、アップルタッチアイコンとか、をテーマカスタマイザーで設定している場合は、画像の再設定をしておくことをお勧めします。
アフィリエイトタグ
SSLに対応していないASPのタグを本文中などに貼り付けている場合は、対応する必要があります。
その他サービス・ツールの設定の変更など
ここまでのサイトに関する設定で「設定は終わった」と安心してはいけません。
その他で利用しているサービス・ツールなどの設定を変更する必要もあります。
以下では、僕が設定を変更したサービス・ツールをいくつか紹介します。
Google Analytics
Google Analyticsでは、「デフォルトのURL」を変更する必要があります。
「デフォルトのURL」を変更するには、「アナリティクス設定」から「プロパティ設定」を選択して、「デフォルトのURL」の「http://」部分のドロップダウン後クリックして、「https://」をクリックしてください。
「https://」を選択したら、「保存」ボタンを押して設定を保存してください。
Google Search Console
Google Search Consoleは、これまでhttpで登録してあると、https化すると以下のように未確認サイトになってしまいます。
Google Search Consoleの再設定方法は、以下を参照してください。
SimplicityでGoogle Search ConsoleのIDを登録する
Google Search Consoleでの作業
Googleのアカウントが必要になりますので、もしまだ作成されていない方は作成してから始めましょう！
既にアカウントを持っている方は、ここからスタートです。
まずは、こちらからログインしましょう。
- ログインすると、ご自分のサイトを登録する画面になるので、URLを登録します。
- 次に、サイトの所有権を確認する作業に移ります。
ここでわたしは、「おすすめの方法」を選択しましたが、Simplicityを使用している場合は「別の方法」を選択し、「HTMLタグ」をクリックします。
- 「例を表示」をクリックすると、このようにIDが表示されるので、コピーします。
＜注意＞
このとき、まだ「確認」はクリックせず、そのまま開いた状態で別ウインドウで自分のサイトの管理メニューを開いてください。
Simplicityでの作業
続いて、Simplicityでの作業に移ります。
（簡単です！）
「管理メニュー」→「カスタマイズ」→「アクセス解析」をクリックします。
「Google Search ConsoleのID」に先ほどコピーしたIDを貼り付けましょう。
「保存して公開」をクリックしたあとに、Google Search Consoleのサイトに戻り、「確認」をクリックします。
これで、認証されれば完了です！
あっという間ですよね(*^o^*)
<注意>
認証後も、IDはそのままにしておく必要があります。
なので、削除したりせず、いじらないでおきましょう。
コメント