まいど、黒井です。
パソコンでこのページを見ているひとは左上を、スマホで見ているひとは画面上部に出ているアドレスをご覧ください。
Google Chromeをお使いの方であれば、上の画像と同様、アドレスバーの左に「保護された通信」という文言が入っているはず。
これは「SSL化されたウェブページの証」なのです!
このたび、当ブログ「スーパーヒキニート」では、エックスサーバーの「無料独自SSL」を利用してウェブサイトのSSL化を行いました。
URLの頭が「http://」ではなく「https://」になっているのがその証拠!
まだすべてのページのSSL化が済んだワケではありませんが、これからひとつずつページを確認し、すべてのページのSSL化、すなわち「常時SSL化」を目指します。
ここでは、エックスサーバーを利用されている方に向けて、中卒ひきこもりニートのぼくでもできた「SSL化」のやり方について、その手順を紹介します。
さっそく、レッツラゴー!
ざっくり紹介! エックスサーバーで行う「SSL化」の全手順。
まずは全体の流れを把握していただくために、ざっくりと箇条書きですべての手順を紹介します。
- 必ず最初に行うこと
- WordPressのプラグイン【BackWPup】を導入する
- SQLファイルのバックアップを取得する
- エックスサーバーで
- サーバーパネルにログイン
- 【ドメイン】にある【SSL設定】をクリック
- SSL化したいドメインを選択
- 【独自SSL設定の追加】タブへ
- 【独自SSL設定を追加する(確定)】をクリック
- 設定がサーバーに反映されるまで待つ
- WordPressの設定変更
- SSL化の設定がサーバーに反映されたのを確認する
- WordPressにログインする
- 【設定】の【一般】を選択する
- 【WordPressアドレス】のURLを「https://」に変更する
- 【サイトアドレス】のURLを「https://」に変更する
- WordPressでURL変更
- プラグイン【Search Regex】を導入する
- Search Regexを使いURLを置換する
- エックスサーバーでリダイレクトの設定
- エックスサーバーの【ファイルマネージャー】にログイン
- 【ドメイン】→【public_html】と進み【.htaccess】を取得
- 保存した【.htaccess】を複製しバックアップを取る
- 【.htaccess】を開き冒頭にコードをコピペして保存する
- 【.htaccess】を【public_html】にアップロードする
こうズラーッと並んでしまうとトンデモなくむずかしいように感じられてしまうかもしれませんが、大まかにいうと……
- バックアップを取っておく
- サーバーパネルでSSL設定をする
- WordPress側の設定をする
- 新しいURL(https://)に変更する
- リダイレクトの設定をする
こんな感じ。
以上の流れでもってSSL化を進めていきます!
[adsense]
必ず最初に行うこと/バックアップを取っておく
[voice icon=”https://tanoblo.com/wp-content/uploads/2018/07/cfa8b3e1fa50b36f2dba85e72feba21e-150×150.png” name=”黒井” type=”l”]慎重に。慎重にいくんやで。[/voice]
まずはデータベースのバックアップを取っておきましょう。
いつもどおりWordPressにログインしたら【プラグイン】からの【新規追加】で【BackWPup】をインストールします。
インストールしたらソッコーで「有効化」し、そのままバックアップを取ってしまいましょう。
WordPress管理画面のサイドバーにある【BackWPup】からBackWPupの管理ページを開いて「1クリックバックアップ/データベースのバックアップをダウンロード」をクリックします。
パソコンに拡張子【.sql】のファイルがダウンロードされていればオッケー!
エックスサーバー/サーバーパネルでSSL設定をする
[voice icon=”https://tanoblo.com/wp-content/uploads/2018/07/cfa8b3e1fa50b36f2dba85e72feba21e-150×150.png” name=”黒井” type=”l”]SSLの設定自体は簡単すぎるほど簡単なのよね。[/voice]
エックスサーバーの【サーバーパネル】にログインします。
ズラッと並んだメニューの右側にある項目【ドメイン設定】の中にある【SSL設定】をクリック。
すると、あなたの所有しているドメインが一覧で表示されるので、SSL化したいドメインを選択してください。
ページが切り替わったら【独自SSL設定の追加】というタブを開きます。選択したドメインを確認してから【独自SSL設定を追加する(確定)】をクリック。
これで「SSL設定」自体は完了です。
SSL設定がサーバーに反映されるのに数十分から1時間ほどかかるので、この記事にコメントをつけたり、このブログをブックマークに登録したり、黒井のYoutube動画を見ながら待ちましょうね☆
[btn class=”simple”]黒井の動画 / ゲーム実況[/btn]
WordPress側の設定をする
[voice icon=”https://tanoblo.com/wp-content/uploads/2018/07/cfa8b3e1fa50b36f2dba85e72feba21e-150×150.png” name=”黒井” type=”l”]おつぎはWordPress側の設定だーい![/voice]
「https://」のURLで自分のブログやウェブサイトが表示されることを確認したら、次はWordPress側の設定をします。
WordPressにログインしたら、管理画面のサイドバーから【設定】の【一般】をクリック。
ページが切り替わったら【WordPressアドレス(URL)】および【サイトアドレス(URL)】というふたつの項目を探します。
見つけたらURLを【http://】から【https://】に変更し、下部にある【保存】をクリックして完了!
[adsense]
WordPressでURL変更
[voice icon=”https://tanoblo.com/wp-content/uploads/2018/07/cfa8b3e1fa50b36f2dba85e72feba21e-150×150.png” name=”黒井” type=”l”]ブログやウェブサイト上の画像にも「URL」が割り振られているので、それもすべて【https://】に変更しないといけませんよー。[/voice]
管理画面のサイドバーから【プラグイン】の【新規追加】をクリックして、プラグイン【Search Regex】をインストールします。
インストールが完了したらさっそく「有効化」をしてSearch Regexを使うよ!
【ツール】の【Search Regex】を開いたら、設定は何もイジらずに……
- Search pattern:「http://」から始まる古いドメインを入力
- Replace pattern:「https://」から始まる新しいドメインを入力
これだけ入力して、すぐ下にある【Replace】をクリックします。
すると、文字列の置換される部分がズラッと出てくるので「入力したドメインは合っているか?」など確認をしましょう。
確認が済んだら改めて【Replace & Save】をクリック!
[aside type=”warning”]
注意
【Replace & Save】をクリックすると後から修正することができません。まずは【Replace】で置換される部分を確認してから実行しましょう。
[/aside]
これで「記事内の画像」や「内部リンク」のURLが【https://】に置換されました。
が、ウィジェットで画像や内部リンクを設定している場合(プロフィール画像など)は、別途URLの変更が必要です。
その場合は、管理画面のサイドバーから【外観】の【ウィジェット】を開き、手作業で画像や内部リンクのURLを【https://】に変更します。
[adsense]
リダイレクトの設定をする
[voice icon=”https://tanoblo.com/wp-content/uploads/2018/07/cfa8b3e1fa50b36f2dba85e72feba21e-150×150.png” name=”黒井” type=”l”]「http://」にアクセスしても「https://」にリダイレクトするように、コードをコピペしよう![/voice]
ふたたびエックスサーバーのページを開き、今度は【ファイルマネージャー】にログインをします。
【SSL化したいドメイン】→【public_html】と進み【.htaccess】をクリックしてダウンロードします。
ダウンロードが完了したら、ダウンロードされた【.htaccess】を右クリックしてコピーからのペースト(貼り付け)で複製しておきましょう。
バックアップを取ったら【.htaccess】をダブルクリックで開きます。
開くためのソフトウェアを尋ねられるので、テキストエディタ(メモ帳など)を選択して開きます。
文字列の「冒頭」に、以下のコードをコピペしてください。
<IfModule mod_rewrite.c> RewriteEngine on RewriteCond %{HTTPS} !=on [NC] RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L] </IfModule>
コピペしたら保存をし、先ほどの【public_html】にアップロードします。
おそらく【.htaccess】のファイル名が【htaccess】と「ドット」のない状態になっていると思います。
アップロードをしたら【.htaccess】を削除し、アップロードしたばかりの「ドット」のない【htaccess】のファイル名を【.htaccess】に変更します。
ここまで進めたら、いちど「http://」から始まる古いURLで、自分のブログやウェブサイトを表示してみましょう。
「http://」でアクセスしても「https://」のページが表示されるなら、リダイレクト設定は成功です。
これで(だいたいの場合)SSL化が完了します!
[voice icon=”https://tanoblo.com/wp-content/uploads/2018/07/cfa8b3e1fa50b36f2dba85e72feba21e-150×150.png” name=”黒井” type=”l”]お疲れ様でしたー。[/voice]
お疲れ様でした。
これでひとまずブログ/ウェブサイトの「SSL化」は完了です!
(え、ひとまず?)
しかし、真の「SSL化」はここから始まると言っても過言ではありません。
「常時SSL化」をするためには、ひとつひとつのページを表示し、きちんと「SSL化」されているかを確認していかなければならないのです。
ブログを収益化している人は……
自分でアップロードした写真/画像の他に「他所から借りてきている画像(多くの場合ASPのバナー画像)」がある場合、それらのURLも「https://」でなければキチンと「SSL化」されているとは言えません。
それぞれのASP広告の「SSL化」については、別の記事にまとめます。
(しばしお待ちをー)
SSL化するのにあたり参考にさせていただいたブログ。
[voice icon=”https://tanoblo.com/wp-content/uploads/2018/07/cfa8b3e1fa50b36f2dba85e72feba21e-150×150.png” name=”黒井” type=”l”]SSL化をするのにあたり、以下のブログを参考にさせていただきました。ありがとうございましたー![/voice]
⇒WordPressをhttpからhttpsにSSL化した全手順まとめ(エックスサーバー環境) – 寝ログ
⇒エックスサーバーでSSL化するのは超簡単! 無料で設定できるよ! - ヨッ!センス
コメント