こんにちは、メディア事業部の山田祐輔です。

今回は、自社サイトをSSL化した全ての手順について書いていきます。

はじめに

先日の記事でもお伝えしましたが、2016年に入ってますますウェブサイトのSSL化が重要になってきました。

先日の記事はこちら

【2017年1月開始】App Transport Security(ATS)徹底考察!そもそもATS対策って必要?

こちらの記事にも書いていますが、今後iPhoneアプリからブラウザ(クロームやSafariなど)を開こうとした場合、httpのままでは警告文が出て開くことができない可能性があります。

一見、iPhoneアプリであればウチはアプリ出してないから関係ない!と思われがちですが、このiPhoneアプリにはTwitterやFacebook、LINEなども含まれますので、SNSからのアクセスが少しでもある場合は、今後の事も考えてSSL化しておいた方がいいでしょう。

当サイトでも上記のような事もあり、早速SSL化を行いました。

色んな記事を参考にしながら、約3時間ぐらいで全ての作業を終えることができました。

では今から、当サイトがSSL化するために行った全手法を今からお話していきます!

今回の方法はエックスサーバーのSSL(無料)での方法となります!

無料で自社サイトをSSL(http→https)化した全手法まとめ

1、エックスサーバーで「SSL設定」を行う

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

次に、「ドメイン」の「SSL設定」をクリックします。

すると、下記のような画面になりますので、複数ある場合はSSL化したいドメインを選択します。

SSLの設定画面になりますので、下記のようにサイトを選択して「独自SSL設定を追加する」を選択します。

※最大1時間かかるとの事でしたが、平日の昼間に行った場合、5分ほどで反映されました。

www.を選択すると、自動的にhttps://もアクセス可能になります!

CSR情報について

今まではCSR情報というものが必要でしたが、今回行うエックスサーバーの「Let’s Encrypt」(無料)の場合、設定はしなくても問題ありません。

CSR情報について詳しく知りたい場合は、こちらのサイトをご参照ください。

XAMPPでHTTPS通信!SSLのためのCSRの作り方

2、ワードプレスの設定を変更する

エックスサーバーの設定が完了したら、次にワードプレスの情報を変更します。

「設定」→「一般」に進み、以下の点を変更します。

http→httpsに変更

この設定を行うだけで、サイト自体がhttpsに変更されます!

3、「Search Regex」を使って一括でURLを変更する

次に、「Search Regex」というプラグインを使って、現在「http」になったままの画像などのURLを一括で「https」に変更していきます。

プラグインの検索窓で「Search Regex」を検索します。

こちらを検索したら、有効化します。有効化が完了したら、設定に入っていきます。

「Search Regex」の設定方法

まず、「Search Regex」のプラグインを選択します。(当サイトの場合はツールの項目にありました)

選択したら、下記のような画面になりますので、以下のように「http」のサイト名から「https」のサイト名に変更をかけていきます!

一度設定してしますと一括で変更されてしまい不具合が出る可能性がありますので、必ずバックアップを取ってから行ってください。

まずは、「Search」で該当URLを検索していきます。

すると、該当するURLが出てきます。

こちらを手間ですが、上から変更しても問題ないか見ていってください。

バックアップを取っている場合は、ざっと見てもらうだけで大丈夫です!

問題なければ、次は「Replace&Save」を選択して、変更を保存します。

すると、下記のように完了した数が表示されます。

これで設定は完了です。

4、.htaccess(リダイレクト)設定を行う

次に、.htaccessの元データの情報に少し追記していきます。

サーバー(FTP)にある「.htaccess」をダウンロードします。(ウインドウズの方ならFFFTP、Macの方ならファイルジラなどのツールを使用します)

下記のように必ずコピーを取っておいてください!(バックアップがないと失敗した時に大変面倒なことになります)

バックアップをしっかりと取ったら、以下のコードを「.htaccess」の冒頭部分に追記します。

入力すると、こんな感じになります。

記述が完了したら、サーバーにアップしていきます。

この時、上書きしますか?という表記が出ると思いますが、そのまま上書きします。

バックアップを取っていることが前提です。

5、セキュリティをチェックする

では、いよいよ仕上げに入っていきます。

実際にhttpsでサイト名を入力して見て、サイト名の左のこの部分を見てください!

これは「GoogleChrome」での表記ですが、上記のように緑色で鍵が閉じられていれば問題なく、SSL化出来ています。

逆に、それ以外の場合は、SSL化が上手くいっていません。

なぜ、上手くいっていないか調べる方法があるのでそちらをシェアします。

Googleデベロッパーツールで検証する

GoogleChromeを使用している場合は、ブラウザ上で「Googleデベロッパーツール」というものを使用して、原因を探すことができます。

Googleディベロッパーツールはサイトで右クリックして「検証」を選択します。

 

ショートカットキー:Ctrl+Shift+I(MacではControl + Option + I)

そして、「Console(コンソール)」を選択すると、修正箇所がある場合、下記のように「黄色△」で警告が出ています(実際に検証してみると、大抵以下のような状況になっていると思います)

では、これから当サイトでも行った修正方法についてお話していきます。

表示が変わらない時に見るべきポイント

1、ウィジェット

ここは必ずチェックしておいた方がいいポイントです。

多くの場合、ウィジェット内に画像や動画などを使用していると思います。

