httpsのsは、Secure（安全）のsですよね(~~)/
やったぁ(~~)V ご覧になってくださいました？
箱入り主婦baabaのアドレスバーの左側！！！！
やっと鍵マーク表示の常時SSL化になりました♥
この箱入り主婦baabaのブログサイトと、うちのおっさんのブログサイトの復旧するのにいちばんこだわったのは、鍵マークが表示される常時SSL化されているサイトにすること。
じゃってね、復旧してリスタートするのにアドレスバーの左側に「保護されていない通信」って表示されるのってめっちゃ嫌じゃし、せっかく箱入り主婦baabaのブログに来て下さった方も不安で怖いですもんね。
と言うことで、Xサーバーのサーバー管理面から無料でSSL化できると知って、設定にチャレンジして常時SSL化したんですけど・・・
URLはhttpsになっているのに「アドレスバーに鍵マークが表示されない」のはなんでじゃろか・・・？
鍵マーク（南京錠マーク）表示の【この接続は保護されています】になるまでは、日記のアップはしないでおこうって決めたものの、なんで鍵マークにならんのか意味がわかんない（＞、＜）？
はてさて、どーしたらいいものか・・・？
って、ちょこっと途方にくれていた箱入り主婦baabaです。
こんばんは(~~）/
でも！さすがです！
全世界でたくさんの人たちに使われているWordPress！
ネットで検索三昧していたら、超初心者で用語の意味もほぼ理解できない箱入り主婦baabaにでもわかりやすく問題に対処する方法を載せて下さっているサイトがあったのね。
でも・・・
それをするかしないか、その結果がどうなるかは・・・
すべて自己責任です（～～；）ｺﾜｲ
Mr.都市伝説 関暁夫さん風に言うと・・・
「するかしないかはあなた次第です！！」
う～ん。。。
でも、いじってまた変ことにならんじゃろうか（＞、＜；）ｷｮｰﾃｪﾝｼﾞｬ
でも、なにもせんかったら先には進まないし、悩んで立ち止まっていてもなーんも解決しませんもんね。
前に進まないと、いつまでも日記は書けないし(^ー^;)
勇気を出して・・・
Let’s Challenge！
結果は・・・
It’ll work out.
案ずるより生むが易し
なんとかなりました(~~)V
なーんて、いつものように日記の前置きが超長い箱入り主婦baabaです。
ごめんなさい(＾。＾;）ﾎﾟﾘﾎﾟﾘ
箱入り主婦baabaの常時SSL化
でも、箱入り主婦baabaの場合は、検索しながらの行き当たりばったりの実践なので、あんまり参考にはならないかもです。
でも、WordPress超初心者で、今までサーバーの管理画面とか見ることも触ったこともなかった箱入り主婦baabaが、こうして無事サイトを鍵マーク（南京錠マーク）表示の常時SSL化できたので・・・
もし、同じように困っている超初心者の方のちょこっとでも心のよりどころになってお役に立てれば・・・
なーんて思いながら、経験した流れを書いておきたいなって思います。
※この日記の最後の方にも書いてるように、もしかしたらもっとt超簡単に鍵マークにすることが出来てたかもしれなくて、箱入り主婦baabaはちょこっと遠回りしたかもだけど、とってもいい勉強になったので、とりあえず箱入り主婦baabaが常時SSL化にチャレンジした流れの順に書いておきますね(~~)/
Xサーバーを利用して無料でSSL化
まずは、Xサーバーで無料でSSL化であります。
きっと大丈夫ですよ！
箱入り主婦baabaでもなんとか出来たから~~
It’ll work out♡何とかなる
ただし、箱入り主婦baabaのようにするのは、めっちゃきょーてぇと思うけど・・・
すべて自己責任でお願いします(~~;）/
箱入り主婦baabaの場合、日記を書くのに利用してさせて頂いているサーバーとテーマは下記の通りです。
サーバーはXサーバー XSERVER : https://www.xserver.ne.jp
テーマーは人気のWordPressテーマ『Simplicity 2』
①エックスサーバーの管理画面からSSL設定を行う
1.エックスサーバーにログインする
XSERVER : https://www.xserver.ne.jp
2.管理画面の操作メニューのサーバー管理をクリック
3.ドメイン項目のSSL設定をクリック
4.SSLを設定するドメインを選択してクリック
5.「独自SSL設定の追加」をクリック
6.ドメインに間違いがないかを確認して
「独自SSL設定を追加する（確定）」をクリック
※ここで、「CSR情報(SSL証明書申請情報)を入力する」にチェックを入れる所があるんですが、個人ブログであれば無視してもOKとあったので、
箱入り主婦baabaはスルーしました(~~;)
じゃって、開いてみたらなんか入力するところがいっぱいあったけぇ、無視してOKなんじゃったら、余計なことはせんでもええかなって思って~~
7.「独自SSL設定を追加する（確定）」をクリック
SSL設定の一覧画面に、設定したドメインが表示されていれば設定完了です。
じゃけど、設定が反映されるまでには最大で1時間程度かかるそうなので「反映待ち」の表示が消えるまで楽しみにして気長に待ちましょう♪
おおっとぉ！これでほっとしとっちゃいけんのんね。
XサーバーのSSL設定は、Xサーバーのおかげで、ほんと気が抜けるくらい簡単にできたけど、これ以外にもしとかないといけないころがあるのね。
それは・・・
②WordPressをhttpからhttpsに変更する
WordPressをhttpからhttpsに変更しとかないといけないのであります(~~)/
1.WordPressにログイン
2.WordPressの管理画面の「設定」をクリック
3.「一般設定」をクリック
4.WordPressアドレスとサイトアドレスの項目が「http」となっているので、これを「https」にする。
ただ「http」の後ろに「s」を付けるだけであります(~~)/
それぞれのアドレスに「ｓ」を追加するだけ。
箱入り主婦baabaの場合は、WordPressアドレスとサイトアドレスの２ケ所をそれぞれ「ｓ」を付けて
https://hakoirisyufu-baaba.com を
https://hakoirisyufu-baaba.com にしただけです。
5.画面下部にある「変更を保存」ボタンをクリックして完了♡
これも、超初心者には簡単な設定なので、ほっとひと安心♥
でも、簡単な設定とは言え、この操作で誤った内容を入力・保存したりすると、WordPressにアクセスできなくなる場合があるため、慎重に行って下さいね。
でもって、もひとつこの先に、緊張感漂う作業が待っているのであーる（＠＠；）ﾃﾞｷﾙｶﾅｰ
③.htaccessに301リダイレクトを記述
「.htaccess」 って言葉に箱入り主婦baabaは、思わずビビってしまいました(苦笑)
そう言うのは、初心者はヘタにいじらない方がいいって書いてあるのを読んでそう思ってるから~~；
じゃけど、Xサーバーのマニュアルには、記述するコードまでちゃんと載せてあって、それを「.htaccess」に記述せよとあるのねヾ(;´Д`○)ﾉぁゎゎ
まずは、Xサーバーのマニュアルに書かれてるのを載せさせていただくと・・・
独自SSLの設定が完了した時点では、自動的に「https://～」のURLへ転送されません。
Webサイトにおけるすべての表示を常時SSL化する場合は、「.htaccess編集」で以下の記述を追加します。
RewriteEngine On RewriteCond %{HTTPS} !on RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]「http://～」のURLでアクセスした際、自動的に「https://～」のURLへ転送されていれば設定完了です。
ん~っ、簡単そうだけど、勇気いります！
でもなんで、301リダイレクトってせんといけんのん？
それは・・・
常時SSL化とは新たに「https」のアドレスが使えるようになることで、何もしなければ「https」と「http」が両方閲覧できる状態となるんだそうです（＠o＠；）ｲﾐｶﾞ ﾖｳ ﾜｶﾗﾝｹﾄﾞｰ
つまりは、何もしないと
https：//hakoirisyufu-baaba.com と
http：//hakoirisyufu-baaba.com の２つのURLがWEBにはある状態になるんだそう（＠o＠；）ｲﾐｶﾞ ﾖｳ ﾜｶﾗﾝｹﾄﾞｰ
となると、２つのURLの中身は全くおんなじだからGoogleに重複コンテンツとみなされ正しい評価をしてもらえないこともあるので、http:にアクセスしてもhttps://に転送されるようにしとかないといけないんだそうです(~~)/
それが「301リダイレクト」なんじゃって。
ｳｹｳﾘﾃﾞｽｹﾄﾞ・・・ﾎﾟﾘﾎﾟﾘ
と言うことで、することは簡単なんだけど初心者には勇気がいる作業！
「.htaccess」に記述にチャレンジ(~~)/
って言っても、入力する必要はなくって、まるっとコピーして、「.htaccess」の中に貼り付けすればいいんだそうであります♪
1.Xサーバーのサーバーパネルへログイン
2.「.htaccess編集」メニューをクリック
3.「.htaccess」を編集するドメインを選択してクリック
4.「.htaccess編集」タブをクリック
ここにXサーバーが載せてくれてる「301リダイレクト」の記述を追記するって言うかコピーを貼り付けるんですが・・・
箱入り主婦baabaは、めっちゃ緊張しましたよ。
じゃってね、恐れさせる訳じゃないですけど・・・
「.htaccess」に誤った入力をすると、「.htaccess」ファイルが機能せず、最悪の場合、Webサイトが表示されない可能性もあるんです！！！
なので、コードを変更したり、書き加える前に「.htaccess」に元々記載されている内容をコピーしてメモ帳などに控えておくようにしといてくださいね。
何かあったら、バックアップを取っておいたテキストファイルをまるごとコピペすれば元に戻せるみたいなので(~~)
「.htaccess」にうっかり余分なスペースとか追加すると、エラーが出たりするので、何かあった時は、コピーしてバックアップを取っておいたテキストファイルをまるごとコピペすれば元に戻せるそうなので、テキストファイルのバックアップは忘れずとっときましょうね。
転ばぬ先の杖であります（~~；）
でも、「.htaccess」のどこに追記記述って言うか、どこに貼り付けしたらいいんじゃろか？
って困ってる方いませんか？
もしかして箱入り主婦baabaだけ（～～；）？
箱入り主婦baaba、Xサーバーの指示で「.htaccess」に記述を貼り付けする時に、初心者なので、どこの部分に貼り付けたらいいのか、さっぱりこっぱりわかりませんでした＝＝；
下手なところに貼り付けして変なことになったらどうしようかなって怖くて怖くて！
なので、CSSの編集の時みたいに、恐る恐る一番最後に貼り付けしてたんですけど。。。
うっきょぉ（＠＠；）/
検索してみたら、一番上の行に貼れと書いてあったのね！！！
とりあえず、サイトを復旧するにあたってアドバイスをして貰ってたXサーバーのサポートにメールを送ったら、きっちりまるっとわかりやすく「.htaccess」の追加例の記述を載せてくれて返信が来ました(~~)ｱﾘｶﾞﾀﾔｰ♥
Xサーバーのサポートからの返信(~~)↓
ピンクの太字にしてあるところが「301リダイレクト」の追記部分です。
「.htaccess」へのWEBサイト常時SSL化の追記につ
きましては
最終行に追加をするのではなく、以下のように先頭行から
追記をしていただければと存じます。▼追加例
————————————————-
RewriteEngine On
RewriteCond %{HTTPS} !on
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L] SetEnvIf Request_URI “.*” Ngx_Cache_NoCacheMode=off
SetEnvIf Request_URI “.*” Ngx_Cache_StaticMode# BEGIN WordPress
# “BEGIN WordPress” から “END WordPress” までのディレクティブ (行) は
# 動的に生成され、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
————————————————- WEBサイト常時SSL化の追記はWordPressのパーマリ
ンク設定より
下の行に追記されると正常に動作しないことがございますので
上記のように追記をして挙動の確認をお願いいたします。何か、ご不明な点などございましたらお気軽にお問い合わせくださ
い。
何卒よろしくお願いいたします。
ってことで、箱入り主婦baabaみたく間違って下の方に貼り付けたりしないでくださいね（～～；）ｵﾊｽﾞｶｼｲ
5.コピーしたコードを一番上の行に貼り付けます。
この時、元々合った記述は1文字も消さないように気を付けてください。
6.「.htaccess」追記したら、「確認画面へ進む」をクリック
7.内容を確認し、間違いがなければ「実行する」をクリック
8.ブラウザで確認してみる
アドレスバーに「http://自分のドメイン名」を入力してアクセスしてみて、「https://自分のドメイン名」にリダイレクトされてれば完了です♪
これで、Xサーバーを利用しての無料SSL化は終了！
文字で書くと大変な作業のように感じるけど、
「エックスサーバー ＋ ワードプレス」のSSL化は思ってたよりも簡単にできます！
何よりも無料でSSL化できるのはいいですことですよね♥
ん？
でも、あれれれれ？
Xサーバーを利用して無料でSSL化して
URLはhttpsになっているのに
「アドレスバーに鍵マーク（南京錠マーク）が表示されない」のはなんでだろ？
またひとつ課題が増えたわぁ（～～；）
検索検索！
鍵マークが表示されない原因の混在コンテンツをプラグインで解消
常時SSL化を行ってURLが「https～」に変わっただけで安心していたけど、肝心のアドレスバーの左側に「保護されていない通信」って表示されたらなーんもならんですよね。
原因を検索してみたら・・・
鍵マークが表示されない原因は混在コンテンツ！
混合コンテンツとは、通信が暗号化されているhttpsのページ内に、通信が暗号化されていないhttpのリソース（画像、動画、スクリプトなど）が読み込まれている状態のことです。
つまりは、常時SSL化してURLはhttpsになっているのにアドレスバーに鍵マークが表示されない原因は、サイト内にhttpsとhttpが混在しているからなんだそうであります。
これを修正しなくっちゃいけないんだそうですが・・・
Google Chrome のデベロッパーツールを使って、httpのままになっているエラーを探して、ひとつひとつそれをhttpsに修正する方法があるんだそうですが・・・
初心者の箱入り主婦baabaには、何が何だか？？？
ハードルが高すぎて無理なので、検索してて他の方も使っているというプラグインを使ってみることにしました(~~)/
Search Regexプラグイン
Search Regexプラグインは過去に投稿した記事の内容を一括置換することができるプラグイン。
記事の本文やコメントの内容など、対象を指定して指定した文字列に一致するものを一括して別の文字列に置換することができるんだそうです。
これを使って、箱入り主婦baabaは「http://~」を「https://~」に一括置換する方法にチャレンジしてみました(~~)/
1.WordPressの管理画面の「プラグイン」の『新規追加』をクリック
2.キーワードに「Search Regex」と入力して検索
3.「今すぐインストール」して「有効化」をクリック
4.WordPressの管理画面の「ツール」の中の「Search Regex」をクリック
5.空欄にURLを入力する
（英語表記なのでめっちゃ分かりづらいです＝＝。）
『Source』Post content 記事本文中の文字
『Limit to』No limit 制限数無し
『Order By』Ascending 昇順に検索
ここまではデフォルトで設定されているそうなので、箱入り主婦baabaは触りませんでした~~
肝心なところは、下記の２ケ所であります。
ここの空欄に置換したい文字、ここではURLを入力していきます。
『Search pattern』 修正したい文字（http://~）
『Replace pattern』 修正後の文字（https://~）
1番目の空欄には『http://~』を、2番目の空欄には『https://~』をそれぞれ入力しました。
6.「Search」の青いボタンをクリック
これをクリックすると「Search pattern」で入力した文字を探してくれます。
7.表示されたURLが『http://~』が『https://~』に全部正しく置換されているか確認する。
8.「Replace」をクリックすると置換してくれます。
「Replace＆Save」は、クリックすると、探すのと置換を同時にしてしまうので要注意です！
いきなり置換してしまうのね（＠0＠;）
だから、『Replace pattern』に修正したい文字を入れずに空白のまま、うっかり「Replace＆Save」をクリックすると大変なことになっちゃうんだそうですよ。
空白だと修正したい文字がないので探しようがないですもんねーー；
また、一度置き換えして保存したものはもう一度置き換え直す方法以外では元に戻すことはできないので、使用する場合はどの文字列を変更したかを覚えておくかとか控えておいた方がいいです~~
そんなこんなで、『Replace & Save』を置き換えする時はしっかり確認してからクリックしてくださいね。
これでもう大丈夫！
全部「https」に置き換えられてるはずだから、鍵マークになってるよね！
って思って、ブラウザを確認したら・・・
いやーん（／ー。）
まだ鍵マークがついてない・・・
なんでなん？？？
まだ混在コンテンツが残ってるんやろか～～？
でも、まだあきらめきれないので「鍵マークが表示されない」で検索していたら、めちゃめちゃ簡単にSSL化できるプラグインがあるんですね！！！
それが「Really Simple SSL」
Really Simple SSLプラグインで、あっと言う間に鍵マーク表示になったわ~~
Really Simple SSLはその名の通り、簡単にSSL化ができるプラグイン。
サイトのURLをSSL化し、さらにリダイレクト設定まで行ってくれる優れもの！
使い方はとてもシンプルであります♥
サーバーでSSLを設定して、
Really Simple SSLの「はい、SSLを有効化します。」を
クリックするだけ(~~)/ﾌﾞﾗﾎﾞｰ★
つまりは、最初の方で書いた【Xサーバーを利用して無料でSSL化】のところの「①エックスサーバーの管理画面からSSL設定を行う」をした後、Really Simple SSLの「はい、SSLを有効化します。」をクリックするだけ。
クリックするだけで、
http://から始まるURLがhttps://から始まるものに置換され、http://から始まるURLをhttps://にリダイレクトする設定も自動的に行われるんです！
なんてこった、ぱんなこった！
箱入り主婦baabaのサイトも、あっと言う間に鍵マークのサイトになりました♥
1.WordPressの管理画面の「プラグイン」の『新規追加』をクリック
2.キーワードに「Really Simple SSL」と入力して検索
3.「今すぐインストール」して「有効化」をクリック
4.WordPressの管理画面の「ツール」の中の「Really Simple SSL」をクリック
5.「はい、SSLを有効化します。」をクリック
もっと早く知っていたら、
「.htaccess」に記述とかドキドキしながらしなくて済んだかも~~；
「Search Regexプラグイン」でドキドキしながら文字を置換しなくて済んだかも~~；
このプラグインを使用すると、カンタンにエラーを起こすことなくあなたのサイトをＳＳＬに対応するようにしてくれます。
って書いてあったけど、ほんとじゃったのね♥
初心者には、超ありがたいプラグインさまであります♥♥♥
じゃがっ！
注意しないといけないのは、このプラグインが有効化しているときだけSSL化されてるということ！！！
間違ってこのプラグインを無効化してしまったり、
とってもシンプルで便利だった【Count per Day】みたいにプラグインの提供が中止されるなどで、このプラグイン「Really Simple SSL」自体が使えなくなってしまうと、SSL化が解除されてしまうので、気を付けなくっちゃです。
どうかどうか、いつまでもプラグイン「Really Simple SSL」が提供されますようにと祈るばかりな箱入り主婦baabaなのであります(~~)/
箱入り主婦baabaのつぶやき
すんごく長い日記になってしまいましたが・・・
やっとこさ、箱入り主婦baabaも鍵マーク表示の【この接続は保護されています】のサイトになりました♥
Really Simple SSLプラグインのことをもっと早く知っていたら、もっと早く鍵マーク表示になってたかなって、ちょこっと遠回りしちゃったかなっとも思うけど・・・
「301リダイレクト」「.htaccess」「混在コンテンツ」「文字列の一括置き換え」などなど、とっても勉強になりました(~~)/
まだまだわからないことだらけだけど、安心できるサイト目指して頑張りますー♪
今のところの問題点は、箱入り主婦baabaは
XサーバーでのSSL化する一連の作業をした後で、 Really Simple SSL を使ってSSL化をしてダブルで使用しているので、ページの表示速度が落ちているかもとのこと～～；
どちらかにすればいいのかもなんだそうですが・・・
今はまだ怖くてできませーん（～～；）
そのうち、もっといろんなことがわかるようになったら、ページの表示速度の件も考えてなんとかしなくっちゃです。
頑張れ！ワタシ！
httpからhttps化することは、とっても難しいように感じますが、一つ一つ順を追って作業していけば初心者でも設定できるんですね。
特にレンタルサーバーを利用している方は簡単に設定することができます。
【この接続は保護されています】の鍵マーク表示になると
これって、こうして書いてる本人もなんだかほっとします。
箱入り主婦baabaもやっと鍵マーク表示のサイトになりました♥
これからも、どうぞよろしくです(~~)/
