エックスサーバーでワードプレスを使ってるブログ初心者の私がSSL化した方法を紹介します！

おはにちばんは、ふみえです(｡･ω･)ﾉﾞ

皆さんいかがお過ごしでしょうか？？

突然ですがブログを書いてるそこのあなた！

「SSL化」ってしていますか？？

SSL化した方がイイみたいだったから、

このブログはSSL化しました(+･｀ω･)ｂ

 

SSL化は超簡単だったんだけど、

SSL化した後の設定がややこしくて(つω｀*)

そこで私が設定した様子を書いてみます！(`・ω・´)

分かりにくいかもしれないけど、

参考にしてもらえると嬉しいです(*´ω｀*)

なお、今回のSSL化は師匠のぽぽろんさんに、

色々教えてもらえたので無事に出来ました。

本当にありがとうございました(●´ω｀●)

※ワードプレスをエックスサーバーで使ってる人へ向けた内容となっています(つω｀*)

 

SSL化ってなに？

SSL化する時に私がよく分からなかったことあれこれ

まだまだブログ初心者の私が、ブログのSSL化に挑戦してみました。師匠のおかげで出来たし、分からないことも教えてもらえました。私と同じ疑問を持ってる人におすそ分けしたくて書いたので、軽く読んでみてください！(｀・ω・´)ゞ

eimuf.com

この記事に書いてるんだけど、

SSL化すると記事が安全になります(●´ω｀●)

だから私はSSL化に挑戦しましたっ！(`・ω・´)

詳しくは記事をお読みください！

 

SSL化してみる！！

早速だけど、SSL化してみましょう！(・ω・)ノ

SSL化をする時の最終目標は、

URLのところをこんな感じで、

緑で表示させることです！！(`・ω・´)

これを目指して頑張るぞー！

 

SSL化の流れ

SSL化の流れは

1. エックスサーバーでSSL化をする
2. ワードプレスで色々設定する
3. 転送の設定をする
4. アフィリエイトとかのスキーム（httpのとこ）を変える
5. グーグルのインデックスをやりなおす

ざっくりこんな感じです！(/・ω・)/

エックスサーバーでSSL化させるのは一瞬なんだけど、

その後の設定が、かなり面倒です(;´･ω･)

だから今から新しくブログを始める人は、

最初からSSL化しとけば楽ちんですね(・ω・)ノ

 

注意！

今から色んな設定が続きます！

だから最初に、

バックアップを取っておきましょう！

※変なことになっても当ブログは責任を負いません・・・。

 

まずはエックスサーバーで設定！

SSL化って「サーバー」で出来るんです！(=ﾟωﾟ)ﾉ

知ってましたか！？

もちろん私は知りませんでした！(つω｀*)

エックスサーバーは無料！

全サーバープランで独自SSLが無料・無制限に利用可能に！「独自SSL」機能の強化のお知らせ

レンタルサーバー【エックスサーバー】からのお知らせ | 2016/06/30 全サーバープランで独自SSLが無料・無制限に利用可能に！「独自SSL」機能の強化のお知らせ

www.xserver.ne.jp

SSL化って、ググってみると、

1か月3,000円～みたいに、

有料のもあるんですね(´・ω・`)

でもエックスサーバーでは、

無料でSSL化することが出来ちゃいます！！！

エックスサーバー使ってて良かった(*´ω｀*)

設定してみる

サーバーパネルの「SSL設定」をぽち！

その後、ドメインを選択します。

 

（設定する時の画像を撮って無くて、設定後の画像ですみません）

「独自SSL設定の追加」をぽち。

 

大体こんな画面になります(;´･ω･)

「CSR情報(SSL証明書申請情報)を入力する」

っていう項目があるんだけど、

それにはチェックを入れずに右下の、

「独自SSL設定を追加する」をぽち！

それだけでSSL化出来るんです！(=ﾟωﾟ)ﾉ

ホントに一瞬でSSL化出来ちゃいます(*´ω｀*)

 

そういえば設定した直後に、

httpsで始まるURLにアクセスしても、

こんな画面になってブログは表示されません(つω｀*)

でも私は、2時間くらいでブログが表示されるようになりました！

 

無事にブログが表示されるようになったら、

