WordPressブログをSSL化!【https】にするための全手順~準備編~

↑こちらをご覧になっていない方は先にご覧下さい(^-^)

 

ではWordPressブログSSLの操作をご紹介していきますね!

やり方自体は難しくないので、ゆっくりじっくり進めてきましょう。

 

エックスサーバーでSSL設定をしよう!

①まずはエックスサーバーのサーバーパネルにログインします

SSL化

矢印

②一番右の列の【SSL設定】をクリック

SSL化

矢印

③ドメイン選択画面が開くので、今回SSL化したいドメイン【選択する】をクリック

SSL化

矢印

【独自SSL設定の追加】タブをクリック

SSL化

矢印

サイトを選択(WWW付きでOK)して【独自SSL設定を追加する(確定)】をクリック

SSL化

『CSR情報(SSL証明書申請情報)を入力する』はチェック不要です

矢印

⑥このような画面になって・・・

SSL化

矢印

⑦このような表示になります。反映まで最大1時間とのことなのでしばらく待ちましょう(^-^)

SSL化

矢印

⑧時間が経ったら【SSL設定の一覧】タブをクリックして【SSL用アドレス】をクリック

SSL化

矢印

⑨すぐにクリックしてみたら。。。

SSL化

こんな表示になりました。まだ反映されていないとこうなります(^^;)

矢印

⑩15分くらい経ってからクリックしたらきちんと私のブログが表示されました(^-^)

SSL化

 

エックスサーバーでの操作は以上なので閉じてOKです♪

 

WordPressのURLを変更しよう!

①WordPressダッシュボードの『設定』から【一般】をクリック

SSL化

矢印

②一般設定の赤枠部分のURLを2つ変更していきます

最初は【http】なので↓

SSL化

どちらも【https】に変更します↓

SSL化

矢印

【変更を保存】をクリック

SSL化

矢印

④WordPressの管理画面はこのように↓『保護された通信』の鍵付きの状態になりました!

SSL化

※ここまでの操作で、ブログ自体はSSL化が完了しています。

ただ、完璧にできているわけではありませんので、まだ続きます(^^;)

 

ブログサイト内の画像とリンクのURLを【Search Regex】で置き換えよう!

今の状態は、ブログ自体のURLは『https』になったけど、ブログ内の画像やリンクのURLは『http』のままです。

混在している状態ですね(^^;)

記事数や使用している画像の数によっては、手動で貼り直してもいいのですが、

私は数も多くて面倒(・・・と言うか時間のムダ)なので、

Search Regex】というプラグインを利用して一括で置き換えました。

 

【Search Regex】のインストールと有効化

①ダッシュボードの『プラグイン』から【新規追加】をクリック

SSL化

矢印

右上の検索窓【Search Regex】と入力すると、左の赤枠のように表示されます

SSL化

矢印

【今すぐインストール】をクリック

SSL化

矢印

④ボタンが【有効化】に変わるのでクリック

SSL化

以上でインストールと有効化は完了です!

 

【Search Regex】の操作方法

①ダッシュボードの『ツール』から【Search Regex】をクリック

SSL化

矢印

②赤枠の部分だけ入力します

SSL化

  • Source・・・Post content(初期状態)
  • Limit to・・・No limit(初期状態)
  • Order By・・・Ascending(初期状態)
  • Search pattern・・・SSL化する前のあなたのブログのURL(http~)
  • Replace pattern・・・SSL化後のあなたのブログのURL(https~)
  • Regex・・・チェック不要

すべて入力したら【Replace】をクリック(まだ一括置換えはされません)

矢印

③どこがどのように置換わるのか、リストが表示されるので確認しましょう!

たくさん出てくると思いますが、がんばってすべて目を通して確認しましょう。

 

『http』が『https』に置換わるだけなんですが、たまにこんなのが出てきたりします↓

SSL化

この場合はメモしておいて、あとで確認しましょう。

矢印

④確認したら上に戻って【Replace&Save】をクリック

SSL化

矢印

⑤『(数字) occurrences replaced』と表示されたら置換え完了です

SSL化

※ただし、このプラグインは『ウィジェットエリア』の画像やリンクは置換えができないので、後でまとめて修正していきます。

 

.hataccessに301リダイレクト用のコードを記載する

今までの私のブログのURLは『http://koemi-affili.com』でしたが、

ここまでの操作で『https://koemi-affili.com』にURLが変わりました。

 

http時代に私のブログのURLをお気に入り登録してくださった方がいらっしゃったとしたら、

URLが変わってしまっているので、エラーになってしまいます。。。

レポートやメルマガにも、今まではhttpのURLを記載していましたし、

すべてエラーになってしまうのは大変なことですよね(^^;)

 

なので、httpのURLへのアクセスを、httpsのURLに自動的に転送できるようにしていきましょう♪

FTPソフトを使って『.htaccess』というファイルを編集していきます。

 

※FTPソフトからのファイル編集方法はこちら↓を参考になさってください。

テーマの編集はFileZilla(FTPソフト)でを使って安全に!

 

リモートサイト【SSL化したドメイン】をクリック

SSL化

矢印

【public_html】をクリック

SSL化

矢印

③『.htaccess』を探して右クリック

SSL化

矢印

【ダウンロード】をクリック

SSL化

矢印

⑤デスクトップにダウンロードされるので、バックアップをとっておきましょう(FTPソフトは開いたままにしておきます)

SSL化

※.htaccessはとても大事なファイルなので、必ずバックアップを取っておいてください

矢印

⑥『.htaccess』をTeraPadなどのエディターで開きます

SSL化

矢印

⑦開いた『.htaccess』の先頭にこの記述を追記します

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


こうなります↓
SSL化
矢印
上書き保存をして閉じましょう
SSL化
矢印
⑨FTPソフトに戻り、ローカルサイトの『.htaccess』を右クリック
SSL化
矢印
【アップロード】をクリック
SSL化
矢印
⑪『上書き』にチェックが入っていることを確認して【OK】をクリック
SSL化
これで『http://koemi-affili.com』に来ていたアクセスを、
自動的に『https://koemi-affili.com』に転送してもらえるようになりました。

http://koemi-affili.com』←こちらのhttpで始まるURLをクリックしてみてください(^-^)
開くとURLは『https』で始まっている(もしくは鍵マークがついている)はずです。

Googleアナリティクスの設定変更

ブログのURLが変わったので、アクセス解析をするURLも変更していきます♪

 

Googleアナリティクスを開いて【管理】をクリック

SSL化

矢印

【プロパティ設定】をクリック

SSL化

矢印

③『デフォルトのURL』の【▼】をクリックして【https】を選択

SSL化

矢印

【保存】をクリック

SSL化

アナリティクスの変更は以上ですが、このままSearch Consoleの操作に移ります。

 

Search Consoleの設定変更

こちらも同じく、変更されたURLを登録していきます。

アナリティクスの画面からそのまま続けて進めていきましょう。

 

【Search Consoleを調整】をクリック

SSL化

矢印

【編集】をクリック(関連付が出来ている場合はプロパティの追加まで飛ばしてください)

SSL化

矢印

【詳細】をクリック

SSL化

矢印

【プロパティを関連付ける】をクリック

SSL化

矢印

【プロパティを追加】をクリック

SSL化

矢印

⑥『https~』のURLを入力して【続行】をクリック

矢印

⑦所有権は確認済みなので【私はロボットではありません】にチェックを入れて【確認】をクリック

矢印

⑧この表示が出たら完了です!

矢印

⑨きちんと登録されましたね(^-^)

アナリティクスとSearch Consoleの変更は以上で完了です(^-^)

 

まだ鍵マークが付いていないので・・・

ここまでの操作では、たぶんまだ鍵マークは付いていないと思います。

こういう状態ですよね(^^;)

SSL化

 

プラグイン【Search Regex】で、リンクや画像の置換えをしましたが、『ウィジェットエリア』内は置換えられていないので、手動で修正していきましょう。

 

私の場合、修正した箇所はこの3箇所です。

  • サイドバーの画像とリンク
  • 人気ブログランキングのバナー
  • ヘッダー画像

 

あと、お使いのテーマによっては『テーマ内』をチェックする必要があるかもしれません。

私が使用している【賢威7】と【Simplicity】は特に問題ありませんでした(^-^)

 

修正箇所の見つけ方

【Search Regex】で一括置換えをして、ウィジェットエリアも修正して、思い当たる外部サイトへのリンクもない。

でも鍵マークがつかない・・・

ということであれば、きっとどこか見落としがあるかもしれません。

 

Firefoxの『ページ情報』でチェックしていきます。(こちらからダウンロードできます→Firefox

まずはFirefoxでブログを表示させておきましょう(^-^)

 

鍵に『!』が付いた状態になっているので、そこをクリック

SSL化

矢印

②『この接続は安全ではありません』と表示された右側の矢印をクリック

SSL化

矢印

【詳細を表示】をクリック

SSL化

矢印

④『ページ情報』が開くので【メディア】をクリック(ここに画像やリンクのURLが一覧で出てきます!)

矢印

⑤表示されているリストから『http~』となっているものを探してクリック

プレビューで画像を確認できるので、どれが原因か分りやすいです(^-^)

 

すべて修正できるとこうなります↓

SSL化

 

まとめ

無事にSSL化はできましたでしょうか?

正直言って面倒な作業ではありますが、難しい作業ではなかったんじゃないかな~と思います。

 

ひとつひとつ画像やリンクを貼り直していって、鍵マークが付いた時、

『やっとできた~~』と、ものすごい達成感でした(´∀`)

 

プラグインでSSL化できるものもあるようですが、プラグインに不具合が起きて接続できなくなってしまう恐れもあるので、しっかりやっておいたほうが良いと思います。

 

ASPから取得したアフィリリンクも、今はほとんど【https】ですが、

もし【http】だったとしたら・・・?

外せるようなら外してしまって、どうしても外せないならそのままでも良いかと思います。

完全なSSL化はできませんが、自分がものすごい不利益を被るのでは本末転倒なので(^^;)

 

これでひとまず、やらなくちゃと思っていたことができて一安心です。

操作で分からない部分がありましたら、お気軽にご連絡くださいね♪

こえみに連絡する!