ブログ運営

ワードプレスでブログのSSL化とリダイレクトする方法を簡単に紹介

2018年9月17日

どうも。カエルブロガーのケロ蔵です。

ブログのSSLをやってますか?

SSL化をやっておきたいけれど、どうやって設定すれば良いのかわからず、そのまま放置…聞いたことがあるけれど具体的な内容まではよくわからないといった方は非常に多いです。

そこで今回は初心者でも簡単にSSL化をする為の方法について紹介していきます。

ピョン太
ブログをSSL化しても運営できるんだから別にやらなくてもいいんじゃね?
SSL化していないブログはセキュリティーが甘いとGoogleが判断して検索順位が落ちることもあるんだよ。
ケロ蔵

ブログのSSL化とは通信を暗号化するということ

ブログのSSL化といっても具体的にどのような効果があるのかを知らない人は多いです。

大手通販サイトのAmazonや楽天市場のようなネット販売をしていると氏名・住所などの個人情報やクレジットカードなどの情報が第三者に知れ渡らないように暗号化して通信しています。

SSL化をしている事もあり、外部に個人情報が流出しない仕組みとなっています。

インターネットの世界では悪意を持ってハッキングし、大事な個人情報を盗み見て悪用するというトラブルが後を絶ちません。

このような被害に合わないためにもSSL化をするのは運営者にとって利用者の安全を守るという点でも非常に重要なことなんです。

個人のブログでもSSL化をするべき理由

ネットを使った取引をしていないからSSL化しなくてもいいと考えている人もいますが、それは違います。

実は一個人のブログでもSSL化をしないと様々なリスクがあるのをご存知でしょうか?

SSL化していないとどうなるのか?

  • メールアドレスなど個人情報の流出
  • 検索順位への影響
アイナ
メールアドレスなどの個人情報が外部に漏れてしまうとブログへの信用が失われてしまいます。

メールアドレスなど個人情報の流出

問い合わせフォームを設置しているブログは結構ありますが、ここでも個人情報を入力しなければなりません。

とくに返信用に必要なメールアドレスは絶対に入力する必要があるので、SSL化をしなければ問い合わせした方のメールアドレスが外部に漏れてしまうのです。

検索順位への影響

アフィリエイトを利用している人は検索エンジンからの流入を見込んでいるので検索順位が高ければ高いほどアクセスが増えていきます。

SSL化しているサイトを優遇するというGoogleの方針によりこれからSSL化していないブログは徐々に順位が下がり始める可能性があるので、SSL化は必須ともいえるでしょう。

自分のブログがSSL化されている確認する方法

自分のブログがSSL化できているか気になりますよね?

SSL化されているかどうかはブラウザの上部にあるアドレスバーを見ればすぐにわかります。

+ ブラウザとは?

Google Chromeやインターネットエクスプローラーなどサイトを開くためのソフトの事。

SSL化済みのサイトは南京錠のマークが横に表示されており、「このページはSSL化されてますよ」と証明するためのマークです。

Google Chrome

Microsoft Edge

この南京錠が表示されておらず、ほかのマークが表示されている場合はまだSSL化が対応していないということですね。

早い段階でSSL化をしておけば後から苦労をしなくて済むので、早急に対策をしておきましょう。
ケロ蔵

ブログをSSL化するための方法

話が長くなりましたが、実際にどうやってSSL化をすればいいのかご説明します。

SSL化はサーバーとワードプレスの両方をしなければなりません。

どちらかひとつだけではSSL化は不完全なので、たとえ面倒であっても最後までやりましょう。

アイナ
最初のうちはわからないかもしれませんけど、やっていくうちに覚えてきますよ!

サーバーでSSL化する設定

まずはじめにやることはサーバーの設定でSSL化することです。

今回紹介する方法は【ロリポップ!】を例にしています。

サイドバーの【セキュリティ】→【独自SSL証明書導入】をクリックします。
そうすると以下のような画面へと移ります。

独自SSLは無料と有料のものがありますが、個人が運営するサイトであれば無料SSLでも問題ありません。

独自SSL(無料)の項目でSSL化保護されていないドメインを選択すると、SSL化が未実施のドメイン一覧が表示されます。

無料なのですべてのドメインにチェックを入れて有効化してしまいましょう。

【SSL設定作業中】に切り替わると手続きが完了します。
SSL化するまで多少時間がかかるので、次の作業をしてしまいましょう。

ワードプレスでSSL化をする設定

次にワードプレスでブログをSSL化します。

ワードプレス管理画面にログインしたら【設定】→【一般】を選択してください。

WordPressアドレス(URL)とサイトアドレス(URL)の2箇所にアドレスが表示されています。

http://の部分にsを付け加えてhttps://とするだけでOKです。

付け加えたら『変更を保存』してください。

これでブログのURLアドレスはhttpsになりました。

内部リンクを一括変換する

アドレスをhttpsにしてもリンクや画像URLはhttpのままです。

なのでこれらのデータも変換する必要があります。

とはいっても、膨大な量を1つずつ手作業でやるには時間がかかりすぎるので、置換プラグインを使いましょう。

おすすめのプラグインはこちらです。

Search Regexという全記事を一括で置換してくれるプラグインです。

海外製なのですべて英語になっていますが、必要な機能は備わっているので難しくはないですよ。

プラグインを有効化したらワードプレス管理画面の【ツール】→【Search Regex】を選択します。

Search Regexの管理画面に切り替わりました。

見る部分は『Search pattarn』『Replace pattarn』だけです。

Search pattarnには変換前の文字を入力します。
ここにはhttp://からはじまるアドレスを打ち込んでください。

Replace pattarnは置換する文字を入力するのでhttps://ではじまるアドレスを入力します。

