WordPressをSSL化(http→https)して安全性と信頼性を向上しよう!SSL化の全行程を紹介<エックスサーバー向け>

こんにちは。 今日も自分の時間を確保してますねっ!
少しずつ「お金を生むスキル」を習得し、あなたの思い描く未来へ一歩近づきましょう。

 

インターネットが普及して以来、どんな情報でもオンラインで探し出せるようになったため、とても便利ですよね。

少し前までは、本やテレビ、ラジオなどでしか情報が手に入らなかったのに、映画みたいな変化を遂げました。

でも、そんな便利なインターネットなんですが、完璧なものではありませんよね。

何が言いたいかというと、インターネットにも注意すべきことがあるということです。

インターネットを使用する上で気をつけたいことは、安全性です。

「ウイルス」という言葉を聞いたことがあると思います。

ブログやホームページを運営管理していく中で、気をつけるべきなのが、不特定多数の読者が訪れるあなたのブログやホームページを安全なものにしておく必要があります。

 

そこで、今回紹介するのが、SSL化という作業です。

この作業をすることで、サイトのセキュリティが向上します。これは、訪れる読者からの信頼性にもつながりますので、とても重要だと思います。

ですので、SSL化について理解し、あなたのブログも対応させましょう。

今回は、その手順を一から紹介します。説明は、エックスサーバーを使用したものになっております。

そのため、もしあなたが他のレンタルサーバーを使用していれば、「(あなたのサーバー名) SSL化」などで検索してください。

内容を100%理解する必要はないので、説明に沿って、一緒にやってみてくださいね。

エックスサーバーは独自SSLが無料化つ無制限利用

SSLについては、簡単にいうとセキュリティの向上です。少し前まではお金を払ってやる必要があったんですが、最近はエックスサーバーのように無料でできるようになっています。

すでに、このようにエックスサーバーが準備していくれているので、利用しないわけにはいきません。

もしあたなが、エックスサーバーを使用してブログしているのに、SSL化をやっていなかったら今すぐやってください!
とっても損していますよ!

SSLとは
インターネット上でのデータの通信を暗号化するセキュリティ機能のことであり、Secure Sockets Layerの頭文字を取って略されたものです。
また、該当のWebサイトが信頼できるものとして証明する機能も備えています。個人情報を取り扱うサイトにおいては特に、ユーザーに安心してサイトを利用してもらうために、SSL証明書による安全性のアピールが必須である。
引用:エックスサーバー

SSL化の主な手順

SSL化に際し、次のような手順で進んめていきます。
なお、今回のSSL化はエックスサーバーを使用している場合に限ります。他のレンタルサーバーでSSL化する場合は、別途検索してください。

  1. 事前準備:データベースのバックアップ
  2. エックスサーバーでSSL設定を行う
  3. WordPressの設定からURLを変更する
  4. 内部リンクをSearch Regexで全て置き換える
  5. .htaccessにリダイレクト用のコードを追記する
  6. セキュリティ状態の確認
  7. SSLエラーを見つける方法
  8. テーマ等の設定を見直す

1つ1つ、丁寧に行なっていきましょう。

事前準備:データベースのバックアップ

SSL化だけではなく、設定を変更するときは基本的にはバックアップをしっかりやっておきましょう

最悪な場合、設定をミスしてしまうとあなたのブログを永遠に開くことができなくなる場合があるからです。

バックアップをしておけば、ミスしても元に戻せばいいから安心です。

データベースのバックアップには、るWordPressのプラグイン「BackWPup」を利用しましょう。

まずは「BackWPup」をプラグインで新規追加し、インストール→有効化まで行なってください。

有効化できたら、WordPressのメニューにBackWPupのアイコンが現れますので、ダッシュボードを開いてください。

ダッシュボードの中に、下記の1クリックバックアップがあります。その「データベースのバックアップをダウンロード」をクリックしてください。

