【さくらのサーバーでSSL化】初心者にはhttp→httpsまでの道のりは長かった…(参考サイトまとめ)

ssl,初心者
タマ
こんにちは!タマです!
最近多くのサイトやブログで「SSL化」が進んでいますよね!

サイトを立ち上げてから時間が経ってから(サイトを作り上げてから)では、変更する事も多くなって難しい…
なんて話を聞いて、「しょうがないけど、今のうちにやるかぁ!」と、重い腰を上げて取り掛かることに。

でも、ネットやらサーバーやらの知識のない初心者にとってはとても長い道のりとなりました。

私のような間違いをして欲しくないので、
今回「SSL化で私が手こずった事」を記事にしました。

注意
今回はさくらインターネットのサーバー(スタンダードプラン)で「ラピッドSSL」を設定した時の流れです。
注意
私はインターネット初心者ですし、こちらはSSL化の手順を詳しく説明しているものではありません。
自分自身の備忘録として書いている感です。
あくまでも初心者の書いた記事という事で参考までによろしくお願いします。

さくらインターネットでラピッドSSLを申し込むのはコントロールパネルから!

私が選んだのはさくらインターネットの「ラピッドSSL」というプラン。

こちら、「さくらのコントロールパネルから」「日本ジオトラスト社のオンラインサインアップから」から、どちらから申し込むかによって方法が違ってきます。

簡単に言うと

さくらインターネットにてラピットSSLでの申込
「さくらのコントロールパネルから」簡単
「日本ジオトラスト社のオンラインサインアップ」ちょっとややこしくなる
タマ
私は、よく調べないままで申し込み、後者の「ちょっとややこしくなる」を選択してしまいました…。

SSL化するには「SSL証明書」というものをインストールする必要があります。

ラピッドSSLを「さくらのコントロールパネルから」申し込んだ場合、その「SSL証明書」が自動インストールされますが
「日本ジオトラスト社のオンラインサインアップ」から申し込んだ場合は自分でインストールする必要があります。

ポイント!ラピッドSSLを申し込む場合、サーバコントロールパネルから申し込むと、証明書のインストールが自動で行われるため、オンラインサインアップから申し込むよりも簡単に導入できます。

サーバコントロールパネルからラピッドSSLを導入する手順については、以下ページにてご確認ください。

「さくらのコントロールパネル」からの申込手順↓↓
【ラピッドSSL】サーバコントロールパネルからの申込み・導入手順

「オンラインサインアップ」からの申込手順↓↓
【ラピッドSSL】オンラインサインアップからの申込手順

タマ
申し込み方によって申し込みの難しさが変わるなんて知らなかったから、何も考えずにオンラインサインアップから申し込んでしまったよ…。

これからさくらインターネットでラピッドSSLを利用しSSL化を考えている方はコントロールパネルからの申し込みを推奨します(涙)

ダウンロードした認証ファイルを、申請時に指定したFQDN(コモンネーム)
配下にアップロードの意味が全くわからない!

 

ラピッドSSLプランに決定し、入金後すぐに「SSLサーバー証明書の申請が完了しました」のメールが届きました。

 

さくらインターネット,SSL

メールの内容を見てみましたが、
初心者の私は書いて事を見てもどうすればいいのかよくわかりませんでした…。

認証ファイルのアップロード手順をまとめると以下の通り。

 ▽STEP1
会員メニューにログインし、「契約情報」の一覧から該当サービスの「サー バ証明書」ボタンをクリックしていただき、詳細画面より認証ファイルをダウンロードしてください。

▽STEP2
ダウンロードした認証ファイルを、申請時に指定したFQDN(コモンネーム)
配下にアップロードしてください。

※認証ファイルは以下のいずれかのURLに配置
認証ファイル名は、fileauth.txtです

例)
http://<申請時に指定したFQDN(コモンネーム)>/.well-known/pki-validation/fileauth.txt
https://<申請時に指定したFQDN(コモンネーム)>/.well-known/pki-validation/fileauth.txt

※「/.well-known/pki-validation/」のフォルダはお客さまで作成ください

▽STEP3
認証用ファイルが配置されたことを認証局が確認し、証明書を発行します。

 

ーーーーーーーーーーー

 

タマ
え!?待って、ステップ2の「 ダウンロードした認証ファイルを、申請時に指定したFQDN(コモンネーム)  配下にアップロードしてください。」の意味が全くわかんないんだけど!?
そこで突き放さないでーーーー!!!

 

