エックスサーバーでWordPressをhttps化!画像つき全手順。無料で簡単SSL !3ステップ!

https化しなきゃいけないなと思っているけど、個人ブログだし、お金や手間がかかるのは嫌!設定に失敗してブログが表示されなくなったりするのも勘弁して欲しい。
でも、完璧なマニュアルがあって、無料ならばチャレンジしてみたい。

というあなたの疑問に全て答えます。

ひとつひとつの操作を画像つきで丁寧に解説している記事がないので、自分のサイトをhttps化した実体験(エラー対応など)を踏まえて、誰でも簡単に、確実にhttps化ができる解説を書きました。

FTPソフトを使ったり、テキストエディタでPHPファイルなど編集する必要はありません。すべて、エックスサーバーやWordPressの管理画面から設定できますのでご安心ください。

https化しないデメリット

今のまま放って置くとあなたのブログやサイトが、Googleに怒られる」状態になってしまいます。

「7月危機」などと呼ぶ人もいるくらいです。Googleの見解をまとめると、

  1. Googleは世界中の全てのサイトをhttps化したいと考えている
  2. 2018年7月、9月、10月とChromeブラウザ(世界シェア1位)のアップデートを段階的に行う
  3. アップデートによりhttps化されていないサイトには「保護されていません」という警告を表示する
これまでは、https対応しているサイトに「安全マーク」をつけることで、対応済みサイトを褒めて伸ばす方針でしたが、今後のアップデートでは、https化していないサイトには「警告マーク」を出すことが決定しています。

大切な読者の方に、あらぬ疑いや不安を持たれないよう、すぐにでもhttps化が必要なのです。

バックアップを確実に取りましょう

今回行うhttps化は、WordPressの内容を変更してしまうものなので、万が一にそなえて必ずバックアップを取ってください。

バックアップが終わったら、以下の簡単3ステップでhttps化をしていきます。

  1. エックスサーバーの設定変更
  2. WordPressの設定変更
  3. Googleの各サービスの設定変更

①エックスサーバーの設定変更

まず、エックスサーバーのサーバーパネルにログインしてください。


参考 サーバーパネル ログインエックスサーバー ブログを始めた(移転した)時にWordPressの「簡単インストール」をしただけで、最近はサーバーパネルにはログインしていないなぁという方でもご安心ください(私も久々にログインしました)。

難しい知識は不要です。FTPソフトを使ったり、メモ帳を使って難しいプログラムを書き換える必要もありません。

いくつかのボタンをクリックしたり、管理画面上でコピペするだけの簡単な設定を行うだけでhttps化させることができます。

たった2つ! サーバーパネルの設定変更
  • ①−1 ドメインからSSL設定
  • ①−2 .htaccess編集からリダイレクト設定

①−1 ドメインからSSL設定


「ドメイン」→「SSL設定」をクリックします。

 


https化したいドメインの横にある「選択する」をクリックします。

 

「独自SSL設定の追加」タブをクリックします。

 


対象となるドメインを選択し、右下の「独自SSL設定を追加する(確定)」をクリックします。
「CSR情報(SSL証明書申請情報)を入力する」のチェックは不要です。(私もしていません)

 

反映されるまで最大1時間程度かかると表示されていますので、しばらく休憩しましょう。(私の場合は20分ほどで適用されました)

SSL化した直後はブログが表示されなくなる

設定した直後、試しにhttps化されたURL(自分のサイトのURLにsを書き足す)に接続してみると、以下のように警告が出ますが、エラーなどではありませんのでご安心ください。

 

警告を突破して(左下の詳細設定を押す)アクセスすると、反映待ちであることがわかります。なんの問題もありません。とりあえず反映されるまで休憩しましょう。

今回は、20分ほど経ったところで「SSL設定」が反映され、https化されたURLにアクセスすることができました。

①−2 .htaccess編集からリダイレクト設定

ふたたび、エックスサーバーのサーバーパネルに戻ります。
参考 サーバーパネル ログインエックスサーバー

「ホームページ」→「 .htaccess編集」をクリックします。

 

https化したいドメインの横にある「選択する」をクリックします。

 

設定対象ドメインが、設定したいURLになっているか確認し、「 .htaccess編集」をクリックします。

 

設定画面の中央部分に以下の文章を、コピー&ペーストで貼り付けます。
貼り付ける位置は、先頭(一番上)です。

.htaccess
RewriteEngine On
RewriteCond %{HTTPS} !on
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]


最初から表示されていた文章の上に、コピー&ペーストできたら、右下の「.htaccessを編集する(確認)」をクリックします。

 


「.htaccessを編集する(確認)」をクリックします。

 

おつかれさまでした! 以上で、エックスサーバーでの設定は終了です。

 

②WordPressの設定変更

次はWordPressの管理画面にから設定を変更していきます。

たった2つ! WordPressの設定変更
  • ②−1 一般設定からURLを変更
  • ②−2 プラグイン「Search Regex」で内部リンクを置き換え

