こんにちは。マノヒロミです。
IT弱者のワタクシですが、このブログを「常時SSL」化いたしました。
そもそもなんで常時SSLにしようと思ったのか?
理由は2つ。
- 「アメブロのすべてのページが常時SSL化した」というニュースを見たから
- エックスサーバーで契約している人は、無料でSSL化できると知ったから
まずひとつめの「アメブロ」について。
自分がアメブロを使っていないので知らなかったのですが、春くらいから常時SSL化が始まっていたのですね。
というわけで、重い腰をあげたというわけです。
ふたつ目のエックスサーバーについて。
このブログは、エックスサーバーを借りて運営しています。
これまた私はぜんぜん知らなかったのですが、エックスサーバーを使っている人は、無料でSSL設定できるようになったんですって。
普通にSSL化しようとすると、年間数千円ほどかかるらしいのですが、無料ならやらないとね!
という、けちくさい理由で始めました(笑)
SSL化するための手順
IT弱者のワタクシですから、他人様の知識に頼りまくりました。
全体的な流れ
全体的な流れは、こちらのサイトを参考にしました。
記事の通りにやっていけば、ほぼ問題なく常時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化するときの参考になれば幸いです!
