エックスサーバーに無料独自SSLを導入する手順をわかりやすく教えます！

どうも、こんにちは。橋尾渡（@hashio_wataru）です。

2016年6月30日に、エックスサーバーが全サーバープランで独自SSLが無料かつ無制限に利用可能になったようです。

もう、2年ほど経ってしまいましたが、今まで僕のウェブサイト（ブログ）は常時SSL化させていませんでした。

それは何故かと言うと、ウェブサイトを常時SSL化することに対してデメリットを強く感じていたからなんですよね。

以下に貼り付けておいた記事を読んでもらえればわかると思いますが、結構いろいろと面倒なんですよ（笑）

なので、「自分のブログを常時SSL化にするのはまだいいかなぁ～」と、ずっと思っていたんです。（本当はサボっていただけ…）

ですが、2年も時が経っているのでデメリットに対する対策も、充実してきた頃合いです。

Googleの会社も、ウェブサイトにSSLを導入することを推奨していますし、そろそろ自分もSSLを導入してみようかなと思い立ったのです。

上のリンクにはデメリットについて書きましたが、こちらの記事には常時SSL化の必要性とメリットについて詳しく書いておいたので、確認しておいてください。

ウェブサイトを常時SSL化することによって得られるメリットはいくつかありますが、その中でもGoogleは特に、セキュリティ面を強化することに力を注いでいます。

そんな訳で、ウェブサイトを「http」から「https」に変える常時SSL化が必要になってきたんですね。

今回は、その常時SSL化するまでの手順を「エックスサーバー」を介して、ご説明していきたいと思います。

まだ、エックスサーバーを利用されていない方は、上記のリンクへ移動してエックスサーバーの良さについて触れてみてください。

これからブログを始めたい方や、サーバーの移転をご検討されている方などおられましたら、是非エックスサーバーへどうぞ！

それではそろそろ、エックスサーバーで常時SSL化する手順を１から順に説明していきますね。

データベースのバックアップを取っておく

まず、ウェブサイトをSSL化するにあたって色々と問題が起きる可能性があります。

なので事前に、ワードプレスのデータベースをバックアップしておく必要があります。

データベースさえバックアップしておけば、何かしらの手違いがあったとしても復元すれば元の状態に戻せるので、この作業は欠かせません。

ワードプレスのデータベースをバックアップする方法は、以下の記事で事細かく説明しておりますので、必ず読んでおきましょう。

データベースのファイルを普段から定期的に保存しておけば、いざという時に役立ちますので「backwpup」のプラグインをインストールしておく事は必須です！

それでは、次へいってみましょう！

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

さてお次は、エックスサーバーの設定画面に移動して、ウェブサイトをSSL化するまでの手順をご説明していきたいと思います。

まずこちらの、インフォパネルログインフォームを開いてください。

インフォパネルを開いたら、「会員IDまたはメールアドレス」と「インフォパネルパスワード」を入力してログインしましょう。

エックスサーバーのインフォパネルにログインしたら、サーバーの項目までスクロールしてサーバーパネルにログインしてください。

ログインができたらサーバーパネルが開きますので、ドメインの項目にある「SSL設定」をクリックしてください。

「SSL設定」をクリックしますと「ドメイン選択画面」が表示されますので、SSLを導入したいURLを選択しましょう。

SSL化させるドメインを選択しましたら、上に「独自SSL設定の追加」というタブがありますので、クリックしてください。

「独自SSL設定の追加」というタブに移ると、ドロップダウンメニューとチェックボックスがあることがわかりますね。

まず、「設定対象ドメイン」のサイトという項目にあるドロップダウンメニューは、基本的にそのままでも大丈夫です。

その下にある「CSR情報（SSL証明書申請情報）を入力する」というチェックボックスも、チェックを入れずそのままにしておけば大丈夫でしょう。

そして、「独自SSL設定を追加する（確定）」というボタンをクリックすれば、独自SSLの設定処理が始まります。

「独自SSL設定を追加する（確定）」ボタンをクリックすると、「SSL新規取得申請中です。しばらくお待ちください。」というメッセージがでてきます。

この際、処理に数分かかる場合がありますので、少し待っていましょう。

処理が終わると、「「あなたのウェブサイトURL」に独自SSL設定を追加しました。」というメッセージが表示されます。

独自SSL設定が本当に完了したのかを確認するため「SSL設定の一覧」というタブへ戻り、「SSL用アドレス」を見てみましょう。

確認してみたところ、ウェブサイトのURLに「s」の文字が追加されていますね。

そして次に、「SSL用アドレス」の箇所にあるSSL化させたURLをクリックしてみましょう。

URL先を開いてみると、「安全な接続ではありません」という文字がでてきて、ウェブサイトが正常に開きませんね。

驚きましたか？しかし、安心してください。これで大丈夫なんです。

