みゃーこみゃーこ

「SSL化」って何?

花桃花桃

簡単に言えば自分のサイトを守るために通信を暗号化することよ

みゃーこみゃーこ

それってどうして必要なの?

自分のサイトを心ない第三者からの改ざんなどから守るというセキュリティ面を強化するためね

 

サイトのSSL化はセキュリティ面で重要です。しかしそれ以外にもメリットがあります。

 

SSL化にはクレジットカード登録画面などだけに行うものも多いですが、最近はサイト内のコンテンツや画像など、すべてにおいての常時SSL化が推奨されています。

 

数年前に比べてサイトのSSL化が強く言われています。

 

花桃花桃

この機会にあなたのサイトも「SSL化」しましょう。

 

この記事では「SSL化」を行うタイミングとロリポップにおける「SSL化」の手順について解説していきます。

 

実は私、とても簡単なはずなのに、スムーズにいかず何回かつまづいてしまいました。

 

 

花桃花桃

ということで私が「SSL化」を行う際につまづいた部分にもフォーカスしてその対策も一緒にお伝えしますね。

 

SSL化のメリット

「SSL化」を行うことでどんなメリットがあるのでしょう?

  • 第三者によって通信を盗まれたり、書き換えられたりするリスクをなくす
  • フォームに入力する「名前」「パスワード」「クレジットカード情報」などの個人情報を守る
  • Googleでの検索順位への影響を良くする
  • サイトの表示速度を速くすることができる

 

SSL化のベストタイミング

みゃーこみゃーこ

SSL化が大事なんだというのはわかったわ。それならいつ行ったほうがいいの?

花桃花桃

もし可能ならばサイトを立ち上げてすぐがおすすめよ

 

みゃーこみゃーこ

それはどうしてなの?

花桃花桃

説明するね。

 

なぜ早めに「SSL化」したほうがいいかというとサイトを立ち上げて時間がたつとサイト内で変更すべきものが増えてしまうからです。

  • 記事が増える
  • 画像を使う
  • ヘッダー部分に画像を追加する
  • 自己紹介記事で画像を使いウィジェットにも画像URLが増える
  • アクセス解析などを入れた後だと設定のしなおしが出てくる

 

などなど、サイトを立ち上げて時間が経つと修正を行う内容がどんどん増えてしまいます。

 

私が初心者の頃は知らなかったのですが、自分のサイトで使った画像にもきちんとURLが設定されます。

 

その一つ一つを「http://」から「https://」に修正する必要が出てくるわけです。

 

なので記事も画像もまだ少ない「サイト立ち上げ後すぐ」SSL化におすすめのタイミングです。

 

ロリポップSSL化手順全解説

ロリポップのユーザー専用ページにログイン

ssl化 手順

 

ロリポップのユーザー専用ページになります。

 

ssl化 手順

 

ロリポップの「セキュリティ」→「独自SSL証明書導入」をクリック

 

ssl化 手順

 

「SSL保護されていないドメイン」をクリック。SSL化したいドメインにチェックを入れて「独自SSL(無料)を設定する」をクリック。

 

ssl化 手順

 

「SSL設定作業中」の表示が現れます。

 

5分ほど放置します。

 

ssl化 手順

 

5分ほど放置した後、検索窓の左横の丸い矢印をクリック。

 

これはそのページを再読み込みするものです。パソコンのキーボードの「F5」でもOK

 

ssl化 手順

 

先ほどのドメインの部分がうすい文字になり(保護されています)と表示。と同時に「SSL化作業中」の表示が消えます。

 

ssl化 手順

 

今度は「SSLで保護されているドメイン」をクリックすると自分のサイトが表示されています。

 

ssl化 手順

 

自分のサイトのURLを検索窓に打ち込んでカギマークになったら無事SSL化完了です。

 

花桃花桃

このときにURLは「http://~」ではなく「https://~」で打ち込みましょう。

 

うまくいかない時の対処法(体験談)

サイト立ち上げ後すぐにSSL化を行う場合は意外とすんなりいきますが、立ち上げて時間が経ったサイトは色々と修正を行う箇所が出てきます。

 

うまくいけば自分のサイトのURLを検索窓に打ち込んでサイトが表示されたときにきちんとカギのマークが出てきます。

 

しかしカギマークが出ない場合は出るまで完了していないことになります。

 

↓↓↓↓↓↓

ssl化 手順

 

 

花桃花桃

もしうまくいかない場合は次の部分を確認してみてくださいね。

 

記事と画像のURLの一括変更(プラグイン「Search Regex」)

サイトを立ち上げて時間が経っている場合は記事の数画像の数も増えているはず。

 

その場合、一つ一つのURLを修正していくのには数百もの書き換えを行わなければならないことも・・・・・

 

みゃーこみゃーこ

そんなの無理・・・・・

花桃花桃

大丈夫よ!プラグインで一括変更できます

 

