
今や当たり前になってきたブログやサイトの常時SSL化。
グーグルからもブログやサイトをSSL化しないと「アクセス時にセキュリティの警告が表示されるようになります」なんてメール通知を受ける場合もあると思います。
(それは私ですが σ^-^;) )
SSLとは、見た目的に言えば、今まで「http://~」といったURLでアクセスしていたものが、”s”が追加されて「https://~」でアクセスできるようになったもの。
超ざっくり言えば「送信するデータに関して漏洩することなく安全なアクセスができる仕組み」といったものになります。
ブログやサイトがSSL化されている場合とされてない場合では、ブラウザの表示上、以下のような違いもあります。

SSL化されてないと、先頭に「i」のような表示が出て、これをクリックすると「このサイトへの接続は保護されてません」なんて言われてしまうんですね。
SSL化されていれば、
- グーグルクロームでは、鍵マーク(というか錠マーク)に「保護された通信」とはっきり表示され、
- マイクロソフトのEdgeでも、先頭に鍵マークがついて分かりやすく表示されます。
- どちらもURLで「https://~」と表示されるようになります。
分かっちゃいるけどどうしよー、なんて、SSL化には随分迷ったりしてましたが、グーグルから通知が来たら、そろそろ対応してみるか、という感じ。
(といいつつ、検証を兼ねて、このブログのSSL化の前に小規模サイトから順にSSL化してたりしますが(笑))
以下詳しく解説していますが、実際やることは単純で簡単です。
(が、実は細かいものが結構あったりします)
Contents
事前)バックアップについて
常時SSL化の手順を進める上で、データのバックアップを取っておくのが安心ですが、私の場合は特に取らずに行ってます。
(必要になれば有料ですがサーバーのバックアップサービスを使えばよいという考え。以前お世話になったこともありますし)
万が一、という事を考える場合には、プラグイン「BackWPup」などを使ってデータのバックアップを取っておく、というのが良いですね。
(使い方は「プラグイン BackWPup 使い方」などで検索してみてください)
では以下順に、常時SSL化のための手順を進めて行きましょう。
手順1)サーバーでSSL設定を行う
SSL化には、
- 1)サーバー側の設定
- 2)ワードプレス側の設定
と、各々やることがありますが、まずはサーバー側でのSSL設定。
ここでは私も愛用のエックスサーバーでの手順です。
エックスサーバー以外の場合には、ご利用のサーバーのマニュアルなどを参照してみてください。
(「ご利用のサーバー名やサービス名 SSL」などで検索するのが良いです)
1)サーバーパネルからログイン
まずエックスサーバーにアクセスして、サーバーパネルからログインします。
↓↓↓↓↓↓
サーバーID, パスワード入力して、ログイン
↓↓↓↓↓↓
ログインしたら、続いてSSL設定を行います。
2)SSL設定を選択
「SSL設定」を選択します。
↓↓↓↓↓↓
ドメイン名の選択画面が表示されるので、
今回SSL化をおこなうドメイン名のところの右端「選択する」をクリック!
↓↓↓↓↓↓
「SSL設定」が表示されるので...
- ① 「独自SSL設定の追加」をクリック
- ②「独自SSL設定を追加する(確定)」をクリック!
※)CSR情報について
元々SSL化にはCSRという情報が必要でしたが、今はこれがなくてもSSL化できます。
個人ブログ以外で、例えば企業サイトなどでは必要に応じて利用すればOK。
以上をおこなうと、以下のような「しばしお待ちください」メッセージが表示されます。
ここで数分待ちましょう。
↓↓↓↓↓↓
しばらくすると以下①のように「設定済」とか「すでに独自SSLがせっていされています」などのメッセージが表示されます。
(ページを再表示したりしてみてください)
- SSL設定追加のメッセージを確認!
↓↓↓↓↓↓
メッセージを確認後、下の画面にある①「SSL設定の一覧」に切り替えてみましょう。
②のように、まだ反映待ちと表示されている場合には、もう少し待ちます。
(エックスサーバーの画面上では、最大1時間と説明されてますね。場合によりますが、私の場合、大体30分から40分ほどかかったでしょうか)
以下の様に、反映待ちが消えていればOK。
以上でまずはサーバー側でのSSL化は終わりです。
ポチっとクリックして後は待つだけ、といった感じで、とっても簡単。^-^)
3)設定反映を確認
サーバーでの設定は単純でしたが、設定が終わって、上で見た「反映待ち」が消えると、SSL化されたアクセス(「https://~」でのアクセス)が出来ると思います。
いや、まだだめだ、という場合には、もう少し待ってみましょう。
実際に試してみてもらえばわかりますが、ある程度時間がたたないと、以下のような感じになります。
- これまで同様「http://~」では普通にサイトにアクセスは出来る
- でも、SSL化されたURL「https://~」でアクセスすると、以下のようなエラーや警告表示がされる
1時間ほど待ち「https://~」でアクセスできればOKです。
ただ、この時点では「https://~」でアクセスできたとしても、デザインが崩れたりしている場合があります。
これは以下のワードプレス側の設定が残っている(そのためデザインを決めているCSSファイルがうまく読み込めてない)からですが、普通に「http://~」ではサイトにアクセスできて普通に見える(一般にアクセスしてくる読者にとってはこれまで通り普通にアクセスできる)ので、不安にならず進めましょう。
手順2)ワードプレスの設定を行う
ではサーバー側の設定が終わったので、続いてワードプレスの設定です。
SSL化したことをワードプレスに教えてあげる設定になりますが、
こちらも至って簡単で、設定を2か所変えるだけ。
- 設定変更は以下2か所
- 1)WordPressアドレス
- 2)サイトアドレス
ではワードプレスにログインし「設定」→「一般設定」を表示します。
※)ログインできない!となったら、「https://~」でアクセスしてログイン操作してみてください。
- ①「WordPressアドレス」の「http://」を「https://」に変更
- ②「サイドアドレス」の「http://」を「https://」に変更
見て分かるように、小文字の”s”を追加するだけ。以下のようにすればOKです。
(全角ではなく半角の”s”を追加することに注意)
最後に画面下にある「変更を保存」をクリック!で完了です。
一瞬で終わりましたね!(笑)
では「https://~」でアクセスしてみましょう。
崩れて表示されていたデザインも正しく表示されていると思います。
手順3)内部リンクを全て置き換える
以上でSSL化のための基本は終わりですが、記事の中に自サイトの記事へのリンク(内部リンクと言います)(http://~)を入れている場合があります。
この「http://~」の形式の内部リンクが記事内に残っていると「https://~」でアクセスして表示できても、「保護された通信」とか「鍵マーク」は表示されないため、
- 記事内の自サイトの記事のリンク「http://~」を、すべて「https://~」に変更
(文字列の置き換え)
をする必要があります。
1つ1つ手で修正して行っても良いですが、記事数が100とか200とかになると「ひぇ~、マジですか...」とか「無理!」となりそうなので(笑)、ここではプラグインを使って一括変更するのが良いですね。
1)「Search Regex」をインストール
利用するプラグインは「Search Regex」。
このプラグインは非常に便利で、ワードプレスのデータベース内の特定文字列を一気に変換してくれます。
(このプラグインは更新が止まってますが、問題なく使えました)
このプラグインを活用することで、記事内にある内部リンク「http://~」を一括して「https://~」に置き換える、ということをします。
では早速インストールして有効化していきましょう。
- ① ワードプレスにログイン
- ② 「プラグイン」から「新規追加」を選択
↓↓↓↓↓↓
「プラグインを追加」の画面になったら「Search Regex」を探してインストールです。
- ① 「キーワード」に「Search Regex」を入力
- ②「Search Regex」のプラグインが表示されるので「今すぐインストール」をクリック!
↓↓↓↓↓↓
インストールが完了したら「有効化」を行います。
- ① 「有効化」をクリック!
↓↓↓↓↓↓
2)「Search Regex」の起動
プラグインのインストールと有効化が完了したら、続いてプラグインの設定画面で操作をします。
以下のように「ツール」から「Search Regex」を選びましょう。
- ① 「ツール」⇒「Search Regex」をクリック!
↓↓↓↓↓↓
3)変換箇所を表示させて確認
Search Regexの設定画面が表示されました。
手順で最初に必要なのは以下①から③の3つだけ。
その他にも設定項目がありますが、このまま何もしなくてOKです。
※)いきなり変換を実行するのではなく、まず変換箇所の確認をするための操作ですのでご安心を。
- ① 「Search pattern」
- ここにこれまで使用していたあなたのブログ/サイトの「http://ドメイン名」を入力。
- たとえば、私のブログの場合で言えば「http://tabibitojin.com」となります。
- ②「Replace pattern」
- SSL化したあなたのサイト/ブログのURL「https://ドメイン名」を入力
- たとえば、私のブログの場合では「https://tabibitojin.com」となります。
- ③「Replace」
- ①、②が入力出来たら、③「Replace」をクリック!
- これは、変換を実際に実行するのではなく、以下に見るように、文字列が置き換わる箇所はどこか、画面上に表示してくれる操作になります。
↓↓↓↓↓↓
上に見る画面の下①の箇所に、変更前(現状)と変更後が表示されます。
ここで置き換える文字列は間違いないか、しっかり確認しておきましょう。
やること自体は単純ですが、
ここを間違えると大変なことになるので、必ず確認してくださいね。
- ① 「Result」以下の内容にて
- 変更箇所、置き換える文字列に間違いがないか、しっかり確認!
↓↓↓↓↓↓
4)一括変換を実行
では変更箇所、置き換える文字列に間違いがないか確認出来たら、実際に一括変換を行います。
- ②「Replace & Save」
- 変更箇所、置き換える文字列に間違いがないか、しっかり確認後、②「Replace & Save」をクリック!
↓↓↓↓↓↓
割と一瞬で文字列の置き換えが完了します。
完了すると、以下のような表示が画面上にされますので分かりますね。
以上で内部リンクを入れている記事に「https://~」でアクセスしても「保護された通信」とか「鍵マーク」が表示されるようになると思います。
※)まだダメだ!という場合は、以下を参照してみてください。
常時SSL化しても「保護されていない」表示がされる?!SSL化できない時の8つの注意点や対処法
手順4)転送設定(リダイレクト)「.htaccess」編集
ここまでで「http://~」でアクセスしていたものを「https://~」でアクセスできるようになりました。(SSL化はまずは完了)
次は、
- リダイレクトの設定
検索結果や他のブログやサイトにリンクされているURL(http://~といったURL)をクリックされても、「https://~」へ自動で転送する設定
を行います。
これには「.htaccess」というファイルの編集が必要ですが、これもいたって簡単。「手順1」で行ったように、まずエックスサーバーのサーバーパネルからログインして行います。
※)注意!
.htaccessの編集では、何か間違えた場合、最悪サーバーにアクセスできなくなります。何か間違ってもすぐ元に戻せるように「.htaccess」ファイルのバックアップを取っておきましょう。
(ファイル内容をどこかにコピペしておく、ファイル自体をFTPなどを使ってダウンロードしておくなど)
.htaccessの編集手順
エックスサーバーのサーバーパネルにログイン後、「.htaccess編集」を選びます。
- ①「.htaccess編集」をクリック!
↓↓↓↓↓↓
編集対象をどれにするか、ドメインの一覧が表示されたら、今、常時SSL化をしようとしているドメインを選択。
↓↓↓↓↓↓
この後以下画面が表示されますが、「.htaccess編集」を選択してください。
これで「.htaccess」ファイルの編集画面になります。
ここで表示される内容はブログやサイトによって異なりますが、
元々入っているコードは一切変えないでくださいね。
この画面で以下のコードを入力します。
※)エックスサーバーのマニュアル「Webサイトの常時SSL化」に説明のあるコード
1 2 3 |
RewriteEngine On RewriteCond %{HTTPS} !on RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L] |
以下の①の様な感じで一番上にコピペ。
①の入力が終わったら、一番下にある②の「.htaccessを編集する(確認)」をクリック!
↓↓↓↓↓↓
確認画面が表示されるので、問題なければ一番下の「.htaccessを編集する(確定)」をクリック!
以上で、常時SSL化の作業はひとまず完了です!ヽ(^。^)ノ
「http://~」でアクセスしても「https://~」に自動で変わるか確認してみてくださいね。
自動で「https://~」にならない!?
ここまでで常時SSL化の作業は一通り終わっているはずですが、
- 「http://~」でアクセスしても「https://~」に変わらない
- ホームだけはそうなるが他はダメだ
という場合もあります。
私の場合、実は最初「.htaccess」の編集で、貼り付けるコードを一番下にしてました。
すると「http://~」でアクセスした時、どうも、ホーム(トップページ)は確かに「https://~」に自動で変わるけど、他の記事は「http://~」のまま、みたいになり、どうしてだー、とあれこれ悩むことに。
結果、あれ?もしかして一番上に貼り付けた方が良いのかな、ということで、上で説明した位置に貼り付けてます。(で、全て「https://~」に自動で変わるようになった)
また、私の例ではありませんが、場合によっては以下のコードにすると、こういった現象に対応できることもあるようです。
(エックスサーバーのマニュアルで解説されているコードとの違いは、2行目の”!on”が”off”になっていること)
1 2 3 |
RewriteEngine On RewriteCond %{HTTPS} off RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L] |
出典)SSL化で.htaccessにhttpからhttpsへリダイレクト設定してもうまくいかない、500エラー時に確認すること
この出典の記事では色々なケースの対応が書かれているので「どうしても自動で「https://~」にならない!」という場合には是非参照してみてくださいね。
その他の注意点やグーグル関連のツール(グーグルアドセンス、Search Console、アナリティクス)の注意点は、以下を参照してみてください。
- 常時SSL化しても「保護されていない」表示がされる?!SSL化できない時の8つの注意点や対処法
- 常時SSL化でグーグルアドセンスの広告コードの変更は必要不要?Search Consoleやグーグルアナリティクスの設定変更の注意点
補足
補足1)SNSのシェアカウント数
ツイッターやfacebookなど、記事の下とかにあるシェアボタンに「シェアされた数」を表示している場合がありますが、SSL化に伴ってサイトのURLも「http://~」から「https://~」に変更となるため、シェアされた数はリセットされます。
「SNS Count Cache」というプラグインを使って、以前のカウント数を引き継ぐこともできるようですが、私の場合、そもそもシェアされた数を表示してなかったりするので、カウント数の引継ぎは特に試していません。
どうしても以前のシェアの数を引き継ぎたい、という場合には、
「SSL シェアカウント 引き継ぐ プラグイン」
などで調べてみてください。^-^;)
補足2)サブフォルダにワードプレスをインストールしている場合
ワードプレスをサブフォルダーにインストールしている場合、例えば
- 1)example.com に1つワードプレスをインストール
- 2)example.com/sub というところにも1つワードプレスをインストール
この場合のSSL化は、まず1)の大元を上で見てきた手順で行います。
(するとまず1がSSL化される)
1も2も同じドメインということで、サーバー関連は共通。
ということから、1がSSL化できれば、2は以下のワードプレスに関わるところだけを行えばOK。
- 手順2)ワードプレスの設定を行う
- 手順3)内部リンクを全て置き換える
私の場合も一部のサイトでサブフォルダーにワードプレス入れてますが、大元のSSL化完了後、サブフォルダーのワードプレスに対しては、手順2、手順3だけでSSL化ができました。
ブログ、サイトの常時SSL化まとめ
既に当たり前になっているサイトやブログの常時SSL化。
ここでは詳しく説明していますが、やることをまとめてみると簡単4ステップです。
- 事前)バックアップは必要に応じてとる
- 手順1)サーバーでSSL設定を行う
- 手順2)ワードプレスの設定を行う
- 手順3)内部リンクを全て置き換える
- 手順4)転送設定(リダイレクト)「.htaccess」編集
今は特に困ってないから、そのうちやれば良い、という考えもありますが、気が付けば他のサイトやブログはどんどんSSL化していきます。
検索エンジンの元締めグーグルはSSL化を強力に推し進めているため、SSL化されていないサイトは検索順位も落ちていく可能性、というか危険性も考えられますし、どうせやらないといけなくなるなら、早めに対応しておくのも良いかもしれません。
(私も様子をうかがいながら対応しているので人の事いえませんね(笑))
またブログで収益化を図りたい、どうしたらいいだろう、という場合には、以下のメルマガにも登録してみてくださいね。