すると任意のフォルダに、下記のような“サイト名”と“データベース名”から名前がつけられたSQLファイルがダウンロードされます。

このファイルは、万が一問題が起こった時に、データを復元するために使用しますので、大切に保管しておきましょう。

また、復元方法については、今回は省きます。またの別の記事でお話しできればと思います。

それでは、下準備ができましたので、早速SSLに設定を始めていきましょう。

エックスサーバーでSSL設定を行う

まずは、エックスサーバーのサーバーパネルへログインしてください。

ログインができたら、サーバーパネルの中から、ドメインの項目にある「SSL設定」を選びます。

ドメイン選択の画面が表示されるので、SSL化対象のドメインを選択しましょう。

SSL設定の画面が表示されるので、「独自SSL設定の追加」タブを選択しましょう。

「独自SSL設定の追加」タブでは、対象サイトを確認した後、「独自SSL設定の追加する(確定)」をクリックします。

独自SSL設定の追加をすると、以下のように追加完了のメッセージとともに、「SSL設定が反映するまで、最大1時間程度かかります。」と出るので、しばらく待ちましょう。

完了後、「SSL設定の一覧」のタブを開くてと以下のように「SSL用アドレス」が確認できます。

実際に、「SSL用アドレス」をクリックして開いてみてください。

おそらく、下のようなエラーメッセージが表示されたのではないでしょうか。(画像はsafariの場合)

メッセージにもある通り、設定完了後、しばらく時間を開ける必要があります。

最大1時間程度は、待ってみましょう。

十分な時間が経過すると、下記の通りきちんとSSL化されたURLであなたのブログが表示されたと思います。

ただし、これだけではSSL化されたURLは使用できるようになったんですが、あなたのブログのURLはhttpのままなはずです

そのため、次の設定をする必要があります。

WordPressの設定からURLを変更する

WordPressのダッシュボードから「設定→一般」を選んでください。

「一般設定」の中にある、下記の2つの項目を変更しましょう。

  1. WordPressアドレス(URL)
  2. サイトアドレス(URL)

変更内容は、それぞれのURLを http → https としてください。

<変更前>

<変更後>

変更しましたら、忘れずに一番下にある「変更を保存」ボタンを押しましょう。

そのまま閉じてしまうと、変更が適用されずキャンセルしてしまいます。

設定が完了すると、画面トップに官僚のメッセージが表示されます。

内部リンクをSearch Regexで全て置き換える

ここまでの作業は大丈夫でしょうか?

おそらく、ここまでは作業自体は面倒ですが、比較的容易に勧めてこれたのではないでしょうか?

と言うのは、これからの作業は、正直に言いますと、詳しくない方には?(はてな)が連続すると思います。

しかし、あまり深く考えずに、必要がある場合は、説明に沿って、作業を淡々とこなしてください。

理解しようとすると、数倍も時間がかかる可能性があります。(もちろん時間があれば理解に時間を割くのもいいですが)

 

さて、ここからは、あなたのブログのURLが「https://」に変更されたわけですが、実はあなたのブログの本文内の内部リンク(あなたの記事の引用リンク)や添付写真などの内部画像リンクがhttpのままなんです。

そのため、これらも全てhttpsに変更します。

方法は、いくつかあります。もちろん、該当ページを1つ1つ開いて、手作業でコツコツ編集することもできます。

でも、その一方でもちろん役に立つWordPressのプラグイン機能があります。

これから、そのプラグイン、Search Regexについて説明します。

Search Regex をインストールしよう

WordPressのダッシュボードからSearch Regexのプラグインをインストール→有効化しましょう。

すると、ダッシュボードのメニューの「ツール」にSearch Regexが表示されると思います。

一括置換内容の設定しよう

※これからの作業は、集中して取り組んでください。失敗すると少し厄介です。

まずは、あなたのブログ記事の本文にあるリンクなどを一括置換しましょう。

WordPressダッシュボードから「ツール → Search Regex」を選んでください。

