2020.4.19 ブログテンプレートを「The THOR」に変更しました。細部を修正中です。

エックスサーバーのWordPressを常時SSL(https)化してみた

どうも、ラングです。
当ブログはエックスサーバー利用のWordPressを使ってるんだけど、
セキュリティ面で懸念だったSSL(https)化をずっと処理し忘れていた。

いや…正確には、結構高い費用がかかる認識だったから放置していた、が正しい。

ところが、よく調べてみると。
エックスサーバーでは、無料SSL化ができるみたいだ。
であれば、URL変動もあるから早めに行うべきだと思い、今回実践してみた。

ラングの副業ブログ_icon
ラング
保護されていない通信とURL欄に出る上、
iphoneやMacのSafariでは警告が目立つようになった。
閲覧者のためにもSSL化はしておきたいね。

実践1:エックスサーバーでのSSL化作業

  1. エックスサーバーの「サーバーパネル」にログイン
  2. サーバーパネルのドメイン内「SSL設定」を選択
  3. SSL(https)化を行うドメインを「選択する」
  4. タブメニュー「独自SSL設定追加」を選択
  5. サイト項目の枠内で「www.ドメイン」を選び「追加する」
  6. 「SSL新規取得申請中」のシステムメッセージが消えるまで待つ
  7. 独自SSL設定を追加しました。と出たら「戻る」
  8. 対象ドメイン名横の「反映待ち」が消えるまで待つ
  9. 実践②へ進む

サーバーパネルへログイン

Xserver_サーバーパネル

まずエックスサーバーのサーバーパネルへログインする。
サーバーID、サーバーパネルパスワードは契約時の情報から確認した。

サーバーパネル内の操作手順

ドメイン内「SSL設定」

Xserver_サーバーパネル内

サーバーパネルにログインしたら、
ドメインメニュー内の「SSL設定」に入る。

SSL化するドメインを選択

Xserver_ドメイン選択

ドメイン選択画面で、SSL(https)化したいドメイン右枠の「選択する」をクリック。

独自SSL設定追加

Xserver_SSL設定

SSL(http)化したいドメインとなっているかを確認。
俺の場合、プルダウン内は1つのみだったのでそのまま。
(サブドメイン作ってる場合は念の為、チェックしたほうが良いかも)

Xserver_SSL化確認

SSL追加設定前の確認画面。
もう一度、SSL化対象のドメイン表示となっているかを確認。
問題なければ「追加する」で進む。

Xserver_SSL設定追加完了

SSL新規取得申請中というシステムメッセージが出現したら待機する。
(状況にもよるが、俺の場合は数十秒で処理が終わった)

取得申請が終わると自動的に画面が切り替わり、
「対象ドメイン」に独自SSL設定を追加しました。と表示される。
このメッセージを確認してから「戻る」をクリック。

SSL設定一覧の反映待ちが消えるのを待つ

SSL設定のタブメニュー「SSL設定一覧」画面。
設定ドメインに「反映待ち」表記が出ているので、これが消えるのを待つ。
(最大1時間くらい。画面切り替えしないと表記は消えないので注意)

反映待ちが消えたら、対象ドメインのSSL設定が完了する。

SSL設定の反映待ちが消えた後

まだドメインに対する設定が終わっただけ

この状態では、WordPressの既存記事に変化はないし、
httpとhttpsのURLが混在する状況となる。

なので…残る作業として、

  • WordPress側でのSSL化作業
  • サーバーの.htaccess設定でのhttps統一化

をやらなければならない。

ラングの副業ブログ_icon
ラング
サーバー設定だけでは終わらない。
大変だなぁ…と思ったけど、
セキュリティのためにも頑張ってみよう。