②-1 一般設定からURLを変更

「設定」→「一般」をクリックします。
「WordPress アドレス (URL)」と「サイトアドレス (URL)」の両方をhttp→httpsに書き換えます。

 

httpsに書き換えたら、左下の「変更を保存」をクリックします。

②−2 プラグイン「Search Regex」で内部リンクを置き換え

「プラグイン」→「新規追加」をクリックします。
右上の「プラグインの検索」という欄に「Search Regex」と入力します。

 

「Search Regex」というプラグインをインストールし、「有効化」します。日本語化されていませんが、設定する項目は少ないのでご安心ください。

 

「ツール」→「Search Regex」をクリックします。
(私のブログ「https://tottedashi.net/」を例に入力してみます)

プラグインの設定
  • Source 初期設定を変えない
  • Search pattern 「http」のブログURLを入力(SSL化前のあなたのURL)
  • Replace pattern 「https」のブログURLを入力(SSL化後のあなたののURL)
  • Regex 初期設定を変えない(すべて空欄)
入力したら、「Replace」をクリック。
この段階では、置き換えられたり上書きされたりはしないのでご安心を。

 

「http」→「https」に置き換えられる予定のリストが自動で表示されます。
ひと通り確認し、「Replace & Save」をクリックします。

 

置き換えが完了しました。

基本的には、以上ですべての設定が終了です。アドレスバーに、鍵のマークは出ましたか? 警告マークが消えましたか?

エラーが出た場合にチェックすべき勘所

ここまで頑張っても、エラーが出てhttps化できない場合があります。
どこを修正すればよいのでしょうか?

エラー箇所の探し方

Google Chromeでエラーが出ているサイト(あなたのブログ)を表示します
WindowsならF12、Macなら「option+Command+I」を同時押ししてデベロッパーツールを表示します。
「console」をクリックすると赤や黄色でエラーが表示されます。
エラー内容から、「http」となっている部分を注意深く見ていきましょう。

私が陥ったエラー

私の場合は、カスタマイザーからアップロードしていたトップ画像と、サイドバーにウィジェットとして表示していたブログパーツの中に「http」となっている箇所がありました。

トップ画像は、いちど画像を削除し、再アップロードし、ブログパーツ内にあった「http」を「https」に手動で書き換えてみました。今のところ無事に動いています。

使用を中止するのもいいと思いますが、どうしても必要なブログパーツだという場合、そのブログパーツのサイトにアクセスし、貼り付けコードを再発行し、貼り付け直してみましょう。(httpsに対応した新しい仕様に変わっているかもしれません)

③Googleの各サービスの設定変更

サイトやブログのURLが変更になるため、設定を変更する必要があります。

③-1 Google Analyticsの設定変更

URLの変更を行うので、Google Analyticsにログインします。
参考 Google AnalyticsGoogle Analytics

左下にある「管理」をクリックします。

 

真ん中の列の、「プロパティ設定」をクリックします。

 

「デフォルトのURL」の、「http」となっている部分をクリックし、「https」に変更します。最後に保存を押して設定完了です。

③-2 Google Search Consoleの設定変更

Search Consoleにログインします。
参考 Search ConsoleSearch Console URL変更はできない仕様のため、「追加」の設定をします。

「プロパティを追加」をクリックします。

 


https化した、あなたのブログのURLを入力して「追加」をクリックします。

 

「おすすめの方法」のまま、「確認」をクリックします。

 

「続行」をクリックします。

 

Search Consoleにデータが無い状況です。サイトマップを送るために、左下の「サイトマップ」をクリックします。

 

右上の「サイトマップの追加/テスト」をクリックします。

 

空欄に「sitemap.xml」と入力し、「送信」をクリックします。
注意 サイトマップを作成するプラグイン「Google XML Sitemaps」をインストールしておくことをおすすめします。

 

サイトマップが読み込まれました。右下に「保留」とでているので不安になるかもしれませんが、時間が経てば、保留と書いてある場所に数字が表示されるようになります。もうしばらくお待ち下さい。

以上で、Search Consoleの設定は完了です。

③-3 Google AdSenseの設定変更

もともと、ドメインだけの登録なので設定変更する必要はありません。

おめでとうございます!

これで、Googleに怒られない、素敵で安全なWordPressブログの誕生です!

おつかれさまでした!

このブログでも使っている、SSL無料!大容量データをアップしてもサクサク動くエックスサーバー



1 Comment

80回〜Googleに怒られたくない!https化を急げ!公式サイトリニューアル失敗談〜りんごは踊る、されど並ばず。 #narabazu | りんごは踊る、されど並ばず。

[…] グでも懇切丁寧に解説しておりますので、よろしければご覧ください。 参考 エックスサーバーでWordPressをhttps化!画像つき全手順。無料で簡単SSL !3ステップ!トマト屋のトッテダシ […]

返信する

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください