ロリポップ！でSSL証明書申し込みをする｜SSL化手順２
この手順に関しては、ロリポップ！のサイトの方が詳しいのでリンクを貼っておきます。
こちらからサイトに入っていただき、ページ下部の「お問い合わせ」に移動。
上記のように検索バーに「ssl化」と入力し、「検索ボタン」をクリック。
さらに「サイト全体」「マニュアル」「よくある質問」と３つ並んでいるうちの「マニュアル内」をクリックすると、「独自SSLについて」という項目が出てきます。
そのページに入ると、中段あたりに、
画像のような「独自SSL（無料）のお申し込み・設定方法」という項目がありますので、そこの「証明書お申し込み・設定」をクリックすれば、分かりやすい手順を紹介していますので参考にしてみてください。
一応私の方でも簡単に説明していきますね。
ロリポップサーバーにログイン、「独自SSL証明書」の「証明書お申込み・設定」に入ります。
次に、タブの「SSL保護されていないドメイン」の中にある、SSL化したいURLにチェックをいれます。
当サイトの場合で申し上げますと、
「http://ochipapa.com」
や
「http://www.ochipapa.com」
などです。
そして「独自SSL(無料)を設定する」ボタンをClick。
すると「SSL保護申請中」というコメントが出現します。
どのくらいかかるかは不明ですが「５分くらい」と表示されます。私は３秒でした（笑）
そのまま待ってても変わらない場合がありますので、しばらく待ったらページの再読み込みを。
無事申請が通ると、”SSLで保護されているドメイン”タブに、申請したURLが”SSL保護有効”と記載されます。
これでオーケー。
この時点であなたのブログやサイトは
「http://」から始まるものと、「https://」から始まるものの２つが存在していることになります。
そのまま管理画面に記載されている「https://ochipapa.com」をクリックし、URLがhttpsに変わった、まったく同じ自分のサイトにたどり着けば成功です。
４０３エラーが出てしまった時の対処方法
しかし、「403エラー」などという表示がされた方がいるかもしれません。
おいおい、頼むよ。サイトが見られなくなるくらいならhttpのままのほうがまだマシだぜ？なんて慌てなくて大丈夫です。
私もネットで慌てていろいろ調べたら、WAFの設定してみろとか、今そんなの関係ねえだろって話ばっかり出てきて、慌てたのですが…。
実は、ただの時間待ちでした（笑）
数十分から数時間は変わらない可能性もあるそうです。
困った場合は、４０３エラーが表示されている状態でページの再読み込みをしてみてください。解決する場合もありますので是非お試しあれ♪
また、今とは違うブラウザ（Chrome、Explorer、Safari）などで、新しい「https」のURLを直接入力して検索してみるか、別の機器（スマホやPC）で検索してみるのも良いかもしれません。
それでも、403エラーを詳しく知りたい方は私が書いたわけではありませんが、分かりやすいサイトがありましたのでリンク貼っておきます。
WordPressの設定｜SSL化手順３
さて、これで今度はwordpressの方に戻って設定を続けていきましょう。こちらもロリポップ！様が非常に簡潔に紹介してくれていたので画像を貼っておきます↓
一応私の方でも紹介させていただきます。
次に、Wordpress管理画面から「設定 → 一般」設定を開きます。
「一般設定」にある以下の項目を変更します。
- WordPressアドレス（http://ochipapa.com）
- サイトアドレス（http://ochipapa.com）
すでに入力されているそれぞれのURLの「http」部分に「s」を足して、
- WordPressアドレス（https://ochipapa.com）
- サイトアドレス（https://ochipapa.com）
に変更。
「変更を保存」ボタンを押して完了。
内部リンクのhttpをhttpsに変更｜SSL化手順４
自分のサイトを確認してみましょう。
まだトラブルが起こる可能性があります。
例えば私の場合、サイトに貼り付けている画像が、一部非表示になっている。あれ？なんで写真が消えてるんだ？
あれ？おまけに、アドレスバーに、SSLの証であるロックのマークも見当たらない。
これ↓
これが次の難関です。
内部リンク、ソースコードに古いままのリンクコード、「http」が１つでも入っていると、こんな状態になります。「src」「a href」の後なんかを要チェック。
原因は、
「httpとhttpsが混在しているウェブページ扱い」
されているからです。
サイト内の全てのリンクが「https」になっていないと、Googleは許してくれません。ブラウザーによって違いますが、三角形に！マークなどがURL前後にに表示されます。
内部リンクや、imgの内部画像リンクを全てhttpsに書き直す
いやいや、サイト内の全てをhttpsに書き直すの？
そんなの無理。
ご安心ください。
世の中のデベロッパーが必ずそれを解決してくれるプラグインを開発してくれています。
今回はSearch RegexというWordpressプラグインで一括変換しましょう。
このプラグインは、いわゆる、エディターの機能でもおなじみの「検索・置換」をWordPress内の全てをやってくれる天才的なプラグインです。
プラグインSearch Regexで一気にhttpsに書き換え
例によってWordpressのダッシュボードから、このプラグインをダウンロードしたら、「有効化」します。
一旦ダッシュボードをトップに戻し、Wordpress管理画面の「ツール → Search Regex」を選択。
私のサイトURLを例えにすると、
- Source：さわらない
- Limit to：さわらない
- Order By：なにもさわらない
- Search pattern：http://ochipapa.com/（SSL化する前のあなたのURL）
- Replace pattern：https://ochipapa.com/（SSL化後のあなたのURL）
- Regex：だからさわらないってば
と、入力。
「さわらない」と記述したところは、わからない方は変更せずデフォルトのままにしてください。
ここまでやったら「Replace」ボタンをClick。
すると、どの部分をどのように変えるのかというリストがずらっと出てきます。
これを良くチェックして、変更前と変更後のURLに間違いがないか、変更になってはいけないところはないかを調べる。
さあ、全部の内部リンクを「https」に変えちゃいます。
何も不具合が起こりませんようにとちょっと緊張しちゃいますが、「Replace ＆ Save」ボタンをクリックしてください。
サイトをチェックして、問題なく画像やリンクが動いていればオーケー。
自分のサイトをチェックし、画像などがすべてうまくいっているか確認しましょう。
また、アドレスバーのURLに「保護された通信」と出ていれば成功です。
キャッシュのクリアはしましたか？
それでも「保護された通信」と南京錠マークが出てこない場合、一度試していただきたいのが、「キャッシュのクリア」です。
キャッシュとは、ネットで一度開いたサイトを一定時間ブラウザが記憶し、再訪問した時に一から読み込まなくても良いようにする機能です。これによりユーザーは読み込み時間短縮で、スピーディーにブラウジングを楽しめるのです。
しかし、記憶したページを開くので、まだソースコードをhttpsにする前のページを表示している可能性があるのです。
解決法としては「キャッシュをクリア」してみる必要があります。
各ブラウザーのキャッシュの消去法は結構ネットにあふれていますので割愛させていただきます。
「キャッシュ クリア 方法」などで検索すれば出てきます。
内部リンクURLを全てhttpsに変えてもダメだったら
実は、私はそれでもダメでした。まだ「保護された通信」と南京錠マークがでてきてくれません。
まだ、どこかに「http」が残ってしまっているようです。
このようにプラグインを使い、内部リンクを全て一括で「http」から「https」に変更しても、残ってしまう奴がいるんです。
こうなると、隅から隅までソースコードを探すしかありません。
そんなあなたに便利なツールを紹介します。
今回は、WindowsでもMacでも使えるGoogle Chromeというブラウザで紹介します。
まずは、Google Chromeであなたのサイト開きます。
WindowsならF１２（i macの方はoption+command+I）を押して「デベロッパーツール」を開きます。そして、「コンソール」「Console」タブを選びます。
すると、ソースコードがずらりと出てくるのですが、赤っぽい背景のコードを要チェック。
その中にまだ「http」のままの犯人がいます。一見わかりにくいですが、よくよくコードを見ていくと、犯人がわかります。
私の場合は、ウィジェットに貼り付けている「FC２ブログ」のバナーが「http」のリンクでした。
残念ですが私は「FC2ブログ」の集客効果よりも、ssl化の方が効果ありと見切りをつけてバナーを撤去。
無事に解決！
「保護された通信」と南京錠マークが出ました。
※現在はFC2ブログもssl化に対応したそうです。
さて、晴れてURLバーに、南京錠の鍵マークや、緑の文字で「保護された通信」と表示されたら、完了です！！
あと少しです！頑張りましょう。
httpsのサイトにリダイレクト設定｜SSL化手順５
最後に、リダイレクトの設定をしましょう。
リダイレクトとは、あるURLのページを開いた際に、ユーザーを特定のURLのサイトに自動で移動させる設定です。
この記事でも少し触れましたが、SSL化したあなたのドメインは現在「http://」「https://」の２つのURLが存在し、どちらでも閲覧できる状態です。
試しに、旧「http」のURLでサイトに飛ぶと、今までのように保護されていないページに飛びます。
そう、両方あるんです。
そして、それが問題なんです。
全く同じサイト、記事が２つ存在していると、
これじゃあ、せっかくSSL化したのに意味がありません。
だから「http」の古い方のサイトや記事へアクセスしたユーザーを、自動的に「https」の方に飛ばす設定をするんです。
それが「リダイレクト」という方法です。
やり方はいたって簡単なのでご安心ください。
やはりこちらも、ロリポップ！がわかりやすく説明してくれていますので参照ください。
お問い合わせの検索バーの中に、「リダイレクト」と入力し検索をすれば「URLの書き換え」というタイトルで方法を紹介してくれています。
一応、私のやり方も紹介します。
まずはロリポップにログインし、ロリポップFTPにログインします↓
メニューの「サーバーの管理・設定」から、「ロリポップ！FTP」に入ります。
今回、SSL化したブログやサイトのディレクトリ名をクリック。
私の場合は「ochipapa」というファイルにwordpressをインストールしたので、ここをクリック。
すると、フォルダの１つ下の階層（index.phpなどがある階層）に移動します。
そこに「.htaccess」というファイルがありますのでそこをクリック。
※場合によっては、「あなたのサイトのファイル」→「public_html」→ここに「.htaccess」のファイルがある場合もあります。
※サーバー契約時に最初に設定したサイトの場合、「.htaccess」はFTPを立ち上げた時に表示されるところにあります。
ここにこの後紹介するコードを追記をします。
ただ心配なので、今「.htaccess」内に記載されているコードをコピーして、万が一の時に復元できるようにしておきましょう。コピー&ペーストでテキストエディタやメモに貼り付けておけばOKです。
「.htaccess」をClickすると、ソースコードが出てきます。
# BEGIN WordPress
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ – [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]# END WordPress
プラグインによってはコードに若干違いがあるかもしれませんが、かまいません。
その先頭（一番上）に以下のコードを追記します。
RewriteEngine on
RewriteCond %{HTTPS} !=on [NC]
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
コピー&ペーストでOKです。
変更したら、”保存する”ボタンをクリックします。
以上で、リダイレクト設定は終了です。
試しに、わざと古い「http」のURLをアドレスバーに入力して開いてみてください。
「保護された通信」「https」に接続できれば成功です。
これでSSL化は完了です。