エラーを回避!エックスサーバーでサイトをSSL(HTTPS)化するまでの全手順

どうも、SSL化大好き人間のアオ(@sh0g0_a0ki)です!

 

HTTPSのサイトはどんどん増加してきています。

この流れに乗り遅れないように、今のうちにSSL化を済ませておきましょう。

合わせて読みたい!

 

SSL化することによって、様々なエラーが発生する可能性がぐんと上がります。

SSL化する前に、まずはBackWupやUpdraftPlusなどのプラグインを活用して必ずバックアップを取っておきましょう。

 

では、SSL化の手順について解説していきます。

 

Sponsored Link

エックスサーバーでSSL設定を追加する

まずはエックスサーバーのサーバーパネルにログインしましょう。

 

サーバーパネルにログインできたら、「ドメイン」欄にある「SSL設定」をクリックしましょう。

 

自分がエックスサーバーに追加しているドメイン一覧が出てきますので、こちらからSSL化したいドメイン名を選択します。

 

次の画面で「独自SSL設定を追加する(確定)」をクリックすることで設定が完了します。

確認画面などは出ませんので、注意してください。

しつこいようですが、バックアップはしっかり取っておいてくださいね。

このワンクリックでSSL追加設定は完了です。

 

とっても簡単ですよね。

この後、1時間程度反映に時間が掛かりますので、気長に待ちましょう。

 

リダイレクトループエラーが表示された場合

SSL設定を行ってからしばらく経って、「リダイレクトが繰り返し行われました。」のようなエラーが表示され、WordPressにログインできなくなる場合があります。

僕が実際にこの状態に陥りました。

 

まずはこのリダイレクトループを突破しなければいけません。

これは.htaccessの編集によって対応可能です。

 

まずは、エックスサーバーのサーバーパネルにアクセスして、「ホームページ」欄にある、「.htaccess編集」をクリックします。

 

登録しているドメイン一覧が表示されますので、.htaccessを編集するドメインを選択してください。

 

ここで注意書きが出てきますが気にせず、.htaccessを編集タブを選択します。

 

.htaccessの「# BEGIN WordPress」に以下のコードを追記しましょう。

 

参考サイト:AWS常時SSL リダイレクトループしない.htaccessの書き方
      エックスサーバーでWordpressをSSL化(https)する時に無限ループでハマった

 

「.htaccessを編集する(確認)」ボタンをクリックすると、少し分かりづらいですが、確認画面が表示されます。

ここで「.htaccessを編集する(確定)」をクリックして編集完了です。

 

これでリダイレクトループは解消されたはずですので、一度自分のサイトを再読込みしてみましょう。

 

アクセス権限エラーが表示された場合

リダイレクトループを突破して、いよいよログインできるようになったかと思いきや、次は「このページにアクセスする権限がありません。」と表示される場合があります。

ちなみにまたまた僕が実際にこの状態に陥りました。

 

 

「次から次へと……ムキー!!」となる気持ちを抑えて、もうひと頑張りしましょう。

アクセス権限エラーはpublic_html>wp-config.phpを編集することで突破できます。

「wp-config.php」の編集はFileZillaなどのFTPソフトを使用して行います。

 

 

「wp-config.php」の最下部を以下のように編集します。

「shogo-aoki.com(ここには自分のサイトのドメイン名を入力してください)」と記載した場所を自分のサイトのドメイン名に変更することに注意してください。

参考サイト:WordPress + HTTPS + リバースプロキシ = このページにアクセスする権限がありません。

 

これで、アクセスできるようになるはずです。

 

もう一度ログインを試してみてください。

 

WordPress設定のURL変更

ログインができたら、まずはWordPressの設定>一般からWordPress アドレス(URL)とサイトアドレス(URL)の「http」を両方「https」に変更します。

 

もしも入力欄がグレーアウトされていて入力できない場合、「wp-config.php」を編集することでURLを変更することができます。

WordPressの一般設定から間違ってwordpress アドレス (url) とサイトアドレス (URL)を入力した場合の2つの解決方法。

 

