【 WordPressブログを https 化 】無料独自SSL設定方法(エックスサーバー)

「SSL化」とは何ぞや……という話ですが、ウチのメインのWordpressブログにはGoogle先生からずいぶん前に警告が来ています。

Chrome のセキュリティ警告を表示します

2017 年 10 月より、ユーザーが Chrome(バージョン 62)で HTTP ページのフォームにテキストを入力すると、「保護されていません」という警告が表示されるようになります。また、シークレット モードを使用している場合は、HTTP ページにアクセスするだけで「保護されていません」と表示されます。

貴サイトでは、たとえば以下に示す URL に、Chrome の新しい警告が表示されるテキスト入力フィールド(< input type=”text” >、< input type=”email” > など)が見つかりました。

別に「お前のサイトは危険だ」というワケではありませんが、要するに現在インターネット上に浮いているほとんどの “Http://” で始まるサイトは2017年の10月以降、「ここに入力すると情報を盗まれるかもよ」みたいな警告文を出されてしまうわけです。

このようにブラウザのアドレスバーの横のマークをクリックすると警告が出ます。
ssl

こちらは、最近立ち上げたばかりのブログです。

もうこの事が解っていたので実験的に初めからSSL化しておきました。
アドレスバーの横のマークがカギのようになっています。
ssl-2

ウチのメインブログは別に物品販売のサイトではないので情報が盗まれるようなものはありません。上記の「< input type=”text” >、< input type=”email” >」というのはコメントと連絡先のためのタグですね。(コメント欄を外せば解決……みたいな話かも笑.gif)

レンタルブログだったらレンタル元で全てやってくれるような事も、Wordpressでは自分でやらねばなりません。

ちなみに、9月17日現在、gooさん、livedoorさん、FC2さんなどほとんどのレンタルブログがまだSSL化されていませんけど……だから別にいいような気もするんだけど。笑.gif(楽天だけはさすがに通販扱うだけに早かった)

……というような事をブツブツ言っていても仕方ないので、とりあえず、このブログを使って実験的に覚書き。(例によって、手順はほとんど参考サイトさまへのリンクです)

すでに1つSSL化したのだから、その時にメモしておけば良かったのですが、意外と簡単だったので特に書かなくてもいいかなって……(でも、最後に何かとても大変な目に遭った記憶が……←それすら忘れてる笑.gif)

エックスサーバーでの無料SSL化の手順

参考サイトさまです。

XSERVERで常時SSLが無料なので、WordpressサイトをHTTPS化したときに行った全ての手順をまとめてみました。

そして、エックスサーバー公式の説明(いつもながら、とても解りやすい)

レンタルサーバー「エックスサーバー」のご利用マニュアル|無料・無制限に利用可能な独自SSL「無料独自SSL」の設定手順に関するご案内です。

サーバーパネルでSSL化設定

1. エックスサーバーの「サーバーパネル」にログイン。

2. 「ドメイン」→「SSL設定」をクリック。

3. ドメイン選択画面でSSLを設定するドメインを選択。「選択する」をクリック。

4. ページ上部の「独自SSL設定の追加」タブをクリック。
ssl-3

5. SSL設定したいサイトを選択して「独自SSLを追加する」をクリックするだけ。
(「CSR情報(SSL証明書申請情報)を入力する」のチェックはしません)
ssl-4

ここで「自動更新に失敗しました」という表示が出なければ成功です。

ちなみに、「※独自SSLは追加後、サーバーに設定が反映されるまで最大1時間程度かかります。」という表示の通り、本当に1時間以上かかりました。この手のものって1時間かかると書いてあっても5分くらいで終わったりするものが多いけれども、これは本当に時間がかかるので(笑)

https:// ~ へのアクセス成功……しかし…!

反映されるまでは「https:// ~」へアクセスすると「そのページは無効です」などの表示が表れてアクセスできません。

2時間ほど私用を済ませたり風呂に入ったりしてアクセスしてみると……。

https://muryoblog.cinemarev.net/

https://muryoblog.cinemarev.net」へ、アクセス成功!!

しかし!!

あれ……ページは確かに「https:// ~」になっているのに、アドレス横のマークがカギになっていない汗2.gif

クリックしてみると SSL化する前に出ていた警告「この接続は保護されていません」ではなく、「この接続は完全には保護されていません」と表示されます。

ssl-5

これは、一部 SSL化されていないファイルがページに混在している事を表す警告なので……。

ちょっとソースを見て、ヘッダー画像のアドレスが「http://~」だという事を理解。

とりあえず、あとで置き換えることにして他の手順を進めていきます。

設定からURLを変更する

サイドバーの「設定」をクリックして、

「一般設定」→「WordPress アドレス (URL)」「サイトアドレス (URL)」「https://」に書き換える。
(ちなみに、私、これやった途端に管理画面にログインし直しさせられました(爆)←「http:// ~」の方の管理画面で編集作業していたので(笑)ページがssl化されると管理画面のアドレスもhttps 化されます)

「Search Regex」プラグインでURLの置き換えをする

「Search Regex」については以下を参照してください。

画像などのアドレスが変わり、一気に書き換えしなくてはならなくなった時……100単位、何千単位になった時、それはもう途方に暮れるしかないわけで。そんな苦しみから解放してくれるのが「Search Regex」…

要するに、このブログの中に記載されている「http://」を一括で「https://」へ置き換える作業です。(先ほど、完全にSSL化していないと解っていたのに放置してここまで来たのは、どうせこれをやるからです。これでも変わらなければ手作業で変更します)

.htaccess にリダイレクト設定

手順は参考サイトさまを参照して……(ごめんなさい、あくまで覚書きなんで(笑))

「http://~」サイトは普通に生きているので、ここにアクセスしてきた人を「https://~」に転送します。

1. エックスサーバー「ファイルマネージャー」gazou.jpgを開きます。

2. 「public_html」を開き→編集するブログを開いて→「.htaccess」を編集します(元のコピーは必ず取ること!)

3. リダイレクトコードを冒頭に書き入れる

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

無事に鍵付きサイトになりました。

ssl-6

フォローする

スポンサーリンク