在宅で仕事をしてるデザイナーのブログ WEBデザイン Adobe Illustrator & WordPress

サイトをSSL化する、とは？

今日は私のサイトのほぼ全てをSSL化しました。

SSL化とは、

簡単に言うと

そのサイト、ホームページを暗号化して、安全なサイトにするということです。

暗号化されていないサイトで、個人情報などを入力した時に、抜き取られる可能性がありますよ〜ということです。

数年前から大手企業からそういったセキュリティ強化対策がされてきました。

うちでもWordPressのサイトを提供してきていますが、クライアントさんのサイトを優先的にしてきたので、自分のサイトはあまりに多いので後回しにしていましたが、ようやく完了させました。

この画像の様に、Chromeなどのブラウザで見た時には、URLの横にグリーンの鍵マークがついているのが、安全対策されたサイトです。

Safariでは、黒の鍵マークになっています。

http://の部分に、Sがついて、
https://となるのが特徴です。

ネットを上手く使っていくには、こういう知識も少し持っている方がいいと思います。

ちなみに、画像のURLの横の四角の数字、
この場合、５ですが、
今、５つのタブでページを開いてるよ〜ということで、
ここをクリックしたら、何を開いてるか分かるんです(*^_^*)

WordPressのSSL対策

アフィリエイトをしているので、かなりの数のサイトを持っているのですが、
無料サイトを使っているところは対策は不要ですし（運営側しか出来ないですからね）
その他のサイトも可動していないところはとりあえず先送り。

今回は、実際に可動しているワードプレス（WordPress）で作られた１０個ぐらいのサイトを対策しました。

先だって、クライアントさんのサイトを対策してきたので、
その時にいくつか問題もあったものの、回避するプラグインを見つけたこともあり、思ったより時間はかからずに完了できました。

せっかくなので、以下、WordPressのサイトのSSL対策について記事にしておきます。

 

① Xサーバー上で、SSLの追加

私は全てのサイトはエックスサーバーで作っています。

なぜエックスサーバーかは、こちら【おすすめのレンタルサーバーは？】で。

まず、対象ドメインのSSL設定へ

独自SSL設定の追加で、対象ドメインを選んで設定します。
（サーバー上で数分で完了になりますが、実際の表示には数時間かかったドメインもありました）

② WordPressの設定　SSL化のためのプラグインを入れる

私は【Really Simple SSL】というプラグインをインストールしました。

インストールして、有効化した後、再度【はい、有効化します】という青いボタンが出てきたら、それをクリックすれば完了です。

全てのページに【SSL を有効化しました。 】と出てることでしょう＼(Φ∀Φ)／

一番簡単な構造のサイトは、これだけで完了しました(*^_^*)

ですが、WordPressのバージョンや、テーマによっては、下記の変更が必要になりました。

Really Simple SSLのプラグインが有効化されても、赤いコーションの文章が出た場合

【Detected possible certificate issues】
Really Simple SSL failed to detect a valid SSL certificate. If you do have an SSL certificate, try to reload this page over https by clicking this button:

↑これが出てしまってたら証明書が確認できてないみたいなので、そこをクリックします。

そうなった時には、CSSや、JSに含まれるURLの変更は手動になります。

 

Really Simple SSLのプラグインがうまく使えないときの手動設定項目

URLを変換していく（共通項目）

①一般設定で、WordPress アドレス (URL)と、サイトアドレス (URL)に、http[s]を入れる

②サイトの記事内のURLを一括変換するためのプラグインを入れる

私が使っているのは【Search Regex】という変換ツールです。

インストールして有効化すると、ツールの中に入ります。

そこで、記事内にあるhttp://◯◯をhttps://◯◯に以下の設定内容で一括変換します。

Source（対象とするのは）：Post content（記事内にある内部リンクとして入れているURL)

Limit to: No limit（デフォルトのまま）
Order By:Ascending（デフォルトのまま）

Search pattern（変換対象のURL）：http://◯◯◯.com（httpだけでなくフルパスで）
Replace pattern（変換対象のURL）：https://◯◯◯.com（httpsに変更したURLをフルパスで）

これで、一度【Search】をクリックして、一旦全てを検索し、内容を確認してから、
【Replace & Save】をクリックして一括変換してしまいます。

 

URLを変換していく（カスタマイズしている項目）

③使っているテーマの編集で、phpや、cssに含まれているhttpのURLを全て【https】に変換していきます。

外部サイトはその都度確認していってください。

外部サイトでSSL化されていないサイトへのリンクが必要になってしまうと、結果的に自分のサイトも対策が完了出来ません。

切り捨てていく、テーマの変更修正も必要になると、かなり大変な作業になりますね。

弊社が提供しているテーマでは、外観のカスタマイズのページで、設定しているのURLを全て手動で変換していきます。

その他、メニューで使っているカスタムURLも手動で変更します。

ウィジェットで、使っているサイドバーなどのアフェリエイトコードも修正していきます。

元のURLから、対策後のURLへ転送設定

最後に、元のhttpでアクセスされた時に、httpsへのリダイレクトの設定です。

FTPで、【.htaccess】をダウンロードして、テキストを編集し、再度アップロートしてください。

編集内容は、↓これを最後の部分でいいので、コピペで入れてください。

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

以上で、WordPressのSSL化は完了です。

最終確認は

サイトをChromeで表示させて、グリーンの鍵マークになっているか確認していってください。

ビックリマーク！などが出ている場合は、どこかにS無しのURLが残っているので、ソースを表示させてしらみつぶしに変更していきます。

ともかく、サイト内からhttp://のURLを全部修正するための試行錯誤でした。

自分で出来ない場合は、SSL化もお受けしますが、サイトによって様々な問題がありますので、まずは有料お見積りをお願いしています(*^_^*)

今日は、便利なネット社会にありがとぉ(*^_^*)