すると、下記のようにSearch regexの設定画面が表示されます。

設定内容を以下の通り変更しましょう。

注意
設定内容を変更して、すぐに Replace&Save をクリックしないでください!
Save&Replace前に置換内容の確認を必ずやってください!※失敗すると修正に手間がかかります。

<変更内容>

  • Source:Post content(デフォルト)
  • Limit to:No limit(デフォルト)
  • Order By:Ascending(デフォルト)
  • Search pattern:http://○○○○○○○○○.com(SSL化前のあなたのURL
  • Replace pattern:https://○○○○○○○○○.com(SSL化のあなたのURL
  • Regex:選択不要

ここでは、まだ Replace&Save をクリックしないでください!

次に、置換内容の確認しましょう。

置換リスト一覧を確認しよう

一括置換内容の設定事項を記入したら、まずは「Replace」を選びましょう。
※Replace&Saveではありません!

「Replace」を押した時点では、まだデータベースの内容は書き換えられないので大丈夫です。

「Replace」を選ぶと、置換内容をリスト形式で確認できます。

実際の画像がこちらです。

SearchRegexが置換する部分が、下記の通り赤色で表示されます。

上段の薄緑色:置換の状態のソースコード

下段の薄黄色:置換の状態のソースコード

となります。

注意
Search Regexで置換返還後、保存(Replace&Save)を行ってしまうと、基本的に元に戻ることはできません。そのため、置換内容を保存前に、しっかり丹念にチェックする必要があるのです。

チェックするときの注意事項は、下記の通りです。

注意事項
  • 置換するURLは間違っていないか?
  • 置換後のURLは間違っていないか?
  • 置換後のURLはアドレスとしての体(てい)をなしているか?
  • 多くの結果リストをなるべくチェックしておかしな部分はないか?

本当にここは重量な部分となりますので、これでもか!と言うくらいにチェックしましょう。
し過ぎて損することはないくらい重要です!

URLを一括置換後保存しよう

最終的に一括置換内容に問題がないようでしたら、データベースに保存しましょう。

置換した結果を、データベースに保存するには、「Replace & Save」を選んでください。

クドいようですが、「Replace & Save」押す前に置換内容に問題ないか何度も確認をお願いします。

全ての置換が完了したら、以下のようなメッセージが出ます。
※置換する数は、あなたのブログの内容に由ります。

さぁ、この作業が山場でした。

お疲れ様です。

他に細々とした作業がありますが、比較的気楽に行えますので、肩の力を抜いて行いましょう。

.htaccessにリダイレクト用のコードを追記する

これから、もともと「http://○○○○○○○○○.com」に来ていたアクセスを「https://○○○○○○○○○.com」にリダイレクト、転送してくれるように設定します。

これは、例えば「http://maji-de-fukugyo.jp」のURLからサイトへ訪れても、「https://maji-de-fukugyo.jp」へ自動的に訪れるようにすることができます。

考えてみてください。あなたのブログの読者は、あなたのブログをブックマークしてくれています。しかし、おそらくそのブックマークのURLは、SSL化前のURLであるのは、十中八九間違い無いと思います。

そのため、今回の設定を行うことで、全てのページにおいて、上記の転送作業を行ってくれるようにするのです。

では、早速作業に取り掛かりましょう。

一見難しそうな作業ですが、作業自体は単純なので、1つ1つ丁寧に行うことだけを心がけましょう。

 

それでは、FTPでサーバーにログインして.htaccessファイルを編集します。

僕が利用しているレンタルサーバーは、エックスサーバーです。そのため、ここではエックスサーバーの例を紹介します。

またFTPについて不安がある方は、まずは以下の記事をお読みください。

MacでレンタルサーバーにFTPソフトでログインする方法

2017年12月24日

まずはFTPで、サーバーにログインして、対象のドメインの「Public_html」のディレクトリを開きましょう。

