診断ドットコムのSNSを是非フォローお願いします☆X(Twitter) TwitterThreads Threadsタイッツーロゴ タイッツーmisskeyロゴ Misskey

ブログトップ > WordPressで構築したブログを常時SSL化【XSERVERで無料】

WordPressで構築したブログを常時SSL化【XSERVERで無料】

こんにちは、kotoriです。
先日、とあるWordPressで構築されたブログサイトを常時SSL化する作業を行いました!
画像は全てhttpでリンクされていたのですが、記事数が200弱くらいあるサイトなので手動で修正するのは困難でした。そのためデータベースのデータに文字列検索をかけ一括置換する作業が必要でした。

一昔前は独自SSLを取得するのに結構な費用が掛かっていて個人ブログレベルでは、SSL化しているサイトをあまり見かけませんでしたが、今では常時SSL化は世間的に当たり前になってきています。そのため、昔からブログやサイトを運営している人たちは常時SSL化対応に追われているのです。
Kotoriもその一人です笑 
今ではSSLを無料で提供しているレンタルサーバーもあり、常時SSL化はそこまで面倒な作業ではなくなっているのですが、重い腰が上がらず後回しにしていた結果このタイミングになったという背景です。
丁度ブログ記事のネタにもなるので常時SSL化を行いました。

この記事では、SSLってそもそも何ぞ?というところから、WordPressで構築されたブログを常時SSL化する方法まで事細かに説明したいと思います。
サーバーはXSERVERを利用しているので、XSERVERでの常時SSL化の設定も紹介します。
また、常時SSL化対応を行った後の301リダイレクトの設定方法も合わせて紹介します。

SSLとは

SSLはブラウザとサーバーの通信を暗号化する技術のことです。
ブラウザはChromeやSafariなど、端末にインストールされていてWebサイトを閲覧する際に活躍するソフトウェアです。
サーバーはWebサイトのデータが置いてある場所です。

例えばショッピングサイトでお買い物をするときに、購入手続きでクレジットカード情報を入力することがありますね。
この時みなさんはブラウザ経由でクレジットカード情報を入力し「購入」ボタンを押します。
「購入」ボタンが押されると通常、入力されたクレジットカード情報のデータはブラウザからサーバーに伝送されサーバー側で処理されます。
このクレジットカード情報がブラウザからサーバーに伝送される部分が、暗号化されているのがSSLです。
データを暗号化することで第三者に盗み見られる盗聴や、クレジットカード情報を書き換えられる改ざんなどの悪意のある攻撃を防ぐことができます。

逆にSSL化しておらず、ブラウザとサーバーのデータ通信が暗号化されていない場合、伝送されるデータは第三者が簡単に取得できてしまいます。

サイトをSSL化するメリット

サイトをSSL化するメリットは前項の「SSLとは」で説明したようにブラウザとサーバー間の通信を暗号化することでユーザーが入力した情報などが第三者に悪用されることを防ぐことができるメリットがあります。
またもう一つのメリットとしてサイトの「信頼度」が担保されることが挙げられます。
例えばGoogleのWebブラウザである「Google Chrome」はSSL化されていないサイトを開くとアドレスバーに「保護されていない通信」と表示されます。何とも見栄えが悪いですね笑
SSL化されていないページは「保護されていない通信」と表示される

しかも、SSL化されていないページに入力フォームが存在する場合、入力フォームに文字を入れた瞬間に赤字に変わるのです。
SSL化されていないページでフォームに入力すると「保護されていない通信」が赤字になる
SSL化されていないサイトで入力された情報は盗聴や改ざんされる危険性があるから警告してくれているのです。

個人ブログなどにも常時SSL化が普及した背景には、SSL化していないページはブラウザに「保護されていない通信」と表示されてしまい、いかにも信頼性が無いように見えてしまうという要因も大きく関係していたと予想されます!

XSERVERの常時SSL設定

何故常時SSL化することが推奨されているかが分かったところで、具体的な常時SSL化の方法を解説していきたいと思います。まずはサーバーの設定からです。
XSERVERを例に挙げて説明します。

まずは「サーバーパネルログインフォーム」にアクセスしアカウント情報を入力しログインします。
XSERVERログイン画面

ログイン後の管理画面の「SSL設定」をクリックします。
XSERVERのサーバーパネルの「SSL設定」を選択

常時SSL化したいドメインの「選択する」をクリックします。
常時SSL化したいドメインの「選択する」をクリック

「独自SSL設定追加」タブをクリックし、「追加する」をクリックします。
「独自SSL設定追加」タブをクリックし、「追加する」をクリック

「SSL新規取得申請中です。しばらくお待ちください。」と表示されます。
「SSL新規取得申請中です。しばらくお待ちください。」と表示

しばらく経つと「独自SSL設定を追加しました。」に画面が切り替わります。
「独自SSL設定を追加しました。」に画面が切り替わる