入力が終わったら一番下にある『Search』をクリックするとサイト全体の旧アドレスを検索してくれます。

次に『Replace』をクリックすると変換後のプレビューを見ることが出来るので間違いがないか確認した後に『Replace & Save』をクリックします。

注意ポイント

一度決定してしまうと元に戻すことができなくなりますので、間違いがないか必ず確認しておきましょう。

変換しきれなかったhttpを自力で修正

上記の置換プラグインだけで上手くSSL化できないこともあります。

原因はワードプレス内のリンクがまだhttpsに変換しきれていないのが原因です。

なのでここからは自力で修正していきましょう。

httpsになっていない箇所

  • ウィジェット
  • カスタマイズ
  • メニュー
  • プロフィール欄
  • アフィリエイトタグ
  • AFFINGER5管理

 

僕の場合は以上の箇所を自力で手直ししました。

それでは1つずつ解説していきましょう。

ウィジェット

ウィジェットエリアに画像を設置している場合、置換プラグインSearch Regexを使って置換が出来ません。

主にURLや画像リンクを使っているウィジェットが該当します。

サイドバーに設置している画像もチェックしてください。

http://にsを加えるだけで修正完了です。

リンクURLはリンク先がSSL化されていない場合だと、正常にアクセスできない場合がありますので、リンク先URLを削除するかリダイレクト済みと考えて無理やりsを付け加えるなり対策をしてください。

カスタマイズ

カスタマイズメニューでもヘッダー画像や壁紙など画像を使っていれば一度外して、再度設定してみてください。

メニュー

ヘッダーメニューやグローバルメニューに直リンクを入力していた場合、手直しする必要があります。

プロフィール欄

以外と気づかないのがプロフィールです。

SSL化する前に画像を設定していると画像リンクがhttpのままなので、改めて画像を選択し保存をするだけでOKです。

アフィリエイトタグ

ASPで発行しているタグ内にhttp://~とSSL化しきれていないタグもあります。

すでにASP側でSSL化されていると思いますが、まだ対応していない場合もあり、下手に改変をすると成果にならない場合がありますので、念の為ASPに確認してみてください。

AFFINGER5管理

AFFINGER管理設定でも置換プラグインが正常に動作しません。

あまり気づかないので、最後までわかりませんでした。

  • おすすめヘッダーカード
  • ファビコン
  • 会話風アイコン

画像URLのhttp://にsを付け加えるだけです。

それでも鍵マークにならない場合はページソースで確認

これだけやっても鍵マークが表示されないということはまだ気づかない箇所があるということです。

なのでブラウザのソースコードを見て確認しましょう。

Chromeを例に出しますが、ページのソースが表示されれば何でもいいです。

まず自身のブログのトップページを開き、鍵マークがついていないことを確認してください。

次に画面のどこでもいいので右クリックをして『ページのソースを表示』を選択。
表示されていない場合は別のところにカーソルを持っていき再度右クリック。

そうするとページを構成しているHTMLがズラッと表示されます。

ここでキーボードの【CTRL+F】を同時押しします。

Ctrf+Fはページ内検索のショートカットでこれを使うことによって対象の文字列がわかります。

『http://』で検索するといくつか残っているはずです。

この部分の前後からどの部分のリンクなのかを予測して修正してください。

ちなみに全て変更しなくても鍵マークが付くこともあるので1つずつ試してみてくださいね。

リダイレクトの設定

最後に1つだけやっておくのはリダイレクトの設定です。
電話でいうところの転送機能のようなものだと思ってください。

SSL化は完了しましたが、http://のサイトが消滅したわけではなく、http://とhttps://の2つのサイトが存在しているだけです。

検索エンジンでは両方のサイトがインデックスされているので、検索した訪問者がどちらかのサイトにアクセスします。

このままだとhttp://とhttps://の両方のサイトでアクセスが分散してしまいますので、http://にアクセスしようとした訪問者を自動的にhttps://のサイトへとリダイレクトするように設定しなければなりません。

リダイレクトの設定は契約しているレンタルサーバーで異なっているので、詳しい方法は各レンタルサーバーのマニュアルを見てください。

ロリポップ!でリダイレクトをする

自分はロリポップ!のレンタルサーバーを利用しているので、ここではロリポップ!でリダイレクトする方法を紹介ます。

それでは順を追って解説していきます。

まずはロリポップ!にアクセスして【サーバーの管理・設定】→【ロリポップ!FTP】にアクセスします。

ワードプレスインストール時にフォルダを作成した場合はフォルダにまとめられていますので、設定したいブログのフォルダを選択。
インストール時にフォルダを作成していないとファイルがばらばらになってしまっているので、整理をするのが面倒になってしまいます。

.htaccessというファイルがあるので選択し、以下のタグをコピーして一番上に貼り付けてください。

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

貼り付けが完了したら下にある『保存』をクリックすると書換が完了します。

実際にhttp://~でアクセスしてみてhttps://~へリダイレクトするかどうか確かめてみましょう。

覚えてしまえば結構簡単!

実際にやってみてサイトのリダイレクトの方法がこんなに簡単だったなんて思わなかったのではないでしょうか。

たったこれだけの作業なので、やり方がわかっていれば、ものの数十分で完了します。

一昔前とは違って、今ではサーバーの契約者が使いやすいように簡単に設定できるようになってきています。

1つのサイトにまとめることによって、サイトのページランクが上がり検索上位に掲載されやすくなりますので、早い段階でリダイレクトの設定をしておいたほうがいいでしょう。

アイナ
初心者のうちはレンタルサーバーのことをあまりわかっていないので、苦手意識をなくしましょう。

-ブログ運営
-

Copyright© アフィノート , 2020 All Rights Reserved.