実践2:WordPressでのSSL化作業

  1. WordPress管理画面(ダッシュボード)にログイン
  2. 左メニュー:設定内「一般」を選択
  3. 2つのアドレス(URL)をhttp → https へ書き換える
    ※記述ミスに注意(WordPressに入れなくなる恐れがある)
  4. 「変更を保存」すると強制ログアウト
  5. 再度WordPressにログインし、URLバーを確認
    (https://~ になっていればOK)
  6. 実践③へ進む

WordPress側でのSSL(https)化設定

ダッシュボードから一般設定へ

Xserver_https化-wordpressダッシュボード

まずWordPressのダッシュボードにログインする。
次に左メニューの「設定」→「一般」の順に選択。

一般設定内で2つのアドレスをhttpsに変更

Xserver_wordpress_https化

一般設定画面にて。
「WordPress アドレス(URL)」「サイト アドレス(URL)」
この2つの枠に記載されているURLの http を https に書き換える。(半角だよ)

書き換えたら、一番下にある「変更を保存」をクリックする。

ただし、1つ注意。
アドレスの書き換えで、誤った文字を入れて保存してしまうと…
WordPressへのアクセスができなくなる危険性がある。
「変更を保存」する前に、半角であるか、不要なスペースを入れていないかなどしっかり確認しよう。

強制ログアウト後に再度ダッシュボードへ

Xserver_wordpress_https化

一旦、強制ログアウトされるので、再度WordPressのダッシュボードへログイン。
その後、URLバーでアドレスが https:// からスタートしているのを確認できれば、WordPressでの設定は完了だ。

残る作業は常時SSL化

常時SSL化しないと何がマズイの?

サーバーパネル、WordPressの設定が終わった段階では、
まだhttp、httpsの両方にアクセスが繋がる状態なんだ。
ん?それの何がマズイのだろうか?

実は両方に繋がる状態のデメリットがいくつかあって…

・セキュリティのあるページと無いページが混在
・URL単位では別記事扱いになるから、Googleのページ評価が分散される
・場合によっては重複コンテンツとみなされ、検索ペナルティにつながる
・アナリティクスなど分析ツールでも別々に計測されてしまう

つまり、検索エンジンから集客したい場合に不利になるということだ。

常時SSL化はもう一度エックスサーバーで設定

そのため、httpのアドレスで入ってきた人を、自動的にhttpsのページに転送する処理を設定し、httpsにしか入ってこれないようにする。
これが常時SSL(https)化だ。

設定には「.htaccess」の編集が必要。
再度エックスサーバーのサーバーパネルへログインし作業を行う。

ラングの副業ブログ_icon
ラング
WordPress側での設定自体はすぐ終わる。
入力ミスにだけは気をつけよう。
残るは”常時SSL化”のみだね。
 

実践3:エックスサーバーでの.htaccess編集

  1. エックスサーバーの「サーバーパネル」にログイン
  2. ホームページ内「.htaccess編集」を選択
  3. SSL化を行ったドメインを「選択する」
  4. タブメニュー「.htaccess編集」を選択
  5. .htaccess内の最上部に専用コードを書き加える
  6. 「実行する」

サーバーパネルへログイン

Xserver_.htaccess編集_サーバーパネル

再度エックスサーバーのサーバーパネルへログイン。
ホームページメニュー内の「.htaccess編集」を選択する。

.htaccess編集ドメイン選択

Xserver_.htaccess編集ドメイン選択

ドメイン選択画面にて、常時SSL化を行うドメインを選択する。

.htaccess編集上の注意

Xserver_.htaccess編集の注意

編集画面に入る前に「使用前のご注意」を確認しよう。

.htaccessは、編集することでサーバーの挙動制御を行える機能だ
逆に言えば、下手にいじくるとサイトの正常動作が効かなくなるリスクがある

上級者向け=サーバー制御の知識を持つエンジニアだと考えよう。
俺もエンジニアではないので、内容の詳細についてはわからない。
知識がない人は、すでに記載されてるコード群を編集しないよう注意したい。

.htaccessの編集

Xserver_.htaccess編集画面

タブメニュー「.htaccess編集」から編集画面へ。
設定対象のドメインで間違いないかチェックする。

.htaccessに既存で記載があるコードは一切いじらないこと。
メモ帳などにコピーしておけば、万が一間違えた際に戻せるかもしれないが…
そもそも間違えていじるということも無いように。

編集内容としては、下記のコードを.htaccessの最上段の行に挿入するだけ。

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

追記後に不備がないか確認したら、「確認画面へ進む」をクリックする。

最終確認画面

Xserver_.htaccess編集の最終確認

.htaccess編集後の最終確認。
もう一度、追記したコードに不備がないか再度確認する。
改めて問題がなければ、「実行する」をクリック。

Xserver_.htaccess編集完了

完了メッセージ画面になったら、「戻る」をクリックする。

.htaccess編集完了後の確認

httpでのアクセスがhttpsに転送されるかチェック

Xserver_https化完了

どの記事でもいいので、
検索エンジンの検索バーにhttpスタートの記事URLを直接貼ってアクセスする。

■例
http://hisui01.jp/ で直接アクセス → https://hisui01.jp/ に繋がる


アクセス先でURLを確認し、httpsスタートのURLになっていれば転送設定OK。
以上で、「エックスサーバーのWordPressを常時SSL化する設定」は完了となる。

ラングの副業ブログ_icon
ラング
ここまででようやく常時SSL化が完了。
「保護されていない通信」とオサラバとなった。
ユーザーにも安心して記事を見てもらえるね。

設定完了後の補足

画像・JS・CSSでhttp接続が残る場合がある

ブログ・サイト、記事内の画像やJavascript、CSSの指定などで、
http接続が依然残ってる場合は「保護されていない通信」と出る模様。

リンク先の画像などで「http://」スタートのものがあれば、
・「https://」スタートのものに変更する
・「相対パス」指定に切り替える
などで修正してみるのが解決方法らしい。

アクセス解析系タグなどもSSL接続の必要あり

外部サーバーからデータを読み込むシステムを利用している場合、
それらファイルへのアクセスもSSL接続の必要があるとのこと。

・アクセス解析タグ
・ブログパーツ

などを利用している場合、改めて確認する必要があるかもしれない。

ラングの副業ブログ_icon
ラング
Googleアナリティクスなど、
使ってる分析ツールに関して対応が必要なら、
また別の記事にしてお伝えしようかと思う。

【SSL化後に設定変更した分析ツール】

関連記事

どうも、ラングです。当ブログにてhttps(SSL)化した際のお話なんだけど。実はアクセス解析ツール「Googleアナリティクス」は、https化の後に設定変更を行わねばならないことがわかったので、実践したことを記録してみた。俺自身の[…]

最新情報をチェックしよう!