ブログを「常時SSL」にするための手順と、SSL化に失敗したところの修正方法

こんにちは。マノヒロミです。

 

IT弱者のワタクシですが、このブログを「常時SSL」化いたしました。

ブログを「常時SSL化」しました!! IT弱者でもなんとかできた!

 

そもそもなんで常時SSLにしようと思ったのか?

理由は2つ。

  • 「アメブロのすべてのページが常時SSL化した」というニュースを見たから
  • エックスサーバーで契約している人は、無料でSSL化できると知ったから

 

まずひとつめの「アメブロ」について。

自分がアメブロを使っていないので知らなかったのですが、春くらいから常時SSL化が始まっていたのですね。

マノヒロミ
日本最大級のブログサービスである「アメブロ」が全部SSL化したら、SSL化してないブログの方が少数派になっちゃうじゃん!
マノヒロミ
今でしょ!? 今やんなきゃヤバいよ、ヤバいよ!!

というわけで、重い腰をあげたというわけです。

 

ふたつ目のエックスサーバーについて。

このブログは、エックスサーバーを借りて運営しています。

これまた私はぜんぜん知らなかったのですが、エックスサーバーを使っている人は、無料でSSL設定できるようになったんですって。

普通にSSL化しようとすると、年間数千円ほどかかるらしいのですが、無料ならやらないとね!

という、けちくさい理由で始めました(笑)

 

 

SSL化するための手順

IT弱者のワタクシですから、他人様の知識に頼りまくりました。

全体的な流れ

全体的な流れは、こちらのサイトを参考にしました。

エックスサーバー独自SSLが無料!WordPressサイトをHTTPS化する方法

記事の通りにやっていけば、ほぼ問題なく常時SSL化することができます!

 

よくわからなかったところ

ただひとつ「HTTPS化の最終チェック」の項目で、「私のパソコンでは同じ画面が出てこない!」と軽くパニックに。

 

いろいろ触ってみたところ

チェックしたい自分のブログのページを開き、右クリックして「検証」をクリック。

 

出てきた画面で①の「Security」というところをクリックして、②の△マークをクリック。

△のところの数字が、SSL化できていないものの数ですね。

 

すると、③の欄にSSL化に失敗しているところがでてきました。

出てきたところで、なにが書いてあるのか初心者にはよくわからないのですが……。

でも、なんとなく「この画像かな?」「アフィリエイトのバナーかな?」くらいはわかるので、手探りでやっていきましょう。

 

これ、アドレスバーに「保護された通信」と出ないページすべてでやります。ひー。

 

常時SSL化できない原因とその対処方法

全体的な処理が終わったら、SSL化に失敗している場所を個別にお直ししています。

私の場合、わりと最近ライブドアからWordpressにお引越ししたので、それはもうたくさん失敗していましたよ。

 

以下、失敗しがちだったところを上げました。

トップ画像やロゴの画像アドレスがhttpになっている

この矢印のふたつ。ぴよちゃんのロゴと、ドーナツ&パンの写真。

 

画像URLが自動で書き換えできなかったので、再度登録し直しました。

 

WordPressのカスタマイズ画面から

それぞれ「サイトロゴ・アイコン」「トップページ設定」のところから、画像を登録し直しました。

 

他サイトから持ってきた画像のアドレスがhttpになっている

私の場合、ブログ引っ越し時にうまく画像URLを変換できず、旧ブログからそのまま画像を取り込んでいる部分があったのです。

旧ブログのアドレスがhttpのままなので、「通信が保護されていません」になってしまいました。

 

その画像は再度アップし直したのですが、万が一「元画像なくしちゃったよ~」というときは

  • がんばってサーバーにアップした中から探し出す
  • または、自分のブログの写真を右クリックして保存。それを再度アップ

 

で大丈夫です!

 

ランキングのバナーの画像がhttpになっている

これも、ライブドア時代の名残。

このバナーの残骸が、SSL化を邪魔していました。

なので「Search Regex」というプラグインを使って、バナーやら邪魔な文字列を消しました。

このプラグインは、ブログ全体で同じ文字列を一括変換(一括削除)をしたいときに使うものです。

Search Regexでの文字の一括変換(一括削除)の方法

「ダッシュボード」→「ツール」→「Search Regex」を選択

ブログ投稿画面の右上にある「テキスト」というところをクリック。

邪魔なバナーのコードをまるっとコピーします。

コピーしたものを①の「Search pattern」というところに貼りつけ。

②の「Replace pattern」のところは空欄のまま。

 

次に、③の「Replace」ボタンを押すと、下に変換(この場合は削除だけど)の候補がずらーっと出てきます。

間違いがないか確認したあと、④の「Replace&Save」のボタンを押すと、変換(削除)が完了します。

 

これを、削除したいものすべてに行います。

私の場合、「参加しています↓」の文字列とか、へんな「banner-22」なんていうものがあったので、これも一括で削除しました。

 

Twitterを埋め込んだコードの中にhttpが残っている

私はブログに、よくツイートを埋め込んでいます。

こんなかんじ。

 

このTwitterの埋め込みが、SSL化を邪魔していました。

こちらも先ほどの「Search Regex」を使って、コードを一括変換しました。

 

変換するのは2かしょ。

  • 「http://twitter.com/自分のアカウント」→「https://twitter.com/自分のアカウント」
  • 「http://pbs.twimg.com/」→「https://pbs.twimg.com/」

 

ようするに、httpにsを追加しただけです。

 

これで合っているかどうかはよくわかりませんが、とりあえずちゃんと表示されるし、「保護された通信」になったので大丈夫だと思います!!

 

「ヨメレバ」「カエレバ」の画像アドレスがhttpになっている

私のブログでも、商品や書籍の紹介をするときに、「ヨメレバ」「カエレバ」というツールを使っています。

このツールも、Amazonや楽天から画像を引っ張ってきているので、きちんと処理をしないと「保護された通信」になってくれません。

 

「ヨメレバ」「カエレバ」の変換については、こちらのブログを参考にしました。

初心者がWordPressでSSL化!大変だったのはカエレバ張替えと全ページチェック

 

「『Search Regex』を使ってカエレバシリーズをSSL化する方法」というところを参考にさせてもらってやってみたら、ほぼうまくいきました。

 

「ヨメレバ」「カエレバ」もすでに常時SSLに対応しています。

もし、うまく変換できなかった場合は、あらたに「ヨメレバ」「カエレバ」でリンクをつくり、貼りつければOKです。

 

ちなみに……。

SSL化とは別件で、「ヨメレバ」「カエレバ」のデザインをいじったら、半分くらいデザインが崩れてしまいました……(泣)

これについてはまた別の機会にブログに書こうと思います。

 

まとめ

以上、自分がうまくいかなかったところとその対処方法、参考にさせていただいたサイトのご紹介でした~。

 

念のため全ページ目視して確認しましたが、大丈夫そうです。

ま、大丈夫じゃなかったページとか、「直すのめんどくさいな……」ってページは非公開にしちゃったんだけどね!!

読者の方が見る分には、ちゃんと「保護された通信」になっているハズ。

 

私と同じようなIT弱者の方が、常時SSL化するときの参考になれば幸いです!

ランキングに参加しています

スポンサードリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です