先日、ホームページのリニューアルと合わせて常時SSLにしました。その翌日に納品したホームページも同じくエックスサーバーの無料SSLサービスを使いました。

私が運営する個人ブログは数年前に有料のSSLを申し込んでいましたが、そろそろ契約更新なので、無料のSSLで充分な感じもしますので、切り替えようかとも考えています。

セキュリティ重視のホームページの利点

ウェブサイトの常時SSL接続が取り沙汰されるようになって久しいですが、最近では、無料のSSLも調子良いですね!

常時SSL接続というのは、サイトのアドレスが「http://」から「https://」に変わって、緑色の鍵マークがついたり、「保護された通信」なんて表記が、URLの前に付きます。

スマートフォンだと黒い鍵マークだけですね。

なぜ、SSL接続が必要なのかというと、ひとつは、ウェブサイトの改ざんや「なりすまし」によって、閲覧者の情報を盗まれたり盗聴されないようにするためです。

私も、数年前にウェブサイトの改ざん被害に遭いましたが、それはもう大変でした。Googleやブラウザが気付いてくれれば、アクセスできなくしてくれて、閲覧者に被害を出すことはないのですが、復旧は、かなり大変です。

そして、常時SSL(「https://」)にしておくと、検索エンジン最王手のGoogleがSSLを推奨していることもあり、検索結果に有利に働くという話もあるようです。

そう言いながら、このサイトはSSLではありません。その理由はいくつかあります。

ひとつ目は、無料SSLが普及してきている昨今ですが、このサイトを運営するCPIレンタルサーバーには、まだ無料SSLサービスがないんです。正直ケチってます(笑)

ただ、ケチっていたのでは、意味がないので、Googleが本当に常時SSLのサイトを検索ランキングで優遇するのかを検証するために、同じ、ホームページ関連のサイトでSSLにしているサイトを運営しデータ採りをしています。

比較しているホームページ制作に関するサイトはこちら

まだまだ、始めたばかりなので、明確な違いは出ていないというのが現状です。明確な違いが出てきたら、またブログで書きますね!








エックスサーバー で無料SSLを使う手順

エックスサーバー とレンタルサーバーの契約を結んだら、ホームページのデータをサーバーにアップする前に、SSL手続きをするのがオススメです。

私はワードプレスを使ってホームページ制作を行なっているので、WordPressをサーバーにインストールする前に、SSLの申請をします。

その理由を列挙しますね。

  1. SSL接続が安定するまでに時間がかかることがある(1時間ほど)
  2. 上記の時間内に、作業をすると不具合が起こる
    (私実際に起こって、丸一日作業がぶっ飛びました)
  3. 以降手順を間違えると、ワードプレスにログインできなくなる(汗)
  4. サイトを作ってからのアドレス変更「http://」から「https://」への書き換えが大変
  5. Googleアナリティクスの設定やサーチコンソールの設定が面倒になる。

では、それぞれ解説しますね。



エックスサーバーの無料SSL手続きは簡単です。

エックスサーバーの管理画面にログインし、「SSL設定」(ボタンの位置は下図参照)をクリックします。

エックスサーバー 無料SSL 設定方法

エックスサーバー 無料SSL設定 手順2

上図の赤枠内「独自SSL設定の追加」タブをクリックして…








SSL証明書申請情報の入力

次に『CSR情報(SSL証明書申請情報)』を入力します。エックスサーバーの無料SSLは、入力項目も少なくて簡単ですね!

以前、有料のSSL手続きをした際に入力した証明情報は、すっごく大変でした。この5項目を入力したら1時間ほど、別の仕事でもしていてください。

sslの設定は一旦終了

1時間経ったら、「.htaccess」という、ちょっと触り慣れないファイルを触ることになります。この設定を忘れて、「なかなかhttpsに切り替わらない…」と悩む方も多いようです。

「.htaccess」には、ホームページにアクセスさせるためにとても大切な情報が、書き込まれるファイルですので、余分な箇所を削除しないように次のコードだけをコピーして、「.htaccess」の最下部に貼り付けてください。

SSL htaccessの編集

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

次に、WordPressをエックスサーバー の「WordPress簡単インストール」ボタンをクリックして行います。

こちらも、画面に書かれた指示に従うだけで、データベース(MySQL)のインストールまで自動で行ってくれるので、簡単です。

インストールが終了したら、「https://」で始まるログイン画面のリンクが表示されるので、そのリンクをクリックして、サイトを作ってください。

とっても簡単ですよね!

ただ、これが、一旦サイトを作った後にやってしまうと…
ちょっと、比較してみましょう。



既に公開中のホームページを常時SSLに切り替える方法

既に公開中のホームページを常時SSLに切り替える方法の前半は、ほとんど同じですが、はじめにWordPress側での準備が必要です。

まずは、WordPressに、いつも通りログインして「設定」をクリック。「WordPress アドレス (URL)」「サイトアドレス (URL)」と書かれた箇所の「http://」を「https://」に書き換えて「変更を保存」をクリックします。

ssl設定 手順1

下図のような、ちょっと驚きの画面になりますが、ここはスルー

SSLを既存サイトに導入

(下図のような状況にしない方法は、後ほど。データベースMySQLに手を加えるので、データベースの編集はちょっと…という方は、この画面を甘んじて受け入れてください。)

そして、WordPressは放置。

その後に、エックスサーバーにログインして、無料SSLの設定を行い「.htaccess」に必要なコードを貼り付けて、1時間ほど放置してください。

1時間経ったら、いつもワードプレスにログインしているURLにアクセスすれば、自動的に「https://」に切り替わったログインページに飛ばされますので、このURLを「お気に入り」に保存して、ログインしてください。

ただし、まだこの状態では、「https://」にはなっていますが、「保護されていない通信」と表示されます。その理由は、サイト内のコンテンツに「http://」の記述が残っているからです。

外部サイトへのリンクは「http://」のままで良いのですが、サイト内リンクや画像、CSS内の同一ドメインをすべて「https」で始まる記述に変更しなければ「保護された通信」と鍵マークは表示されません。

ここからが意外と手間です(汗)








プラグイン「Search Regex」を使って一気に!

ワードプレスには、サイト内のほとんど(ココが肝)を検索し置き換えてくれる便利なプラグインがあります。それが「Search Regex」です。

「Search Regex」を「プラグイン」→「新規追加」→「検索(Search Regex)」で見つけたら、インストールし、【有効】ボタンを押して有効にします。

Search Regex

Search Regexを有効にしたら、「ツール」の中に「Search Regex」の記述があるので、それをクリック。次のような画面になったら、「https」に切り替えるサイトのトップページURLを「Search pattern(検索)」に貼り付けます。

そして、まずは一旦「Search」

Search Regexの使い方

検索結果を見たら「http://abc.com/wp-content/uploads/年/月/〜〜」などが検索されますので、この場合なら「http://abc.com/」を「https://abc.com/」に置き換えるように「Replace pattern」に貼り付けて「Replace & Save」をクリックします。

この時「http://」だけで検索してしまうと、外部リンクを掲載している場合の外部サイトURLまで「https」にしてしまうので注意しましょう。

ssl手順 WordPress内のURL修正

次はCSSファイルのメンテナンスです。

私はアドビのドリームウィーバーを使っていますので、ここでも「http://abc.com/」と「https//: abc.com/」を置き換えるような作業をします。

CSSの修正が終わったら、FTP経由でCSSをアップロードして完了。








手作業を行わなければならない場合も

「Search Regex」を使うと、WordPress内のほとんどの箇所で置替が可能なのですが、プラグインによっては、置き替えてくれない箇所があります。

ひとつは、私も使っている「yoast seo」のソーシャル用サムネイル画像のURLです。この他、投稿画面(エディター)系のプラグインを使っている場合も手作業が必要になる場合がありますので、漏れなくチェックしてください。

ssl設定で手間なYoast SEOプラグイン

ページの多いサイトだとソーシャル用のサムネイル画像URL変更が、これでもかってくらいボディにきますので、ある意味覚悟が必要かもしれません(汗)

データベース(MySQL)の編集方法

エックスサーバーでのSSL設定の前にWordPressの設定を行うのを避けるためには、データベース(MySQL)を直接編集しなくてはなりません。

MySQLへのログイン情報(IDとパスワード)を事前に控えていない場合は、FTPソフトでサーバーにアクセスし「wp-config.php」ファイルをダウンロードします。

CSSを編集するソフトで「wp-config.php」を開いたら、下図のようにデータベースのIDとパスワードを確認できます。

データーベースへのログイン情報

次にエックスサーバーにアクセスしてMySQLのバージョンを確認後、該当の「phpmyadmin(MySQLバージョン)」ボタンを押し、ログイン画面を開いて、データベースにアクセスします。

MySQLのバージョンを確認

phpmayadminにログイン

データベース内にログインしたら、該当のデータベース名を開き「wp_options」をクリックすると図のような画面に切り替わります。

SSL設定 データベース編集バージョン

図内で緑に反転している2箇所を「http」から「https」に編集し「実行」ボタンを押せば終了です。








アクセス解析系の変更も忘れずに!

サイトの準備が終わったら、(私の場合は)Googleアナリティクスで、URLの変更を行い、サーチコンソールには、新たに「https」になったURLを追加して、アナリティクスと連携させました。

これを忘れていると、「あれ?httpsにしたらアクセスが減っちゃった…」なんてことにもなりかねないので注意しましょう。

そして、今回リニューアルしたサイトがこちらです。

ホームページデザインと成果改善の方法がよくわかる5つのポイント