こんにちはしょうたです。
約一年前の話ですが、ロリポップ で運用しているWordPress（ワードプレス）サイトをSSLがする作業を行いました。
SSLとは、インターネット上のデータの通信を暗号化し、データの盗聴、改竄を防ぐプロトコルのことです。
ブラウザからアクセスしたページでアドレスバーの左に鍵マークがついているサイトはSSL化されている安全なサイトを意味します。
逆にSSL化されていないサイトは「保護されていない通信」と表示されユーザーに注意喚起されます。
今回はロリポップザーバーで運用しているWordPressサイトをSSL化（https）する手順や、それに従う運用ツールの設定変更を私の備忘録も兼ねて残しておきます。
ロリポップのWordPressサイトをSSL化する手順
①ロリポップのサイトで「独自SSL保護（無料）」を有効にする
まずはロリポップサイトにログインして、「セキュリティー」→「独自SSL証明書導入」をクリックします。
SSL保護されていないドメインにある「SSL保護したいドメイン」にチェックを入れ、「独自SSL（無料）を設定する」をクリックします。
SSL設定作業中という表示になったら、このまま５分くらい待ちます。
※独自ドメインにこの作業を適用すると、そのサブドメインも同時に作業が開始されます。
約5分で完了します。
ページをリロードしてSSLで保護されているドメインに「SSL保護有効」と表示されれば完了です。
以上でロリポップサーバーでの設定は終了です。
②WordPress（ワードプレス ）でサイトのURL設定を変更する
WordPress管理画面の「設定」→「一般」をクリックします。
WordPressアドレス（URL）とサイトアドレス（URL）を「http」の後に「s」を付け加えた「https」へ変更します。
ページを下にスクロールして「設定を保存」をクリックします。
③「.htaccess」でリダイレクトの設定をする
ロリポップにログインして、「サーバーの管理・設定」→「ロリポップ！FTP」をクリックします。
新しいタブで「ロリポップ！FTP」が開きます。
「.htaccess」ファイル内に下記の文を追記します。
※「.htaccess」に初めから記述がある場合は、その上に追記してください。
RewriteEngine on
RewriteCond %{HTTPS} !=on [NC]
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
「保存する」をクリックします。
④WordPress（ワードプレス ）内の内部リンクを修正する
WordPressの管理画面の「プラグイン」→「新規追加」をクリックします。
右上のキーボードの「Search Regex」を検索し「今すぐインストール」をクリックしインストール後に「有効化」します。
WordPressの管理画面の「ツール」→「Search Regex」をクリックします。
上枠にhttpのアドレス、下枠にhttpsのアドレスを入力して「Replace」をクリックします。
置き換えする対象URLと置き換え後のURLが表示されますので、置換前と置換後を確認して問題なければ「Replace &Save」をクリックします。
以下のように表示されれば、内部リンクの修正が完了です。
モバイル表示で鍵マークが表示されない問題が発生
PC版のブラウザでサイトを閲覧した場合はSSL化されている証の「鍵マーク」が表示されるのに、iPhone等のスマホで閲覧した場合に「鍵マーク」が表示されない事象が発生しました。
この原因と対処法がわかりましたので紹介します。
このように一部SSL化されない現象の多くは、サイト内に設置された一部の画像リンクに「http」が含まれていることが原因です。
ご覧のようにPCからの閲覧では「鍵マーク」が表示されておりSSL化されています。
しかし、スマホ（iPhone６sPlus）からの閲覧では「鍵マーク」の表示がなく、SSL化されていないことがわかります。
モバイル版まで完全にSSL化する為の作業 ※原因調査
SSL化を邪魔している原因の画像を探す手順を解説します。
まず、PCのGoogle Chromeでサイトを開き、「・・・」→「その他のツール」→「デベロッパーツール」をクリックします。
「Console」を表示します。すると画像のようにエラーがある箇所が表示されます。
赤文字のエラーが出てますが気にしないでください。私のレベルでは原因は分かりません…。お手上げです。
このようにPC表示では「http」に関するエラーはありせん。
どれでも良いのでモバイル端末を選択して、ページを再読み込みします。
モバイル表示にするとさっきまでなかった黄色い文字でのエラーが出てきたことがわかります。
黄色のエラーの文字を読むと「http」がなんちゃらかんちゃら書いてあります。
エラー分にある画像URLは、モバイル表示のヘッダーで使用されているものですので、モバイル端末で閲覧する際に表示されるヘッダー画像が「http」だったのが原因であると特定できました。
WordPressの管理画面の「外観」→「カスタマイズ」→「ヘッダー」内の「モバイルヘッダー背景画像」を「画像の設定」から再設定すると以下のように、モバイル表示でも「鍵マーク」が表示されるようになりました。
Blog運用で使用する各種ツールの設定変更について
Search Consoleの設定変更
Search Console（サーチコンソール）は今までhttpサイトとして設定していたものを引き続き使用することはできません。
今までのプロパティは削除して新しくプロパティを追加しましょう。
Google Analyticsの設定変更
・Google Analyticsにアクセスし「管理」→「プロパティー設定」へ
・デフォルトのURLをhttpsへ変更して保存
・Search Consoleの調整
Search Consoleの調整をクリックし、今まで紐付けされていたhttpの設定を１度解除します。
そして先ほどSearch Consoleで新しく設定したプロパティを紐付けします。
〆
以上でSSL化の作業は終了です。お疲れ様でした(´∀｀)
こういうたまにしかしない作業は、すぐ忘れてしまうので私用の備忘録として残しておきました。
同じくSSH化される方のお役に立てれば幸いです。
それではまた( ^_^)/~~~
コメント