常時SSL化をするにあたってエラーが起きていろいろ大変だった曽幅りょうです。
無事復旧することができ、常時SSL化もできたので
SSL化の全体の流れと、注意点などを画像つきでまとめます。
とはいっても、SSL化は人によって違ってくるかと思いますので
あくまでも私が行った全行程をまとめます。
私はロリポップサーバーと、ムームードメインをお借りしているので
その２つを例にまとめます。
（とはいってもサーバーとドメインが関わってくるのは初めだけなので
違うサーバーやドメインの方も参考にしていただけるかと思います。）
常時SSL化でしなければならないこと
・サーバーで常時SSL化設定をする
・ワードプレスの設定からURLを『http://』から『https://』に書き換える
・プラグインを使ってホームページ内にある全ての『http://』を『https://』に変更する（プラグインは使用後削除してOK）
・301リダイレクトというものをして、『http://』に繋いだ場合強制で『https://』に飛ばすよう設定する（FTPからいじるか、プラグインを入れるか（プラグインは使用後削除してOK））
・グーグルアナリティクスやランキングに登録している人は登録URLの変更手続きをする
・SNSのシェアが初期化されてしまうので、プラグインで元に戻す（私はうまくできなかったので、ここでは説明しません。）
大まかに言ってしまえば上記の６つの設定をしたら常時SSL化はできてしまいます。
難しい部分は画像つきで解説します。さっそくやっていきましょう。
常時SSL化の流れ
ドメインのネームサーバー（DNS）設定を変更する
これはそれぞれのドメインによって異なります。
どこかにネームサーバー（DNS）設定できる箇所があるかと思います。
ネームサーバーが既にドメインと同一になっている場合はこの設定は省略してOKです。
ムームードメインの場合は
『マイページ>ドメイン操作>ネームサーバー設定変更』
から設定変更できます。
これをロリポップサーバーの方は『ロリポップ』にします。
これでネームサーバーがロリポップになりましたので、常時SSL化設定が適用できるようになりました。
サーバーで常時SSL化設定をする
これも借りているサーバーによって設定方法は違います。
今回はロリポップを例に説明をします。
ロリポップのマイページへ接続します。
『マイページ>セキュリティ>独自SSL証明書導入』
から設定します。
以上でサーバーの常時SSL化設定は完了です。
次にワードプレス側での設定をしていきましょう。
ワードプレスの設定からURLを変更する（ロリポップじゃない人はここから）
ロリポップではない人は、それぞれのサーバーでSSL化を
進めてここから参考にしてください。
ワードプレスのダッシュボードを開きます。
ワードプレスの設定画面から
赤枠の『WordPress アドレス (URL)』と『サイトアドレス (URL)』の欄のURLを
『http://～』から『https://～』に書き換えます。
書き換えたら、保存します。
これだけだと、ホームページ内にまだ『http://』が残っているので
ホームページを確認すると
『セキュリティで保護されたコンテンツのみ表示します』
というような黄色い警告が出てくるかと思います。
プラグインを使ってホームページ内すべての『http://』を
『https://』に書き換えて警告を消していきましょう。
プラグイン『Search Regex』を使用して『https://』に書き換える
まずはプラグイン『Search Regex』をインストールして、有効化します。
ワードプレス内で
『ツール>Search Regex』
とSearch Regexの設定画面へと進みます。
『Search pattern』には『http://自分のURL』
『Replace pattern』には『https://自分のURL』を入力します。
他はそのままでOKです。
入力をしたら、『Search』を押して、変更部分を検索しましょう。
検索して問題がなければ『Replace&Save』を押して確定しましょう。
今のままですと、記事内のみの
『http://』が『https://』に変更されただけなので
念のために上記画像赤枠の部分を他の項目に変えて
先ほどと同じように検索と置き換えをしておきましょう。
以上でホームページ内の『http://』を『https://』に書き換えることができました。
まだ『セキュリティで保護されたコンテンツのみ表示します』というような警告が消えない場合
警告が表示されない場合は次の項目へ進んで大丈夫です。
警告が出る方はSearch Regexで置き換えきれていない場合があります。
それはウィジェット上のものである可能性が高いです。例えばトップページにあるプロフィール画像など。
私の場合はトップのプロフィール画像や、テーマ設定からできるトップ画像などが置き換えられていませんでした。
調べるには、『http://』が残っていそうなページでF12キーを押します。
するとこのような画面になるかと思いますので
赤枠のコンソールを確認します。
すると『http://』が残っていることが確認できるかと思います。
（エラーがでていたときのスクリーンショットを取り損ねてしまったので
こちらの画像では確認できません。すみません。）
確認がとれたら、ワードプレスの各々の設定からその箇所を直しましょう。
修正して警告が表示されなくなったら次の項へ進みます。
301リダイレクトして『http://』に繋いだ場合強制で『https://』に飛ばすよう設定する
次に301リダイレクト設定というものをします。
現状では『https://』と表示されているかと思いますが、『s』を抜いてアクセスしてみてください。
鍵なしのページに繋がってしまいますよね？
（sを抜いて接続しても鍵マークがついてるよ！という方はこの設定はしなくてもOKです）
そうです。
今のままでは、『http://』に繋いだ際に、鍵のついていないページに飛んでしまいます。
なのでどのように繋いでも鍵マークがつくように設定していこうと思います。
301リダイレクト化する方法は２つあります。１つはプラグインを使用する方法
もうひとつはFTPソフトから編集する方法です。
どちらかを選んで設定してください。（両方する必要はありません）
プラグイン『WP Htaccess Editor』を使用して301リダイレクトする
『WP Htaccess Editor』というプラグインをインストールします。
↓ダウンロードはこちらから↓
上記ページからダウンロードしたファイルをFTPなどでワードプレスにアップできたら
ワードプレス左側のメニューからHtaccess>Htaccess Editorと進みます。
開いたページの１番上の行に
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R,L]
と入力します。
入力が終わったら、Seve fileを押します。
以上で設定は完了です。
ホームページを確認すると
上記のようにURL欄に鍵がかかった状態になっているかと思います。
FTPから.thaccessを編集して301リダイレクトする方法
FTPから301リダイレクトをする際に必要なソフトが２つあります。
１つはFTPソフト
もう１つはterapadです。
（メモ帳ではNGです。BOM設定というものができるterapadを使用するようにしましょう。）
この２つをインストールしておきましょう。
↓FTPのインストール方法・使い方はこちら↓
【初心者向け】FFFTPのインストール方法・使い方
まずはFTPソフトを開きます。
ワードプレスのトップにある『.thaccess』というファイルを探します。
これをダブルクリックで開いて、お好みの場所に保存します。
保存した『.thaccess』をterapadで開きます。
『.thaccess』をterapadへドラッグすると簡単に開くことができます。
開いたデータの１番上の行に
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R,L]
と入力します。
このように一番上の行に入力してくださいね。
次に保存するのですが、保存する際は注意が必要です。
『ファイル』から『文字/改行コード指定保存(K)…』を選択します。
赤枠の文字コードの部分を、『UTF-8F』に変更するのを忘れないようにしてください。
ここを『UTF-8』のまま保存して、サーバー上にアップするとエラーが生じます。
※BOM設定というものがあり
『.thaccess』ファイルを保存する際は
BOM無しで保存しなければならないというルールがあります。
『UTF-8』はBOM有りになり、『UTF-8F』はBOM無しになります。
terapadではなくメモ帳で保存すると強制でBOM有り
となってしまうため、terapadを使用しています。
保存ができたら、『.thaccess』をファイルをローカルディスクに移して
再度サーバーにアップロードします。
アップロードをしたら、『.thaccess.txt』という名前に
なっているかと思いますので、ファイル上で右クリックをして
『名前変更』を選択し、『.thaccess』に変更します。
また、『.thaccess』ファイル上で右クリックをして、次は『属性変更』を選択します。
するとこのような画面が出てきますので
赤枠部分の現在の属性を『604』に変更します。
変更をしたらOKを押します。
以上で設定は完了です。
ホームページを確認すると
上記のようにURL欄に鍵がかかった状態になっているかと思います。
https://になっているけど鍵マークがつかない場合
全てのURLを書き換えたし、リダイレクトもしたのに
鍵マークだけがつかないという方は
他にはテーマ設定からできる404ページの画像やAMPのロゴなど
（使用しているテーマによって設定できたりできなかったりしますが）
がhttp://のままになっているかもしれません。
404ページなんかは普段から表示されているページではないので
コンソールにもエラーとして出てくることもなく見落としがちです。
テーマ設定などにhttp://が残っていないか
隅から隅まで確認するようにしましょう。
読んでいただき、ありがとうございました。
もし今回の記事を気に入っていただければ、ランキングのクリックや記事の購読・下の方にあるはてブ追加やSNSのフォローをお願いいたします。
励みになりますので、どうぞ宜しくお願いします。
コメント