この際、グレーアウト自体が改善されるわけではありませんが、特に問題はありませんので安心してください。

 

画像の差し込みを行う場合に、この一般設定のURLをhttpsに変更しておかないと、画像のURLが「http」になってしまうので、必ず変更しておいてください。

 

リダイレクトの設定

SSL化によって「s」がひとつ加わっただけですが、自身のサイトのURLが変わったことには変わりありません。

外部サイトに既に貼ってある以前の「http」状態のリンクから遷移しようとした際にも、httpsに強制的に遷移させるように設定しておくのが良いでしょう。

 

これをやるために便利な「Simple 301 Redirects」というプラグインがあります。

プラグイン>新規追加から検索で「Simple 301 Redirects」と入力してインストール>有効化を行いましょう。

 

有効化ができたら、設定>301 Redirectsから、リダイレクトの設定を行いましょう。

Requestに以前のURL(例:http://shogo-aoki.com)を入力し、Destinationに現在のURL(例:https://shogo-aoki.com)を入力しましょう。

 

この際、末尾の「/」は入力しないように注意してください。

 

既存URLの置換

記事内に既に存在している自分のサイトのURL(画像や内部リンクなど)も全て「https」に修正する必要があります。

ひとつずつやっていたら、とても手間がかかってしまうので、プラグインを使って一気に置換してしまいましょう。

 

ここで活用できるのが、「Search Regex」というプラグインです。

先ほどと同様にインストールして有効化してみてください。

 

このプラグインは「設定」ではなく、ツール>Search Regexから使用します。

Search Regexを開いたら、Search patternに以前のURL(http://shogo-aoki.comなど)を入力し、Destinationに現在のURL(https://shogo-aoki.comまたは//shogo-aoki.com)を入力しましょう。

 

他の場所はいじる必要はありません。

入力ができたら、「Replace & Save」をクリックして置換を行います。

 

この際、「http://」を「https://」に置換するという設定は絶対に行わないでください。

もしこれをやってしまうと、自分のサイトのURL以外の外部リンクのURLも全て置換されてしまうので、外部リンクが全て無効になってしまう可能性があります。

 

また、Search Regexで行った置換は元に戻すことができないので注意が必要です。

 

固定メディア画像の貼り替え

ここまでやって、「やっとHTTPS化できた―!」と思いきや、よく見ると緑の鍵が付いていないという場合があります。

実はSSL化されたページの全てに緑の鍵がつく(保護された状態になる)わけではありません。

 

ページ内に「http」のリンクが含まれているものが存在している場合、「https」と「http」が混在している状態となり、URLの左側がグレーで表示されてしまいます。

 

「全て置換したはずなのに緑にならねぇー!」という時は、ブラウザのFireFoxを使うと「http」のリンクがどこに含まれているのかがすぐに分かります。

 

FireFoxで自分のサイトを表示し、URL左部の鍵マークをクリックしてみましょう。

すると、「この接続は安全ではありません」と表示されているのを確認できるかと思います。

 

このダイアログ内の詳細を表示>メディアをクリックしましょう。

 

ここで、「http」となっているURLや、画像のプレビューを表示することができます。

僕の場合は、ファビコン(タブの小さい画像)とタイトルロゴ画像がhttpのままになっていたのが原因でした。

 

画像は一度削除して、全く同じ画像をアップロードし直すだけで、「https」に修正することができます。

 

これで緑の鍵はあなたのものです。

おつかれさまでした。

 

さいごに

手間はかかりますが、以前と比較すると無料でSSL化ができるようになってきていたり、情報が多く出回っているので、安全にHTTPSのサイトを構築することができるようになってきています。

 

広告ASPなどもどんどんSSL化対応を進めているようですので、ゆくゆくはhttpサイトの方が少ないという時代になっていくでしょう。

技術が発達するほど、セキュリティという面は重視されていきます。

 

今のうちに、運営サイトのSSL化をしておきましょう。

 

この記事があなたの道を照らす星になりますように。


Sponsored Link

▽▼▽この記事をシェアする▽▼▽