さくらの公式サイトにSSL化の詳しい手順が書いてあるので、頑張ってなんとか進めていたのでが、「認証ファイルのアップロード」というところでつまづきました。

 

タマ
超初心者の私は、おそらく知識がある人にとっては当たり前の「ファイルをアップロード」の意味がわかりませんでした、、、。

 

それで、救われたのがこちらの記事↓↓
https://designcolor-web.com/2017/09/27/sakura-wordpress-ssl/

 

タマ
FTPクライアントソフトを使って自分でファイルをアップロードしろってことなんですね!

超初心者の私はFTPクライアントソフトの存在すら、この時初めて知りましたよ…。

私(Mac使用)はFileZillaというFTPクライアントソフトをダウンロードして、そこから認証ファイルをアップロードしました。

FileZillaに関してはこちらをご参照ください↓↓
FileZilla プロジェクト日本語トップページ – OSDN

FileZillaの使い方に関してはこちらの記事を参考にさせていただきました↓↓
FTPソフト「FileZilla」の使い方【初心者向け】

こちらのページの通りに「(/home/アカウント名/www)に「.well-known」というフォルダを作成し、その中に「pki-validation」というフォルダを作成し、その中に「fileauth.txt」をアップロード」しましたが…

 

タマ
いつまで経っても、SSLサーバ証明書発行のメールが届かない!!!!!

 

頑張って調べましたがわかりません・・・。
さくらインターネットに電話で問い合わせてみると「www」ではなく「wp」内にフォルダを作ってアップロードしなければいけなかったのです…。

 

認証ファイルをアップロードする場所のスクリーンショットでのせておきます↓↓

さくらインターネット,SSL

この方法で認証ファイルはアップロードされ、さくらから「SSLサーバー証明書の発行が完了いたしました」のメールが届きました!

補足
認証ファイルをアップロードしてからSSLサーバー証明書が届く時間は私の場合は3時間ほどかかりました。
場合によっては1日くらい時間がかかることもあるようです。

絶対に変更してはいけないワードプレスアドレスを変更してしまった!

初心者のためいろいろわからない事がありすぎて、いろいろいじってしまいます…。

「もしかしたら今の時点でSSL化できてるかも?」

頭が疲れすぎて、変な妄想を抱き「ワードプレスアドレス」と「サイトアドレス」の両方を、まだSSL化できていないにも関わらず「http→https」に変更してみました。

すると…ワードプレスの管理画面からいきなりとばされます。

 

タマ
ワードプレスの管理画面にアクセスできなくなってしまった!!!!

 

調べてみてわかりましたが、ワードプレスアドレスは容易に変更してはいけなかったんですね……。

 

タマ
またよく調べずに、やらかしてしまった…。

 

もちろん自分では対処しきれないのでググるググる…。

 

こちらの記事を参照させて頂きました↓↓
wordpressのアドレスを変更してログインできないときの対処方法

上記記事の指示通り、認証ファイルをアップロードした時に使ったFileZillaを使用して「wp-config.php」の中に

「define(‘WP_SITEURL’, ‘<サイトのURL>’);」

を貼り付け、再度またサーバーにアップロードします。

「wp-config.php」「/home/<ユーザー名>/www/wp」の中にあります。

ワードプレスアドレス,変更 ワードプレスアドレス,変更

下の方につけると反映されないようです。
私は画像の位置に貼り付けました。

すると、またワードプレス管理画面にログインできるように!

管理画面は以前と変わりないですが、ワードプレスアドレスが灰色になっていじれなくなっています。

ワードプレスアドレス,変更
タマ
もう、あんな怖い思いしたくないからいじれなくてもいいよ…。

ポイント!ワードプレスアドレスは安易に変更するべからず!

ポイント!安易に色々なところをポチポチ押さない(涙)

SSL化後にサイトの表示が崩れた!

認証ファイルをアップロードした後に「SSLサーバー証明書の発行が完了いたしました」のメールが届きます。

さくらインターネット,SSL

そしてSSLサーバー証明書を手順通り申請してサイトをSSL化。

タマ
やっとSSL化が終わったあ・・・。

試しにhttp→httpsでサイトを確認してみます。

すると…

タマ
サイトの表示が崩れている!!!

どうやら見た感じCSSがきいていないようです。

そしてまたググるググる…

 

参照したのはこちらのページ↓↓
SSL(https)化した時に個別記事ページのCSSが適応されずレイアウトが崩れるトラブルの解決法-WordPressさくらインターネットの事例-

 