ですが、先ほど「Search Regex」で一括でhttpsに変換した際にこのウィジェット内の情報には反映されません。

ですので、ウィジェット内の画像などはhttp→httpsに画像自体のURLを変更する必要があります。

画像の場合は、一旦httpのものは削除して再度「メディアライブラリ」から選択し直せばOKです!
2、アイコン

また、アイコンも抜けがちなポイントです。

アイコンやファビコン(アップルアイコンなども含む)などもhttpsに変更しましょう!

3、メインビジュアル

テーマによっては、メインビジュアル(ヘッダー)に画像を使用しているケースもあるでしょう。

当サイトの場合だとこんな感じで使用しています。

こんな感じの画像もhttpのままの場合があるので、httpsに変更します!

4、CTA(コールトゥーアクション)

CTAに関しても画像を使用しているケースが多いと思います。

CTAとはこんな感じのもののことです。

こういった部分にも画像が使用されており、見逃しやすいポイントなので、注意が必要です。

5、お問い合わせ

また、お問い合わせに関しては、ワードプレスのプラグイン「コンタクトフォーム」を使用している場合が多いと思います。

こちらにも、もし画像を使用している場合は、httpsに変更する必要があります。

以上がよく設定を忘れがちなポイントになります。

6、最終チェック(検証ツールで確認)

ある程度、上記のような部分を修正したらもう一度Googleデベロッパーツール(検証ツール)を開いて、検証していきます。

また、右クリックで「検証」もしくはCtrl+Shift+I(MacではControl + Option + I)を入力し、「Console」をチェックします。

上記の場合、違うエラーは残っていますが、先ほどのように「黄色△」の表記は無くなりました。

先ほどの状態はこちら

この状態で最後に鍵マークを見ていきます。

GoogleChromeの場合

トップページ

個別記事(【WEB担当者向け】Googleアナリティクスで最低限、毎日チェックすべき3つのポイント)

個別記事(【WEB担当者の基礎知識】WEBサイト構造のキホン「HTML」について知ろう!)

上記のようにトップページやコンテンツ記事(ページ)を全て確認し、緑の鍵(Chromeの場合)になっているかを確認します。

GoogleChromeでの表示の確認が終わったら、Firefoxでも表示を確認します。

Firefoxの場合

トップページ

個別記事(【WEB担当者向け】Googleアナリティクスで最低限、毎日チェックすべき3つのポイント)

個別記事(【WEB担当者の基礎知識】WEBサイト構造のキホン「HTML」について知ろう!)

問題なく、鍵マークが緑となり、しっかり鍵が閉じられていればOKです。

7、Googleアナリティクスを変更する

サイトが問題なく、httpsになったら次はアナリティクスの方もhttp→httpsに変更していきます。

Googleアナリティクスにログインして、「管理」を選択します。

次に、プロパティの中から「プロパティ設定」を選択します。

そして、デフォルトのURLを「http→https」に変更します。

これだけでGoogleアナリティクスの設定は完了です。

次は、Googleサーチコンソールの修正を行っていきます。

8、Googleサーチコンソール情報の変更

先ほどのGoogleアナリティクスのプロパティの画面の下部に、「Seach Consoleを調整」という項目がありますので、こちらを選択します。

すると、現在紐づいている「Seach Console」が確認できます。

下記の写真はhttpsのサーチコンソールと紐づいてますが、通常はhttpのサイトのままだと思いますので、紐付け先を変更していきます。

 

サーチコンソールはアナリティクスと違って、http→httpsに変更するということが設定できません。

httpsで再度、サイトマップを送信したり、設定を行う必要があります。

参考サイト:サーチコンソールの登録方法と初心者でも分かる使い方【2016年度版】

 

サーチコンソールの設定が完了したらSSL化でやるべきことは終了です。

まとめ

いかがでしたでしょうか?

今回は、当サイトがSSL化した全手法について解説しました。

現段階ではSSL化の恩恵はあまり感じることができていませんが、今後何か変化がありましたら当サイトでも情報を共有していきます。

【助成金を活用して持ち出し0円!?】制作・マーケティングが出来るWEB担当者を育成する「WEB担当者育成プログラム」

書籍でも紹介した事例や助成金を活用して持ち出し0円でスマホ化対策する方法やWEB内製化について代表石嶋が直接セミナーでお話します。

参考になったらシェアをお願いします!

「WEB内製化」の”要点”がギュッと詰まっています!


Amazon「本 の 売れ筋ランキング」1位を獲得!

「この本のやり方を知らないのは、 あまりにも、もったいない。 ホームページは、自社の商品・サービスをお客様の都合に合わすことができる非常にすぐれたツールだ。わが社は1年で売上が6億円増えた」

あの小山昇社長(株式会社武蔵野代表)も驚く、
すごい成果が続々!
(実践企業の93%が、ホームページで過去最高売上を更新中!)

「ホームページのことはよくわからない」という、社長さんこそ、必読です。

コメントを残す

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

ABOUTこの記事をかいた人

株式会社ミスターフュージョン メディア事業部所属。「WEB制作」内製化支援.com編集長。「WEB制作」内製化支援.comの記事執筆や毎月、企業のWEB担当者様向けに「WEB担当者育成プログラム」を開催しています。 趣味:ブログを書くこと、映像制作。