玄関と裏口が使えるようになりました(・ω・)ノ

※玄関と裏口については前回の記事参照(;´･ω･)

※これで玄関と裏口が使えるようになったんだけど、ほとんどの人はまだ玄関からしか入ってきません。だって自分以外はhttps://eimuf.comっていうURLの「存在を知らない」からです。

 

ワードプレスで設定する

裏口が使えるようになっても、

ここから長い戦いが始まります(´・ω・`)

順番にやっていきましょー！(・ω・)ノ

 

SSL化したページに自分がアクセスできるようにする

まずはこれがお手頃だし、

最初にやった方がよさそうです(＾ω＾)

せっかくSSL化したんだし、

ダッシュボードもSSL化したURLにして、

安全に使えるようにしましょー！(+･｀ω･)ｂ

 

ワードプレスのダッシュボードの、

「設定」の「一般」をぽち。

すると「ワードプレスアドレス（URL）」と

「サイトアドレス（URL）」っていうのがあります。

 

そこに、

こんな風に「s」を加えましょう(＾ω＾)ノ

たったこれだけで、

ワードプレスでもSSL化したURLで編集できるようになりました！

 

※こんな風に、

ログインし直すように言われたけど、

普通にログインできました(＾ω＾)

これで無事にSSL化したブログになっています。

見に行ってみましょう！

 

じゃん！

確かにダッシュボードがhttpsで始まるURLになってるし、

そこから「サイトを表示」を押した先もhttpsで始まってます。

で、でも、

 

緑色になってません！！！

 

・・・実はこの設定、

ワードプレスの管理画面のSSL化と、

管理画面からアクセスする自分のブログのURLをSSL化

にしただけなんです(・ω・)ノ

よーするに、自分がアクセスするとこを裏口にしただけです。

これもSSL化の大事な設定なんだけど、

全体から考えると「おまけ」みたいな設定だったんです(つω｀*)

 

記事中のURLをSSL化する！

さて、おまけの設定が終わったところで、

本格的なSSL化の設定に入りましょう！(*´ω｀*)

 

前回の記事でも触れたんだけど、

緑色の表示をさせるためには、

記事内のリンクが全部SSL化したURLじゃないとダメなんです！！

 

ブログのURLはサーバーが、

• httpで始まるURL（玄関）
• httpsで始まるURL（裏口）

の2種類を一瞬で用意してくれました。

だからどの記事でも、2種類のURLがあります。

そこでよーく思い出してください！

 

ブログの記事に書いてるURLって、

まだ玄関じゃないですか？？(。´･ω･)?

 

サーバーは文章を書き換えてはくれません！！(=ﾟωﾟ)ﾉ

だから記事に書いてる「自分のブログのURL」は、

手動で変えないといけないんです！(つω｀*)

「自分のブログのURL」っていうと、

• 内部リンク
• 画像URL

こんなのがありますよね！

「内部リンク」はSSL化する前に書いた時のままだし、

「画像URL」もhttpで始まるURLを使ってるんです！

※「画像URL」もURLのひとつです。だからサーバーが玄関と裏口を作ってくれています！

例えば、

これは設定が終わった後に撮ったスクショだからhttpsになってるけど、

SSL化した直後はまだhttpで始まるURLだったんです(つω｀*)

 

だからSSL化をしたら、

公開されてる記事を全部読んでみて、

画像が貼ってあったり、内部リンクがあったら、

URLをhttpsで始まるURLにすれば設定完了なんです♪

・・・。

ってそれはさすがに大変です(´・ω・`)

そこで便利なプラグインの登場です！

「Search Regex」

このプラグインは、

「文字の置き換え」が得意みたいです(＾ω＾)

早速使ってみましょー！

 

プラグインの新規追加から、

「Search Regex」

で検索して、インストール、有効化です(＾ω＾)

なぜか花の画像が設定されています(=ﾟωﾟ)ﾉ

 

有効化したら、

「ツール」の「Search Regex」をぽち。

※「設定」じゃなくて「ツール」ですよ！

Search Regexの画面

こんな感じで入力してみてください！

• 「Source」ってところが「post content」
• 「Search pattern」に古いURL（httpを忘れずに！）
• 「Replace pattern」に新しいURL（httpsを忘れずに！）

ちゃんと入力出来たら、

真ん中の「Replace」をぽち。

すると・・・

こんな感じで、

ずらーーーーーーーっと表示されます(=ﾟωﾟ)ﾉ

 

緑の網掛けが古いやつ、

オレンジの網掛けが書きかえるやつです。

そのずらーっと表示されたやつをしっかり見て、

「自分のブログのURLのhttpで始まる部分」が、

「httpsで始まるURL」になってたら、

右側の「Replace＆Save」をぽち！

これだけで内部リンクも画像URLもSSL化するんです！(●´ω｀●)

※ふよーべーして、httpとhttpsしか入力しなかったら、外部リンクも全部httpsに変わっちゃいますよ～(;´･ω･)

確認してみる

再び「ツール」の「Search Regex」です。

今度はこんな感じで、

• 「Source」ってところは「post content」
• 「Search pattern」に古いURL（httpを忘れずに！）

だけ入力して、緑の「Search」をぽち。

これで何も表示されなければ、

記事の書き換えは終了です！(＾ω＾)

簡単だったでしょ！(+･｀ω･)ｂ

これでちゃんと緑になるはずです！！

※この時点でもまだ、ほとんどの人は玄関から入ってきます。でも記事中の内部リンクや画像URLは全部SSL化された裏口になっちゃいました。だから今は「玄関から入ってきたのに、画像と内部リンクのリンク先は裏口から見てる」っていう少し複雑な状態です(;´･ω･)

 

サイドバーとかファビコンも見てみる

えっと、

実は私、

さっきの設定だけじゃ緑色になりませんでした(;´･ω･)

 

私のブログが緑色にならなかった原因は、

サイドバーに表示させてる

「プロフィール」と「今日のおすすめ記事」でした。

それぞれのリンク先が、

玄関（http）のままだったんです。

だから裏口（https）に書き換えたら、

ちゃんと緑になりました！！！(●´ω｀●)

これでブログページのSSL化に成功です！！！(*´ω｀*)

 

もしも緑色にならなかったら、

サイドバーのURLとかファビコンとか、

そういうところをチェックしてみてください！(`・ω・´)

※これで無事にブログページがSSL化したけど、まだ誰もこのURLを知りません。だから誰も見に来てくれません。しっかり準備も出来た事だし、みんなに来てもらう設定をしましょー！！

 

Pz-LincCardが崩れた！

おまけです(つω｀*)

SSL化された記事をよく見ると、

ぽぽろんさんが作ってるプラグインの、

「Pz-LincCard」の表示が崩れていました(;´･ω･)

そんな時は、

「設定」→「Pzカード設定」に入って、

何も変更せずに、

「変更を保存」

をぽちっとするだけで直ります！

 

みんなに来てもらうようにする！

ここまでの設定で、

無事にSSL化したページが出来ました！！

ここまで出来れば9割は完成です！(*´ω｀*)

 

でもさっきからしつこく書いてるけど、

今はまだほとんどの人は玄関から入ってきます！

どうにかして、入り口を裏口に変えないといけません！

 

こっそり転送させちゃう

SSL化してもすぐにはインデックスが変わりません。

だからまずは、玄関からアクセスしてくれた人を、

裏口から入ってきたことにさせちゃいましょう！(=ﾟωﾟ)ﾉ

強引だけど、それが手っ取り早いし、

玄関がインデックスから消えれば、

転送させなくてもよくなるんだし！(*´ω｀*)

エックスサーバーで転送させる！

なんと！！

SSLの設定だけじゃなく、

転送の設定までサーバーで出来るんです！！(=ﾟωﾟ)ﾉ

パッと見ると難しそうだけど、

コピペするだけだから簡単だし一瞬です(*´ω｀*)

やってみましょー(＾ω＾)

 

サーバーパネルの「.htaccess編集」をぽち！

その後、ドメインを選択します。

 

すると、

注意表示が！(=ﾟωﾟ)ﾉ

素人でも大丈夫か心配だけど、

「.htaccess編集」へ進みましょう！

 

よく分からない言葉が書いてあるけど、

# BEGIN WordPress　と、

# END WordPress　の間に、

 

 

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>

 

 

↑これをコピペします！！

 

こんな感じで貼り付けることが出来たら

確認して保存すればOKです(＾ω＾)

スペースは開いてても開いてなくても関係ないです。

ホントにコピペだけだから簡単でしょ！！

ちなみに

さっきの文字列の意味を簡単に説明すると、

「httpsで始まるページにアクセスして来たら、https://アクセスしようとしてたサイトのドメイン（このブログではeimuf.com）/アクセスしようとしてたパーマリンク（ドメインの後ろに書いてあるとこ）に転送させる」

って感じです(・ω・)ノ

確認してみる

サーバーで設定できたら、

自分で玄関（http://で始まるURL）にアクセスしてみてください！

ちゃんと裏口（https://で始まるURL）に飛べたら成功です(＾ω＾)

 

アナリティクスとかの設定

ここまで出来たら後はおまけみたいなものです！

サクッと終わらせちゃいましょー！！

 

アナリティクス

アナリティクスは、

「管理」→「プロパティ管理」の、

httpのところを、

httpsに選びなおすだけでOKです(＾ω＾)

こんな感じですぐに設定できます！

 

アドセンス

アドセンスは、httpとかhttpsの部分がありません。

だから何もしなくても大丈夫みたいです(＾ω＾)

 

サーチコンソール

アドセンスやアナリティクスと違って、

サーチコンソールは面倒です(;´･ω･)

 

この画像に書いてある通り、

新しく作らないといけません(´・ω・`)

長くなりそうなのでここでは書きません！

「サーチコンソール　登録」

でググってみてください(/・ω・)/

Fetch as Googleする！

サーチコンソールに登録して、

Fetch as Googleをすることで、

ついにインデックスに登録されます！！(*´ω｀*)

これで検索結果から来る人も、

SSL化された入り口から入ってきます！

 

私はSSL化した後は、

トップページを「このURLと直接リンクをクロールする」

にしました。

全部の記事を1個ずつは大変だし(つω｀*)

 

ちなみにhttpsになっても、

Fetch as Google出来る数は、

今までのを引き継いでいました(=ﾟωﾟ)ﾉ

SSL化して10日経った様子

SSL化された方は、

少しずつインデックスされてる数が増えてきています。

のんびり待つのが大切ですね！

 

一方、前まで使ってたSSL化されてない方は、

がっくり減っちゃいました(;´･ω･)

この調子で全部消えて、

SSL化した方だけになるのを待つだけです(＾ω＾)

 

そういえば「クロールの統計情報」が、

SSL化した日にぐいっと増えました。

全部のページをFetch as Googleしたんだし、

当たり前と言えば当たり前かも(つω｀*)

そういえばこれも今までのを引き継いでます(=ﾟωﾟ)ﾉ

 

アフィリエイト

前の記事にも書いたけど、

http://のところを、

https://に書き換えました。

今はそれで様子見です(・ω・)ノ

 

SSL化したその後

よく分かんないけど、

SSL化してすぐは、PVがぐぐっと増えました。

その後はPVが減りました。

でもすぐに元通りになったので、

あまり焦らなくても良さそうです(＾ω＾)

 

それとSSL化した直後は、

トップページのPVが、

いつもは100くらいなのに、

なぜか1,000を超えています(=ﾟωﾟ)ﾉ

参照元の数と合わせて考えると、

検索結果にトップページが表示されちゃったんだと思います(;´･ω･)

私だったら、

検索して表示されたページにアクセスした時に、

トップページが表示されてたら、

目的のページが分かんないから直帰しちゃいます(;´･ω･)

※今はだいぶ安定してきていますよー(+･｀ω･)ｂ

 

まとめ

SSL化って、大変そうだったけど、

やってみると意外と簡単でした！

これからはSSLの時代になるみたいだし、

気楽に設定してみてください！(`・ω・´)

 

・・・ここまで書いといてあれだけど、

もしもアフィリエイトはSSL化されてないリンクだから、

アフィリエイトリンクの近くまで読み進めると、

緑じゃなくなるんです(´・ω・`)

そのお話はまた今度(●´ω｀●)

 

今回も最後まで読んでくださってありがとうございました(＾ω＾)