これでXSERVERでの常時SSLの設定は完了です。めちゃくちゃ簡単です!
自分のサイトが「https://~」でもアクセスできることを確認しましょう!

データベースのブログ記事データの「http」を「https」に一括置換

ページを常時SSL化するためには、画像やCSSなど絶対パスで指定する場合、全て「https」でURLを指定する必要があります。WordPressのメディアから画像を挿入すると画像へのURLが絶対パスで指定されます。
常時SSL化していないWordPressの場合、この絶対パスが「http」から始まるURLで指定されます。
常時SSL化するために「http」でリンクされている記述を全て「https」に書き換える必要があります。
ブログ記事が少ない場合は手動で「http」のリンクを「https」に書き換えても良いかもしれませんが、ブログ記事が100記事を越えている場合は手作業は現実的ではないですね!むりです!

そのためデータベースのデータをエクスポートし、「src=”http://」を「src=”https://」に一括置換してからインポートし直すという方法をとります。

早速手順を見ていきましょう!説明ではXSERVERのコントロールパネルからデータベース管理ツール「phpMyAdmin」を利用しますが、どのデータベース管理ツールであろうとエクスポートして一括置換してインポートする手順は変わりません。

まずはXSERVERのサーバーパネルにアクセスし「phpmyadmin」を選択します。MySQLのバージョンが分かれている場合、WordPressで利用しているバージョンを選択します!
XSERVERのサーバーパネルにアクセスし「phpmyadmin」を選択

phpmyadminにログインしたらWordPressに利用しているデータベースの「wp_posts」のテーブルを選択します!このテーブルに記事のデータが格納されています。
「wp_posts」のテーブルを選択

「エクスポート」をクリックします。
エクスポートをクリック

「フォーマット」が「SQL」になっていることを確認し、「実行」をクリックします!sqlファイルがダウンロードされます!
フォーマットは「SQL」で「実行」をクリック

ダウンロードしたsqlのバックアップをとってからテキストエディタを使って一括置換を行います!
Kotoriの場合は
「src=”http://」を「src=”https://」に一括置換をかけるだけで済みました。

一括置換が完了したらphpmyadminに戻り、先ほどの「wp_posts」テーブルを一度削除します!
テーブル「wp_posts」を選択した状態で「操作」タブをクリックし「テーブルを削除する(DROP)」をクリックします!
「テーブルを削除する(DROP)」をクリック

万が一に備え、テーブルを削除するまえに必ずデータベースのバックアップを取っておきましょう。
前項でダウンロードした「wp_posts」テーブルのバックアップとデータベース全体のバックアップを取っておけば良いでしょう。

「wp_posts」テーブルの削除が完了したら、「インポート」タブをクリックして一括置換済みのsqlファイルをアップロードします。アップロードができたら「実行」をクリックしましょう!
「インポート」タブを選択しsqlをアップロードし「実行」をクリック

正常にアップロードできたら完了です!サイトが問題なく表示されているか確認しましょう!

使用しているテーマのテンプレートの「http」を「https」に一括置換

WordPressで使用しているテーマのテンプレートファイルも同様に「http://~」で指定されている画像やCSSなどがあれば一括置換をかけます。
DreamWeaverの置換はフォルダ指定が可能なので、複数ファイルを対象に一括置換する場合、KotoriはいつもDreamWeaverで一括置換しています。

WordPressのサイトパスを独自SSLのURLに変更

次はWordPressの設定を変更します。
WordPressにログインして「設定」⇒「一般」⇒「WordPress アドレス (URL)」と「サイトアドレス (URL)」を「https://~」に修正します。
万が一に備えて作業を行う前にデータベースのバックアップを取っておきましょう。
「WordPressのアドレス」と「サイトアドレス」をhttps://~に修正

設定が変更されるとWordPressの管理画面がSSL化されます。

.htaccessで301リダイレクトを設定

さぁいよいよ最後の仕上げです!
「http://~」でアクセスされた場合に「https://~」のアドレスに自動でリダイレクトする設定を「.htaccess」に記述します。

# HTTPS
RewriteEngine on
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://kotori-blog.com/$1 [R=301,L]

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress

上記コードの最初の4行がhttpsへのリダイレクト設定です。既存のWordPressの設定の上にhttpsへのリダイレクト設定のコードを追加してください。

「http://~」でアクセスした時に「https://~」に自動でリダイレクトされれば常時SSL化は完了です!!!
お疲れ様でした!

常時SSL化まとめ

この記事ではWordPressで構築したブログをXSERVERの無料SSLで常時SSL化する手順を詳しく説明しました。
今では当たり前になっている常時SSL化ですが、まだ設定していない人は是非この記事の手順を使って試してみてください。
ここまで読んでいただきありがとうございました!

2019.4.14
TOPへ