上記でも説明したように、独自SSLの設定がウェブサイトに反映されるまで、最大1時間ほどかかります。

なので心配せず、しばらくの間他のウェブサイトやテレビでも見て暇を潰しておいてください（笑）

おすすめの暇つぶし方法なのですが、ぼく（橋尾渡）のブログ記事を読んでみるのが非常におすすめです。

こちらのサイトマップでは、僕が今まで書いてきた記事を全て確認することができるので、是非、独自SSL設定の待ち時間に読んでみてください。

僕の場合、30分程度で独自SSL設定の反映が終わりました。

この様に独自SSL設定が終わり、SSL化したウェブサイトのページが正常に表示されるようになったら、次の作業へ移りましょう。

ワードプレスの一般設定からURLを変える

独自SSL設定が終わりましたので、次は、ワードプレスの一般設定からURLを変更する作業をしていきましょう。

まず、ワードプレスのダッシュボードを開きます。

ダッシュボードを開いたら、左カラムにある「設定」にマウスオーバーして、「一般」を選択してください。

一般設定のページを開くと、「WordPress アドレス（URL）」と「サイトアドレス（URL）」という項目がありますね。

各項目の右側にある入力欄に、あなたのウェブサイトURLが入力されていると思われますので、「http」という箇所にSの文字を追加して、「https」に変えてあげましょう。

Sの文字を追加して「https」になったURLが、こちらになります。

そして、打ち間違いが無いよう再確認したあと、ページを一番下までスクロールして「変更を保存」というボタンを押せば作業完了です。

Search Regexで内部リンクの置き換えをする

ワードプレスの一般設定からウェブサイトのURLを変更することができましたら、次は「Search Regex」というプラグインを使って、内部リンクのURLを全て「https」に置き換えてあげましょう。

この「Search Regex」というプラグインを使う事によって、内部リンクはもちろんのことimgの内部リンク画像も全て一括の作業で「http」を「https」に置き換えることが可能です。

Search Regexの詳しい使い方を記事にしましたので、こちらの下記リンクから飛んでください。

一つ一つの記事を手作業で変えていくのはとても面倒な作業になるので、ワードプレスを利用しているユーザーは必ず「Search Regex」を使って、URLを変更しましょう。

まずワードプレスを開いたら、左カラムにある「ツール」にマウスオーバーして、「Search Regex」を選択してください。

「Search Regex」の設定ページを開きましたら、上図のように設定してください。

• Source：Post content（そのまま）
• Limit to：No limit（そのまま）
• Order By：Ascending（そのまま）
• Search pattern：SSL化する前のURLを入力
• Replace pattern：SSL化した後のURLを入力
• Regex：チェック不要

「Search pattern」には、SSL化する前の「http」というあなたのウェブサイトURLを記入して、「Replace pattern」には、SSL化した後の「https」になったあなたのウェブサイトURLを記入しましょう。

その他の設定はデフォルトのままで大丈夫です。

SSL化の変更前と変更後のURLを記入できたら、下にある「Replace ≫」というボタンをクリックしてみてください。

Replaceボタンをクリックすると、実際にURLが置き換わった時のプレビューを確認することができます。

赤色のマーカーになっている箇所が、変更前のURLと変更後のURLになります。

そして確認が終わったら、最後に「Replace & Save ≫」というボタンを押してください。

「Replace & Save ≫」を押したら、Search Regexの設定ページが更新され、「**** occurrences replaced」というメッセージが表示されます。

ちなみに、このURLの置き換え作業は一瞬で終わりました。

これで、「Search Regex」を使った、URL一括置き換え作業は完了です！

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

次は、「.htaccess」というテキストファイルに、リダイレクト用のコードを追記する作業を行います。

リダイレクトとは？

ウェブサイトにおけるリダイレクト（英:redirect）とは、ウェブサイトの閲覧において、指定したウェブページから自動的に他のウェブページに転送されること。URLリダイレクト（URL redirection）とも言われる。

通常はウェブページのURLが変わったときに、元のURLから新しいURLへ誘導するときに用いられる。フィッシング詐欺サイトへの誘導などで用いられている場合もある。

リダイレクト (HTTP)

「.htaccess」にリダイレクト用コードを追記するためには、FTPサーバーにアクセスする必要があり、今回は「FFFTP」というフリーソフトを利用してアクセスしてみようと思います。

こちらに、FFFTPの基本的な使い方などについて、書き記した記事がありますので確認しておきましょう。

まず「FFFTP」を起動したら、設定したホストに接続してください。

FTPサーバーにアクセスができたら、「.htaccess」というファイルがありますので、ダウンロードしてください。

そして、先程ダウンロードした「.htaccess」のテキストファイルを、サクラエディタなどのテキストエディタツールで開き、先頭部分に以下のコードを貼り付けてください。