ある一定の言葉やショートコード、タグ、URL、文章などを一度にまとめて置き換えることができる便利なプラグインがあります。

 

「Search Regex」

 

です。

 

ssl化 手順

 

「ダッシュボード」→「プラグイン」→「新規追加」→キーワードの横の枠に「Search Regex」を入力します。

 

「今すぐインストール」→「有効化」にします。

 

ssl化 手順

 

このプラグインを使う場合は「ツール」というところにありますので「Search Regex」をクリック。

 

ssl化 手順

 

①には今までのURLや文字、文章、タグなどを入力

 

②には置き換えたいものを入力

 

ここでは①に「http://」②に「https://」を入れてみました。

 

下に3つのボタンがあるのですが、

 

「Search」・・・・・・・①に入力した内容と一致する結果を表示

「Replace」・・・・・・①に入力した内容を置き換えた場合の結果を表示(これをクリックしただけではまだ置き換えは実行されていません)

「Replace & Save」・・・置換を実際に行い、セーブします。

 

一般設定の変更

「ダッシュボード」→「設定」→「一般」と進む。

ssl化 手順

 

 

  • WordPress アドレス(URL)
  • サイトアドレス(URL)

 

を変更します。

 

ウィジェットでのプロフィール画像

ssl化 手順

 

私はウィジェットでプロフィールを表示していました。その際に画像を使っていたのでその画像のURLもまだ「http://」のままでした。

 

花桃花桃

画像のURLを確認したい場合は「ビジュアルエディタ」ではわかりませんので「テキストエディタ」画面で確認してね。

 

テーマのカスタマイズでのヘッダー画像

自分のサイトをカスタマイズした場合にヘッダー画像を変更したり、画像を追加した場合はその画像のURLも修正が必要になります。

 

吹き出し機能の画像

ワードプレスのテーマによっては会話形式で文章を表示できる吹き出し機能があります。

 

その吹き出しに画像を使っている場合にもその画像のURLの修正が必要になります。

 

それでもカギマークが出ない場合

サイトのトップページで右クリックして検証を表示します。

 

※自分のサイトのURLを検索窓に打ち込んだときに出てくる画面がトップページになります。

 

検証を押すと(Chromeを使っている人はパソコンのキーのF12でもOK)次のような文字だらけの画面が出てきます。

ssl化 手順

 

「Console」をクリックします。

 

ssl化 手順

 

黄色い文字で「Mixed Content」(http://とhttps://が混在しているという意味)という表示が出てきます。

 

問題のある個所をクリックすると・・・・・

 

ssl化 手順

 

次のような箇所が。

 

内容を見ると「ヘッダーイメージ」という部分がまだ「http://」のままのURLだということを教えてくれています。

 

確認したらサイトのヘッダー画面に画像を使っていて、そのURLがまだ「http://」のままでした。

 

ssl化 手順

 

なのでその部分を「https://」に変更して保存したら・・・・・

 

成功です

 

やっとカギマークに変わりました。

 

花桃花桃

かれこれ2時間かかりました

 

301リダイレクトを行う

SSL化を行ったら完了したらすぐに行ってほしいのが301リダイレクト。

 

これは長く運営しているサイトには特に必要な作業になります。

 

301リダイレクトとは?

WebサイトのURLを変更したときに、元のURLから変更先のURLへ301リダイレクトすることでユーザーや検索エンジンが正しいページにたどりつくことを保証する最善の方法。

 

301リダイレクトの効果

今までの被リンクの評価が引き継がれるので、サイトやページの評価を下げずに検索順位を保つことができるのでSEO効果が期待できる。

 

301リダイレクトの方法

「FFFTP」を使える人はいいのですが、私は苦手なのでロリポップのユーザーページから行える方法で実行。

 

ロリポップのユーザー専用ページにログイン

ssl化 手順

 

「ロリポップ!FTP」をクリック

 

ssl化 手順

 

301リダイレクトを行うサイトを選んでクリック。

 

ssl化 手順

 

「.htaccess」をクリック。

 

下記のコードをコピーして指定の場所にペーストします。(青文字のドメインのところは自分のサイトのドメインを入力します。)

 

 

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://ドメイン/$1 [R=301,L]
</IfModule>
ssl化 手順
 
 
もともとあったコードの前にコピーしたコードを張り付けて「保存する」で終了。
 

「SSL化のタイミングと手順」のまとめ

SSL化はサイトの運営が長いものになるほどややこしくなります。

 

ですのでおすすめのタイミングはサイトを立ち上げてすぐです。

 

そうすればここで紹介したエラーもほとんどなくスムーズにSSL化が完了すると思います。

 

また301リダイレクトも必要ないですね。

 

私も失敗を重ねながらSSL化を行いました。でもサイトを立ち上げたばかりならもっと早く完了できるのではないでしょうか?

 

花桃花桃

この記事がお役に立てればうれしいです。