そして「Public_html」ディレクトリにある「.htaccessファイル」をダウンロードしましょう。

ここで、必ずダウンロードした「.htaccessファイル」の複製(コピー)をしておきます

「.htaccessファイル」の複製
.htaccessファイルは、実は非常に重要なファイルです。と言うのも、編集に失敗してしまうと元に戻せなくなる可能性があります。そのため、編集する前には、必ずバックアップ用のデータ(編集前データの複製)を準備しておく必要があります。

バックアップの準備ができたら、先ほどダウンロードした.htaccessファイルを編集しましょう。

 

 

 

編集する内容は、下記のコードを先頭部分へコピペしてください。

1
2
3
4
5
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{HTTPS} !=on [NC]
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>

すると、以下のようになります。

あとは、編集した.htaccessファイルを保存して、サーバー上の「Public_html」ディレクトリに上書きアップロードします。

アップデートしたら、念のために内容に間違いないか「表示/編集」で確認しましょう。


ここまで完了したら、実際にあなたのブログを開いてみて問題がないか確認してください。

もしエラーが表示される場合
先ほどバックアップで複製した.htaccessファイルを使って、復元してください。
そして初めからやり直してみましょう。

セキュリティ状態の確認

ここまでの作業は大丈夫でしょうか?

もしかしたらここまでの設置をした上で、気づいている人もいるかもしれません。

実は、ここまでの設定をしても以下のように、セキュリティ上、安全な接続と認識されない場合があります。

例えば、GoogleChromeの場合、安全な接続と見なす場合は、アドレズバーの左側に以下の画像のような緑色の鍵マークが表示されるんです。

しかし、現状だと上記のように表示されていない場合があります。

そこで、その設定をしていきましょう。

ページの一部が安全でない状態

ページの一部が安全でない状態だと、ほとんどのサイトで鍵が表示されていない状態になります。

これは、あなたのブログのコンテンツ内に、外部の安全でないサイトからの画像を含んでいたり、同様のスクリプト(簡単なプログラム)を読み込んでいたりする可能性があります。

GoogleChromeの場合:サイトアドレスの左側に鍵表示なし

Firefoxの場合:サイトアドレスの左側に、鍵マーク+!(エクスクラメーションマーク)表示あり

上記画像にもあるように、「この接続は安全でありません」とSSL化下にも関わらず、警告メッセージが表示されています。

これは気持ちよくないですよね!

これから、このような場合の「安全な状態に表示させる」方法を説明します。

SSLエラーを見つける方法

Google ChromeやFirefoxなどのブラウザであなたのブログを表示させて、以下のように「安全でない状態」と表示されているとします。

さぁ、ここで「どこに問題があるか」を見ていきましょう。

デベロッパーツールでチェックする

GoogleChromeでもFirefoxでも、開発者ツールを使うときの操作法補は、基本的に同じと言うことを知っておきましょう。

ただし、Google Chromeのデベロッパーツールの場合は、英語表記なので分かりづらいと感じる方が大多数だと思います。その際は、Firefoxで確認する方がいいと思います。

デベロッパーツールとは?
デベロッパーツールとは、一言では説明できないので、Googleで探して見てください。 

Firefoxのデベロッパーツールでチェックする場合

まずは、あなたのブログを開いた上で、ページ上で

F12
を押します。(Macの場合は、Command+option+l)

 

するとデベロッパーツールが開かれます。

そして、「Console」タブを選びます。

すると、Console上のリストエラー箇所が表示されます。

このように「混在表示コンテンツ」と表示されたら、その部分のHTMLを見直す必要があります。

Google Chromeも同様の方法で確認できるので、英語に抵抗ない方はやってみてください。

Firefoxのページ情報ダイアログでチェック

Firefoxの場合、上記で紹介した方法以外にも、「ページ情報」ダイアログを用いたチェック方法もあります。

その方法を、紹介しておきます。

まずは、「安全でない接続」を意味するマークを選んでください。