上記のコードを「.htaccess」の先頭部分に貼り付けたら、上書き保存をしましょう。

上書き保存した「.htaccess」のテキストファイルを、FFFTPで再度アップロードすれば、リダイレクト作業は完了です。

本当にリダイレクト用のコードが機能しているかを確認するため、試しに僕のブログURLから「s」の文字を抜いて、再度アクセスしてみてください。

すると、「http」でアクセスしたと思われますが、不思議なことに「https」のURLになった僕のブログにアクセスしていることがわかります。

これで、「.htaccess」のテキストファイルに追記したリダイレクト用のコードが、しっかりと働いてくれていることが確認できましたね。

そして、この様に「http」から「https」にリダイレクトさせておくことによって、今まで得てきたGoogleの評価を引き継ぐことができます。

Googleの評価を引き継ぐことができるということは、検索順位（SEO）などにも大きく影響していきます。

なので、面倒な作業であっても必ずこのリダイレクト用のコードは追記しておく必要があるんですね。

それでは次に、諸々の確認作業へ移っていきたいと思います。

混在コンテンツの確認作業

恐らく、ほとんどのウェブサイトはアドレスバーの左にある鍵マークが、安全ではない表示になっていると思われます。

これは、完全にウェブサイトをSSL化できていない証拠で、サイト内の一部（画像など）が安全に呼び出されていない状態になっているからです。

この状態では、せっかく常時SSL化設定を施したのに、意味がなくなってしまいます。

なのでこれから、鍵マークが安全な状態になるよう、サイト内のSSLエラーがどこから呼び出されているのかを確認していく作業を行います。

開発者ツールを使ってエラーを探す

まず、サイト内のSSLエラーを探すため、あなたのウェブサイトを開いてください。

ウェブサイトを開きましたら、「F12」キーを押して「開発者ツール」を起動しましょう。

そして、コンソールタブをクリックします。

なにやら色々と、赤い文字や黄色い文字のメッセージがでてきましたね。

エラーを吐き出している文章を引用してみましょう。

混在アクティブコンテンツ “http://www.google.co.jp/coop/cse/brand?form=cse-search-box&lang=ja” の読み込みをブロックしました

安全なページ上で (安全でない) 混在表示コンテンツ “https://hashio-wataru.com/wp-content/uploads/2017/07/koara.png” を読み込んでいます

安全なページ上で (安全でない) 混在表示コンテンツ “https://hashio-wataru.com/wp-content/uploads/2017/07/koara.png” を読み込んでいます

引用した文章をよく見てみると、「search-box」や「koara.png」といったURLが含まれていることがわかります。

恐らく「search-box」は、ブログ内右カラムにあるGoogleAdsenseのサイト内検索ウィジェットでしょう。

そして「koara.png」は、HTMLのsrc属性で呼び出しているプロフィール画像のコアラだと思われます。

ここらへんの画像になると「Search Regex」で置き換えができませんので、手動でURLを変えていく必要があるんですね。

詳細表示のメディアタブからエラーを探す

もう一つ、ウェブサイト内のSSLエラーを探す方法があります。

それは、アドレスバーの鍵マークにある「詳細表示」から「メディア」を確認する方法です。

このメディアから確認する方法を使えば、ウェブサイト内にあるどの画像からSSLエラーを吐き出しているのかをすぐに理解することができます。

まず、あなたのウェブサイトにある鍵マークをクリックしてください。

そして「>」マークを押したら、次の表示画面へ移ります。

「>」マークをクリックしたら「サイトのセキュリティ」画面が開きますので、下にある「詳細を表示」という部分をクリックしてください。

「詳細を表示」をクリックすると、「ページ情報」のウィンドウが開きます。

最初は「セキュリティ」のタブが開いているので、「メディア」のタブへ移動してください。

メディアタブに移動したら、URLが「http」から始まるものを探し出してください。

「http」のURLを選択すると、下に「メディアプレビュー」がでてきて画像が表示されます。

この画像は、僕がウェブサイト（ブログ）のファビコンに設定しているアイコン画像ですね。

メディアプレビュー機能を使うことによって、SSLエラーの原因を特定しやすくなるので非常におすすめです。

是非、活用していきましょう。

ワードプレスの外観を確認する

ウェブブラウザの「開発者ツール」や「メディアの情報」を確認できたところで、次は、ワードプレスに戻って「外観」のメニューから色々と調べてみましょう。

テーマ内の設定で、HTMLから呼び出されている「img」「script」「iframe」「form」属性のタグから、「http」が混ざっていないかを確認してください。

ウィジェットエリアの確認

ワードプレスのウィジェットエリアで使っているウィジェットの中にテキストウィジェットなどがありますが、上記であげた内容の属性タグがウィジェットの内部に記入されていないかを探していきましょう。

面倒なことにSearch Regexでは、ウィジェット内部のコードまでは置き換えができないので、全て自力で変えていく必要があります。

SSLエラーの探し方で説明したように、僕のウェブサイトでは「プロフィール画像」と「Googleサイト内検索」がエラーを吐き出していたので、それを修正していく必要があるんですね。

まず、ワードプレスの「外観」から「ウィジェット」を選択します。

ウィジェットのページへ移動したら、HTMLで設定してあるテキストウィジェットを一つ一つ確認していきましょう。

僕の場合、プロフィール画像に設定している「コアラの画像」が「http」で呼び出されているままなので、ここに「s」の文字を追加してSSL化していきたいと思います。

ちなみに、「Search Regex」を使った場合、元画像の「https」バージョンは既に出来上がっているので、「s」の文字を追加して保存してやればいいだけなんですね。

上図のようにURLを「https」に書き換えることができたら、下にある「保存」ボタンを押して更新してあげましょう。

そして次に、問題となっていた「Googleのサイト内検索」ウィジェットですね。

こちらも上記と同様に、「http」となっている部分に「s」の文字を追記して保存すれば、SSLのエラーがでなくなりました。

カスタマイズエリアの確認

ウィジェットエリアの修正作業が終わりましたら、次は、カスタマイズエリアの確認作業をしていきましょう。

ウェブサイトのSSLエラーをメディア情報で探した時に、ファビコンがSSL化されていませんでしたよね？

カスタマイズエリアもウィジェットエリアと同様にSearch Regexでは置き換えることができないので、自分で変える必要があるんですね。

ワードプレスで使っているテーマによって設定方法は異なりますが、「Simplicity」を使っている場合、「その他」からファビコンとアップルタッチアイコンを変更することができます。

他にも、ヘッダー画像やロゴ画像、背景画像などがありますので、画像の設定されている方は「画像の変更」をしておきましょう。

アフィリエイト等のコードを確認

今まで作った記事に、ASP（A8.netなど）のアフィリエイトコードを記事内に埋め込んだページってありますよね？

古いアフィリエイトコードになるとSSLに対応しておらず、画像が正常に表示されないバグが生じることがあります。

なので、今までに作った記事の中にSSLに対応していない古いアフィリエイトコードがあるならば、全て貼りかえる必要があるんですね。

カエレバを使っている場合

僕はよく記事にAmazonのアフィリエイトリンクを貼るのですが、その時に「かん吉」さんというプロブロガーの方が作った、「カエレバ」というツールを使っています。

このツールを使う事によって、Amazonや楽天などのアフィリエイトリンクを同時に表示させることが可能なんです。

ですが上記でも言ったように、カエレバでも古いアフィリエイトコードを使っている場合、こちらも画像がうまく表示されず、セキュリティ状態も安全な状態に保てません。

なので、カエレバで使われている古いアフィリエイトコードを「Search Regex」で新しいアフィリエイトコードに置き換える作業が必要になってきます。

• Search pattern：h ttp://ecx.images-amazon.com
• Replace pattern：https://images-fe.ssl-images-amazon.com

「Search Regex」のページへ移動して、「Search pattern」と「Replace pattern」に上記のアドレスを入力して、「Replace & Save」ボタンをクリックしましょう。

そしてカエレバをご利用の際、デザインを使用されている方は、下記のURLを置き換えておきましょう。

• Search pattern：h ttp://img.yomereba.com/
• Replace pattern：https://img.yomereba.com/

Googleのサービスに再登録する

ここまでの面倒な作業を終えたら、最後にGoogleの各サービスに再登録していく作業に取り掛かります。

常時SSL化した時のデメリットという記事にも書きましたが、ウェブサイトをSSL化すると今までの「http」と「https」では、別のウェブサイトとして認識されてしまいます。

なので、Googleアナリティクスと、Googleサーチコンソールに再登録する必要があるんですね。

Googleサービスの詳しい登録方法については割愛させていただきますが、再登録するのはとても簡単なのでそこまで苦労しないと思います。

他にも、各ソーシャルメディアや、色々なウェブサービスに登録されている方は、再設定しておくことをおすすめします。

まぁ、リダイレクト用のコードを「.htaccess」のテキストファイルに記入されていると思われますので、よっぽどのことが無い限り大丈夫でしょう（笑）

終わりに

以上で、ウェブサイトを常時SSL化するまでの基本的な流れを説明した記事は終わりです。

これからのインターネットは常に安全性を求められ、どこのウェブサイトも常時SSL化していくことだと思われます。

特にGoogleはセキュリティ面を重視していますので、まだウェブサイトにSSLを導入されていない方はこの記事をよく読み、ウェブサイトを暗号化させておきましょう！

それではそろそろ、エックスサーバーに無料独自SSLを導入する手順をわかりやすく教えます！についての記事を終わりたいと思います。ありがとうございました！