WordPressがSSL接続と判定せずに、http接続と判断しまっているため、サーバーに「これ、SSLだよっ!」って伝える一文を添えないといけないみたいですね。

// SSLを伝える
if( isset($_SERVER[‘HTTP_X_SAKURA_FORWARDED_FOR’]) ) {
$_SERVER[‘HTTPS’] = ‘on’;
$_ENV[‘HTTPS’] = ‘on’;
}

の文をさっきのワードプレスアドレスを変えてしまった時にいじった「wp-config.php」の中に加えて再度アップロード。

 

そうするとCSSが正常に戻り、崩れもなくなりました!

 

httpにはなったけど安全なサイトのステイタス、鍵マークが出てないー!

 

サイトのデザインの崩れもなおったし、これでやっとSSL化成功だぁ…。

httpsで自分のサイトを確認してみます。

自分、お疲れさ・・・

ちょ・・・ま・・・・

安全のステイタス、鍵マーク出てないやんー!!!!

 

ssl化

 

タマ
え!?鍵マーク出てないやん!?
まだなんか残ってるのおおおお・・・。

 

調べてみると、どうやら、サイトの中に「http」がまだ残っていて、 httpとhttpsの「混在コンテンツ」があると認識され、鍵マークが出ていないようです。

この状態では常時SSL化はまだ完成したと言えないのです。

 

タマ
あああああ、、、またか、、、。

 

後一息だ!頑張ってまたググるググる。

 

一つ一つhttp→httpsに修正していくとい記事もちらほら見かけて、
頑張ってやってみようと試みましたが…

 

タマ
やり方がよくわからないし、いじって変になたらこわいよ〜!

 

調べ続けていると、どうやらワードプレスのプラグインでどうにかできるみたい。

 

「さくらのレンタルサーバー簡単SSL化プラグイン」
というものを発見。

ssl化

プラグインを検索してみますが、「お使いのバージョンの WordPress ではテストされていません」と…

 

不安な文章が出ていたので、とりあえず安易に進めるのはまってみることに。

 

タマ
よくわからんけど、もうこれ以上しんどい思いしたくないよ・・・。

 

そして見つけたプラグインが「Really Simple SSL」

 

「Really Simple SSL」をインストールして導入する事で簡単にSSL化できるようです。

ssl化

「お使いの WordPress のバージョンと互換性があります」と出ていました!

 

これなら問題ないかな…。

 

と恐る恐る有効化してみると…。

 

やっと、鍵マークが出ましたっーーーー!!!!

ssl化

 

タマ
やったぁ!鍵マークがついたぁぁぁ!!!!

 

そうして、やっとSSL化をする事ができるようになったのです。

 

SSL化をした後はGoogleアナリティクスとSearch Consoleの設定を変更!

 

SSL化が終わって、本当にホッと一息でしたが、まだしないといけない事が残っています。

 

GoogleアナリティクスSearch Consoleの変更です。

参照させて頂いたのはこちらの記事↓↓
サイトのhttps化が終わった後は、GoogleアナリティクスとSearch Consoleの設定をちゃんと変更しよう

こちらの記事ではJUNICHIさんが動画つきでとーっても親切に方法を教えてくださっていたので、初心者の私でも簡単にわかりました。

Search Consoleを設定する前は自分のサイトを検索しても「httpのサイト」が表示されていました。

しかし、Search Consoleでグーグル先生に「SSL化したのでURLこっちでお願いします!」って伝えたらすぐに「httpsのサイト」で表示されるようになりました☆彡

 

ここで本当にめでたしめでたし・・・。

 

初心者の私は3日間ほどこの作業に費やしました。

(作業の時間ではなくミスしたり悩んでいる時間が多かっただけ)

初心者のSSL化のまとめ

 

  • 安易にボタンを押しているとどえらいことになるためポチッとする前は十分調べてから!
  • サイト運営者は、初心者でもある程度FTPとかの知識がないといけない
  • ゆくゆくSSL化しようと思っているなら早めの方がいい(上手くできれば問題ないが、もしできなかった時の凹み具合が半端ない)

 

一応、初心者の私でもSSL化できたのはできました。
これからされる方は私のようなミスをして無駄な時間を費やさないように頑張ってくださいね〜。

タマ
上記リンク先の記事を書いてくださった方には本当に感謝申し上げます(涙)
ありがとうございました!

おしまいっ!

ssl,初心者

よかったらシェアしてくださいね!

コメントを残す