すると、上記のように「この接続は安全ではありません」というダイアログが表示されます。

その右端にある矢印をクリックしましょう。

そこで、「詳細を表示」を選びます。

 

すると、「ページ情報」が表示されるので、その中の「メディア」のタグを選びます。

「メディア」タグの中のリストから「https://」になっていないものがあれば、しっかりどのメデイアか確認します。

この方法が、最も簡単にエラーの原因である対象物を特定しやすいでしょう。

テーマ等の設定を見直す

先ほどのようなSSLエラーが出そうな場所というのが、実は予測することができます。

それは、これまでの経験値にもなるのですが、参考程度にご紹介しますね。

よくあるのが、テーマのテンプレートや設定などでimg、ifram、form、scriptから「http://」が呼び出されている場合です。

例えば、下記のような画像リンクもその1つになります。

ページ情報から、「背景画像」がSSLエラーを引き起こしているか突き止めました。

この場合は、「外観」→「カスタマイズ」のグローバル設定から、引用している画像のリンクURLを変更させます。

すると、

きちんと鍵マークがきちんと、緑色になりました。

このように1つずつ直すこともできます。

その他ツールの設定変更について

他にも分析サイトなどを利用している場合は、きちんと登録URLを変更しておきましょう。

例えば、僕は以下の2つのツールを使っているので、変更しておきました。

  • Google Analytics
  • Google Search Console

 

 SNSの設定をしておこう!

実は、サイトをSSL化するということは、アドレスが変わってしまうので、SNS上ではシェアカウントが全てリセットされます。せっかく、httpの際に取得したアカウントを台無しにするのは嫌ですよね。

SNS Count Cacheというプラグインを使用すれば、http時代に取得したカウントをhttpsの新しいカウントに合算し表示させることが可能です。

その方法をご紹介します。

まずはSNS Count Cacheをインストールしましょう。もちろん有効化も忘れずに。

インストールしたら、ダッシュボードからSNS Count Cacheの設定を選びます。

設定画面が表示されたら、下記の「シェア基本キャッシュ機能」を探し出してください。

そこで、「HTTPからHTTPSへのスキーム移行モード」を「有効」にします。

これで、 SNSのカウントを引き継ぐことができます。

注意
なかにはカウントを引き継げないSNSもあるようです。

メリットとデメリット

SSL(https)化のメリットとデメリットを、今回の作業を通してお伝えします。

SSL化のメリット

  • サイトのセキュリティ性向上
  • ブログ読者への信頼性向上(ブログを安全に見てもらえるため)

インターネットにおいては、あまり意識していない人もいますが、セキュリティについてはシリアスに対応する必要があると思います。

特に最近ではインターネットバンキングなども一般的になり、1つのウイルスなどが命取りになる可能性もあるのです。

情報発信をする上で、ここはしっかり押さえておきたい、読者への礼儀とも言っていいほどだと思います。

SSL化のデメリット

  • 環境によっては設定が面倒くさい
  • https対応していないAPSのアフィリエイトタグは使用不可
  • 予想外の不具合を発生する可能性がある

設定自体は、難しいことでもなんでもないですが、作業は慣れている人にとっても非常に面倒だと感じるでしょう。

ただし、あなたが、もしこれからブログを始めるんだったら、はじめにこの設定をすることで負担はかなり軽減されます。

まとめ

https化していないサイトは、最近では少なくなってきました。

それくらい誰もが簡単に設定を変更できるんですね。

逆にhttpのままだと悪い意味で目立ってしまうということです。それにセキュリティに関しては、本当に真剣い考えて取り組むべきことだと思います。

多少、設定は面倒臭いかもしれませんが、きちんと対応するようにしましょう。

今回は、かなりの長編になってしまいましたが、1つずつ丁寧に真似して見てくださいね。

 


ただ今、激推しの再現性抜群の新せどり手法!!




自由な人生へグッ!と近づくこと間違いなし!





コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください