ブログをSSL化した方法が面倒

スタディ

こんにちはTac^^です。

エックスサーバーが独自SSLを無料かつ無制限で利用できるようになりました。

この、エックスサーバーの「ユーザーにどんどん利便性を提供していく姿勢」には相変わらず頭が下がります。


スポンサーリンク

ブログをSSL化した方法が面倒

そのSSLなんですが、何年か前なら結構なお金のかかっていたものが無制限で無料になったわけです。ここまでお膳立てされたのなら、さすがに使用してみたくなるじゃないですか。

今回は、その時行った手順をできる限りメモしておいたので、それについてまとめたいと思います。

SSL化(http→https)の主な手順


今回僕が試した限りでは、SSL化するのに以下の手順を行いました。
  1. エックスサーバーでSSL設定を行う
  2. WordPressの設定からURLを変更する
  3. 内部リンクをSearch Regexで全て置換する
  4. .htaccessにリダイレクト用のコードを追記する
  5. テーマなどの設定を見直す
  6. その他サービス・ツールの設定の変更など
  7. SNSのシェアカウントを引き継ぐ
なお、今回SSL化で利用するサービスは、エックスサーバーを使用したものになります。

その他のサーバーで変更する場合は、「サーバー名 SSL化」などで検索してください。

エックスサーバーでSSL設定を行う

次に、エックスサーバーのサーバーパネルにログインします。

エックスサーバーのサーバーパネルにログイン

ログインを終えたら、サーバーパネルから「SSL設定」をクリックします。

エックスサーバーのサーバーパネルからSSL設定

すると、「ドメイン選択」画面が表示されるので、SSL化するドメイン列の「選択する」リンクをクリックしてください。

エックスサーバーのドメイン選択画面

すると「SSL設定」画面が表示されるので「独自SSL設定の追加」タブを選択してください。

SSL設定のSSL設定の一覧タブ

「独自SSL設定の追加」タブでは、「サイト」を確認後、「独自SSL設定を追加する(確定)」をクリックしてください。

独自SSL設定を追加する
サイトのドロップダウンリストにあるドメイン名は、wwwがついたものもありますが、そのままでOKです。
あと、「CSR情報(SSL証明書申請情報)」を入力する」というチェック項目がありますが、これは通常は無効のままでOKかと思います。
独自SSL設定を追加すると、「SSL新規取得申請中です。しばらくお待ちください。」と出るのでしばらく待ちます。

SSL新規取得申請中です。しばらくお待ちください。

申請が完了すると、以下のような完了メッセージが表示されます。

独自SSL設定を追加しました

「ドメイン名」に独自SSL設定を追加しました。

なお、SSL設定が反映するまで、最大1時間程度かかります。今しばらくお待ちください。

「SSL設定の一覧」タブを開くと以下のように「SSL用アドレス」が表示されているのが見て取れます。

SSL用のアドレスが表示されている

「SSL用アドレス」をクリックすることで、サイトを開くことができます。

ただし、先程のメッセージでも出ていたように独自SSL設定を追加した後、だいたい数十分から最大1時間程度時間がかかります。

ですので、1時間ぐらい待たないと、Chromeの場合は以下のようなエラー画面が表示されます。

Google ChromeのSSLエラー画面

ちなみに、Firefoxだと以下のように表示されます。

FirefoxのSSLエラー画面

マイクロソフトのEdgeだと以下のエラーメッセージが表示されます。

Microsoft EdgeのSSLエラー画面

このようなエラーが出た場合は、もうしばらく待って「SSLアドレス」を開いてください。

数十分後「SSLアドレス」をクリックしたら、表示されました。

このように「SSLアドレス」からサイトが開けるようになってから次の設定を行います。

WordPressの設定からURLを変更する

次に、Wordpress管理画面から「設定 → 一般」設定を開きます。

Wordpress管理画面から設定→一般
「一般設定」にある以下の項目を変更します。
  1. WordPressアドレス(URL)
  2. サイトアドレス(URL)
それぞれのURLの「http」部分を「https」に変更します。

Wordpressアドレスとサイトアドレス変更前

変更後はこんな感じ。

2016-07-05_14h54_17

設定を変更し終わったら「変更を保存」ボタンを押して変更内容を適用してください。

内部リンクをSearch Regexで全て置換する


次に、Wordpress本文内の内部リンクや、imgの内部画像リンクを全てhttpsに変更します。

これは、投稿や固定ページを1つ1つ開いて手作業で編集を行っても良いです。ただ、それだと余りにも時間がかかってしまうため、今回はSearch RegexというWordpressプラグインで一括変換する方法を紹介します。

Search Regexのインストール

とりあえず、Search Regexがインストールされていない場合は、プラグインをインストール画面からインストールして有効化してください。

Search Regexプラグインのインストール

一括置換内容の設定

本文を一括置換するには、Wordpress管理画面の「ツール → Search Regex」を選択します。

Wordpress管理画面からツール→Search Regexの選択
「Search Regex」画面で以下のように設定します。

Search RegexのSSL化一括置換例
  • 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:選択不要
上記の「Search pattern」と「Replace pattern」は一括置換例として僕のサイトのURLをサンプルとしています。このURLは、必ず自前の環境に合わせてURLを設定してください。

置換リスト一覧を確認

とりあえず設定が済んだら、一旦「Replace」ボタンを押してみてください。

とりあえずリプレースボタンを押す
この時点で、まだデータベースの内容は書き変わらないのでご安心を。

「Replace」ボタンを押すと、「こんな感じで置換を行うよ」という一覧がズラズラと表示されます。

一括置換リスト一覧

Search Regexが置換する部分は、以下のように赤色で表示されます。

置換リストの置換部分

薄緑色の上が置換前の状態で、薄黄色の下が置換後のソースコードになります。

Search Regexで変換後保存を行ってしまうと、基本的に元に戻すことはできないので、こういった部分は、丹念に丹念にチェックをしておくことをお勧めします。

ちなみに、チェック項目を挙げると以下のようなものがあります。
  • 置換するURLは間違っていないか?
  • 置換後のURLは間違っていないか?
  • 置換後のURLはアドレスとしての体(てい)をなしているか?
  • 多くの結果リストをなるべくチェックしておかしな部分はないか?
ここは非常に大事な部分なので、これくらいは丹念にチェックしておいても損はないと思います。

URLを一括置換後保存する

一括置換内容に問題がないようであれば、一括置換してデータベースに保存します。

置換した結果を、データベースに保存するには、「Replace & Save」ボタンをクリックしてください。

一括地下に間違いがないかチェックした後置換して保存
大事なことなので、何度も言いますが、このボタンを押す前に置換設定に問題がないか何度も確認してください。

全ての置換が終了したら、以下のように置換完了メッセージが表示されます。

Search Regexで置換作業の完了
この作業乗り切ってしまえば、あとはそれほど難しくはありません。(以降は、失敗したとしても比較的手軽に元に戻せる変更です)
カスタムフィールドを置換する場合は、Search Regex →「Source」項目 →「Post meta value」を選択から行うことができます。

.htaccessにリダイレクト用のコードを追記する

次に、FTPでサーバーにログインして.htaccessファイルを編集します。

僕の利用しているサーバーは、エックスサーバーなので、以下ではエックスサーバーを例にして紹介したいと思います。

FTPでサーバーにログインして「public_html」ディレクトリを開いてください。

「public_html」ディレクトリの位置は以下です。

「public_html」ディレクトリの位置

/home/サーバID/ドメイン/public_html

「public_html」ディレクトリにある.htaccessファイルをダウンロードします。

.htaccessファイルをダウンロード
ダウンロードした.htaccessファイルをコピーして複製しておきます。

ダウンロードし終わった.htaccessファイルをコピーして複製

.htaccessファイルは非常に重要なファイルなので、編集に失敗して元に戻せなくなっては困ります。なので、編集前にこのようにしてバックアップを取っておくことをおすすめします。
あとは、先程ダウンロードした.htaccessファイルをエディターで開きます。

.htaccessファイルをエディターで開く
あとは、エディターの先頭部分に以下のコードをコピペします。
あとは、編集した.htaccessファイルを保存して、サーバー上の「public_html」ディレクトリ上書きにアップロードします。

.htaccessファイルを上書きアップロード
もしサーバーエラーが出るようなら、先程複製したバックアップから復元してください。
これを行うことで、これまで「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://」をクリックしてください。

Google AnalyticsのURLの変更

「https://」を選択したら、「保存」ボタンを押して設定を保存してください。

Analyticsプロパティー設定の保存

Google Search Console

Google Search Consoleは、これまでhttpで登録してあると、https化すると以下のように未確認サイトになってしまいます。

Google Search ConsoleでHTTPサイトが未確認状態になる

Google Search Consoleの再設定方法は、以下を参照してください。

https://nelog.jp/reentry-google-search-console

SimplicityでGoogle Search ConsoleのIDを登録する

Google Search Consoleでの作業

 

Googleのアカウントが必要になりますので、もしまだ作成されていない方は作成してから始めましょう!

 

既にアカウントを持っている方は、ここからスタートです。

 

まずは、こちらからログインしましょう。

Google Search Console 公式ページ

 
  • ログインすると、ご自分のサイトを登録する画面になるので、URLを登録します。
 
  • 次に、サイトの所有権を確認する作業に移ります。
 

ここでわたしは、「おすすめの方法」を選択しましたが、Simplicityを使用している場合は「別の方法」を選択し、「HTMLタグ」をクリックします。

 
  • 「例を表示」をクリックすると、このようにIDが表示されるので、コピーします。
 

<注意>

 

このとき、まだ「確認」はクリックせず、そのまま開いた状態で別ウインドウで自分のサイトの管理メニューを開いてください。スクリーンショット_2016-03-16_21_47_01
 

Simplicityでの作業

 

続いて、Simplicityでの作業に移ります。

(簡単です!)

 

「管理メニュー」→「カスタマイズ」→「アクセス解析」をクリックします。

スクリーンショット 2016-03-15 20.02.30
 

「Google Search ConsoleのID」に先ほどコピーしたIDを貼り付けましょう。

スクリーンショット_2016-03-16_22_04_04
 

「保存して公開」をクリックしたあとに、Google Search Consoleのサイトに戻り、「確認」をクリックします。

 

これで、認証されれば完了です!

 

あっという間ですよね(*^o^*)

 

<注意>

 

認証後も、IDはそのままにしておく必要があります。

 

なので、削除したりせず、いじらないでおきましょう。

 
追記:
ヘッダーの画像が原因で完全にSSL化できていませんでした。
削除して再アップロードで治りました。

コメント