エックスサーバーに無料独自SSLを導入する手順をわかりやすく教えます!

シェアボタンを押して情報を共有しましょう。

https-3344700_1920

どうも、こんにちは。橋尾渡(@hashio_wataru)です。

2016年6月30日に、エックスサーバーが全サーバープランで独自SSLが無料かつ無制限に利用可能になったようです。

もう、2年ほど経ってしまいましたが、今まで僕のウェブサイト(ブログ)は常時SSL化させていませんでした。

それは何故かと言うと、ウェブサイトを常時SSL化することに対してデメリットを強く感じていたからなんですよね。

以下に貼り付けておいた記事を読んでもらえればわかると思いますが、結構いろいろと面倒なんですよ(笑)

どうも、こんにちは。橋尾渡(@hashio_wataru)です。 前回、常時SSLにする必要性とメリットについての記事を執筆し...

なので、「自分のブログを常時SSL化にするのはまだいいかなぁ~」と、ずっと思っていたんです。(本当はサボっていただけ…)

ですが、2年も時が経っているのでデメリットに対する対策も、充実してきた頃合いです。

Googleの会社も、ウェブサイトにSSLを導入することを推奨していますし、そろそろ自分もSSLを導入してみようかなと思い立ったのです。

上のリンクにはデメリットについて書きましたが、こちらの記事には常時SSL化の必要性とメリットについて詳しく書いておいたので、確認しておいてください。

どうも、こんにちは。橋尾渡(@hashio_wataru)です。 2016年頃から、サイトのURLを「http」から「http...

ウェブサイトを常時SSL化することによって得られるメリットはいくつかありますが、その中でもGoogleは特に、セキュリティ面を強化することに力を注いでいます。

そんな訳で、ウェブサイトを「http」から「https」に変える常時SSL化が必要になってきたんですね。

今回は、その常時SSL化するまでの手順を「エックスサーバー」を介して、ご説明していきたいと思います。

どうも、こんにちは!橋尾渡(@hashio_wataru)です。 あなたは今、どこのレンタルサーバーをお使いになっていますか?...

まだ、エックスサーバーを利用されていない方は、上記のリンクへ移動してエックスサーバーの良さについて触れてみてください。

これからブログを始めたい方や、サーバーの移転をご検討されている方などおられましたら、是非エックスサーバーへどうぞ!

それではそろそろ、エックスサーバーで常時SSL化する手順を1から順に説明していきますね。

スポンサーリンク
レクタングル(大)広告

データベースのバックアップを取っておく

まず、ウェブサイトをSSL化するにあたって色々と問題が起きる可能性があります。

なので事前に、ワードプレスのデータベースをバックアップしておく必要があります。

データベースさえバックアップしておけば、何かしらの手違いがあったとしても復元すれば元の状態に戻せるので、この作業は欠かせません。

ワードプレスのデータベースをバックアップする方法は、以下の記事で事細かく説明しておりますので、必ず読んでおきましょう。

どうも、こんにちは。橋尾渡(@hashio_wataru)です。 ワードプレスを使っていると、不慮の事故でデータがクラッシュし...

データベースのファイルを普段から定期的に保存しておけば、いざという時に役立ちますので「backwpup」のプラグインをインストールしておく事は必須です!

それでは、次へいってみましょう!

エックスサーバーでSSLの設定を行う

さてお次は、エックスサーバーの設定画面に移動して、ウェブサイトをSSL化するまでの手順をご説明していきたいと思います。

まずこちらの、インフォパネルログインフォームを開いてください。

スクリーンショット_043018_115509_AM

インフォパネルを開いたら、「会員IDまたはメールアドレス」と「インフォパネルパスワード」を入力してログインしましょう。

スクリーンショット_043018_121249_PM

エックスサーバーのインフォパネルにログインしたら、サーバーの項目までスクロールしてサーバーパネルにログインしてください。

スクリーンショット_043018_121059_PM

ログインができたらサーバーパネルが開きますので、ドメインの項目にある「SSL設定」をクリックしてください。

スクリーンショット_043018_125248_PM

「SSL設定」をクリックしますと「ドメイン選択画面」が表示されますので、SSLを導入したいURLを選択しましょう。

スクリーンショット_043018_065350_PM

SSL化させるドメインを選択しましたら、上に「独自SSL設定の追加」というタブがありますので、クリックしてください。

スクリーンショット_043018_100155_PM

「独自SSL設定の追加」というタブに移ると、ドロップダウンメニューとチェックボックスがあることがわかりますね。

まず、「設定対象ドメイン」のサイトという項目にあるドロップダウンメニューは、基本的にそのままでも大丈夫です。

その下にある「CSR情報(SSL証明書申請情報)を入力する」というチェックボックスも、チェックを入れずそのままにしておけば大丈夫でしょう。

そして、「独自SSL設定を追加する(確定)」というボタンをクリックすれば、独自SSLの設定処理が始まります。

※CSRとは、サーバー証明書を取得する際に、認証局に提出するリクエストのことです。詳しく知りたい方は、検索ボックスで調べてみてください。

スクリーンショット_050218_121009_AM

「独自SSL設定を追加する(確定)」ボタンをクリックすると、「SSL新規取得申請中です。しばらくお待ちください。」というメッセージがでてきます。

この際、処理に数分かかる場合がありますので、少し待っていましょう。

スクリーンショット_050218_121252_AM

処理が終わると、「「あなたのウェブサイトURL」に独自SSL設定を追加しました。」というメッセージが表示されます。

※独自SSL設定がウェブサイトに反映されるまでに、最大1時間程度かかることがありますので、ご了承ください。

スクリーンショット_050218_122102_AM

独自SSL設定が本当に完了したのかを確認するため「SSL設定の一覧」というタブへ戻り、「SSL用アドレス」を見てみましょう。

確認してみたところ、ウェブサイトのURLに「s」の文字が追加されていますね。

そして次に、「SSL用アドレス」の箇所にあるSSL化させたURLをクリックしてみましょう。

スクリーンショット_050218_123504_AM

URL先を開いてみると、「安全な接続ではありません」という文字がでてきて、ウェブサイトが正常に開きませんね。

驚きましたか?しかし、安心してください。これで大丈夫なんです。

上記でも説明したように、独自SSLの設定がウェブサイトに反映されるまで、最大1時間ほどかかります。

なので心配せず、しばらくの間他のウェブサイトやテレビでも見て暇を潰しておいてください(笑)

おすすめの暇つぶし方法なのですが、ぼく(橋尾渡)のブログ記事を読んでみるのが非常におすすめです。

ここは、僕が今までに書いてきた記事を簡単に探すことができるページです。 カテゴリー毎に細かく分かれているので見たい情報があれば是非読んでく...

こちらのサイトマップでは、僕が今まで書いてきた記事を全て確認することができるので、是非、独自SSL設定の待ち時間に読んでみてください。

スクリーンショット_050218_074515_PM

僕の場合、30分程度で独自SSL設定の反映が終わりました。

この様に独自SSL設定が終わり、SSL化したウェブサイトのページが正常に表示されるようになったら、次の作業へ移りましょう。

ワードプレスの一般設定からURLを変える

独自SSL設定が終わりましたので、次は、ワードプレスの一般設定からURLを変更する作業をしていきましょう。

まず、ワードプレスのダッシュボードを開きます。

WS000256_050318_083214_PM

ダッシュボードを開いたら、左カラムにある「設定」にマウスオーバーして、「一般」を選択してください。

スクリーンショット_050318_083713_PM

一般設定のページを開くと、「WordPress アドレス(URL)」と「サイトアドレス(URL)」という項目がありますね。

各項目の右側にある入力欄に、あなたのウェブサイトURLが入力されていると思われますので、「http」という箇所にSの文字を追加して、「https」に変えてあげましょう。

スクリーンショット_050318_084231_PM

Sの文字を追加して「https」になったURLが、こちらになります。

※打ち間違いが無いように、再度確認しておきましょう。

スクリーンショット_050318_084450_PM

そして、打ち間違いが無いよう再確認したあと、ページを一番下までスクロールして「変更を保存」というボタンを押せば作業完了です。

Search Regexで内部リンクの置き換えをする

ワードプレスの一般設定からウェブサイトのURLを変更することができましたら、次は「Search Regex」というプラグインを使って、内部リンクのURLを全て「https」に置き換えてあげましょう。

この「Search Regex」というプラグインを使う事によって、内部リンクはもちろんのことimgの内部リンク画像も全て一括の作業で「http」を「https」に置き換えることが可能です。

Search Regexの詳しい使い方を記事にしましたので、こちらの下記リンクから飛んでください。

どうも、こんにちは。橋尾渡(@hashio_wataru)です。 今回僕が紹介するプラグインは「Search Regex」とい...

一つ一つの記事を手作業で変えていくのはとても面倒な作業になるので、ワードプレスを利用しているユーザーは必ず「Search Regex」を使って、URLを変更しましょう。

WS000257_050318_092401_PM

まずワードプレスを開いたら、左カラムにある「ツール」にマウスオーバーして、「Search Regex」を選択してください。

スクリーンショット_050318_093029_PM

「Search Regex」の設定ページを開きましたら、上図のように設定してください。

  • Source:Post content(そのまま)
  • Limit to:No limit(そのまま)
  • Order By:Ascending(そのまま)
  • Search pattern:SSL化する前のURLを入力
  • Replace pattern:SSL化した後のURLを入力
  • Regex:チェック不要

「Search pattern」には、SSL化する前の「http」というあなたのウェブサイトURLを記入して、「Replace pattern」には、SSL化した後の「https」になったあなたのウェブサイトURLを記入しましょう。

その他の設定はデフォルトのままで大丈夫です。

スクリーンショット_050318_094053_PM

SSL化の変更前と変更後のURLを記入できたら、下にある「Replace ≫」というボタンをクリックしてみてください。

※「Replace ≫」ボタンを押した時点では、まだURLの置き換えはされませんので安心してください。

スクリーンショット_050318_094605_PM

Replaceボタンをクリックすると、実際にURLが置き換わった時のプレビューを確認することができます。

赤色のマーカーになっている箇所が、変更前のURLと変更後のURLになります。

※Replaceボタンでプレビューを確認できますが、ここでしっかりとソースコードを確認して間違いがないか入念に確かめておきましょう。

スクリーンショット_050318_100138_PM

そして確認が終わったら、最後に「Replace & Save ≫」というボタンを押してください。

スクリーンショット_050318_100535_PM

「Replace & Save ≫」を押したら、Search Regexの設定ページが更新され、「**** occurrences replaced」というメッセージが表示されます。

ちなみに、このURLの置き換え作業は一瞬で終わりました。

これで、「Search Regex」を使った、URL一括置き換え作業は完了です!

リダイレクト用のコードを.htaccessに追記する

次は、「.htaccess」というテキストファイルに、リダイレクト用のコードを追記する作業を行います。

リダイレクトとは?

ウェブサイトにおけるリダイレクト(英:redirect)とは、ウェブサイトの閲覧において、指定したウェブページから自動的に他のウェブページに転送されること。URLリダイレクト(URL redirection)とも言われる。

通常はウェブページのURLが変わったときに、元のURLから新しいURLへ誘導するときに用いられる。フィッシング詐欺サイトへの誘導などで用いられている場合もある。

リダイレクト (HTTP)

「.htaccess」にリダイレクト用コードを追記するためには、FTPサーバーにアクセスする必要があり、今回は「FFFTP」というフリーソフトを利用してアクセスしてみようと思います。

こちらに、FFFTPの基本的な使い方などについて、書き記した記事がありますので確認しておきましょう。

どうも、こんにちは!橋尾渡(@hashio_wataru)です。 今回は、FFFTPというファイル転送ツールを使って、エックス...

スクリーンショット_050418_120709_AM

まず「FFFTP」を起動したら、設定したホストに接続してください。

スクリーンショット_050418_121109_AM

FTPサーバーにアクセスができたら、「.htaccess」というファイルがありますので、ダウンロードしてください。

※ファイルをダウンロードする方法は、マウスを指定のファイルまで移動させて右クリックからのダウンロード選択でできます。

スクリーンショット_050418_121802_AM

そして、先程ダウンロードした「.htaccess」のテキストファイルを、サクラエディタなどのテキストエディタツールで開き、先頭部分に以下のコードを貼り付けてください

上記のコードを「.htaccess」の先頭部分に貼り付けたら、上書き保存をしましょう。

WS000258_050418_123559_AM

上書き保存した「.htaccess」のテキストファイルを、FFFTPで再度アップロードすれば、リダイレクト作業は完了です。

※WindowsLiveWriterを利用しているユーザーの方は、リダイレクト用のコードを追記した際にサーバーとの通信が途絶えてしまうので、こちらの記事を確認してブログアカウントの設定を更新しておきましょう。
どうも、こんばんは!橋尾渡(@hashio_wataru)です。 今回は、WindowsLiveWriterのブログアカウント...

本当にリダイレクト用のコードが機能しているかを確認するため、試しに僕のブログURLから「s」の文字を抜いて、再度アクセスしてみてください。

すると、「http」でアクセスしたと思われますが、不思議なことに「https」のURLになった僕のブログにアクセスしていることがわかります。

これで、「.htaccess」のテキストファイルに追記したリダイレクト用のコードが、しっかりと働いてくれていることが確認できましたね。

そして、この様に「http」から「https」にリダイレクトさせておくことによって、今まで得てきたGoogleの評価を引き継ぐことができます

Googleの評価を引き継ぐことができるということは、検索順位(SEO)などにも大きく影響していきます。

なので、面倒な作業であっても必ずこのリダイレクト用のコードは追記しておく必要があるんですね。

それでは次に、諸々の確認作業へ移っていきたいと思います。

混在コンテンツの確認作業

※以下、FireFoxのウェブブラウザを利用した説明となりますので注意しましょう。

恐らく、ほとんどのウェブサイトはアドレスバーの左にある鍵マークが、安全ではない表示になっていると思われます。

スクリーンショット_050518_073549_PM

これは、完全にウェブサイトをSSL化できていない証拠で、サイト内の一部(画像など)が安全に呼び出されていない状態になっているからです。

この状態では、せっかく常時SSL化設定を施したのに、意味がなくなってしまいます。

なのでこれから、鍵マークが安全な状態になるよう、サイト内のSSLエラーがどこから呼び出されているのかを確認していく作業を行います。

開発者ツールを使ってエラーを探す

まず、サイト内のSSLエラーを探すため、あなたのウェブサイトを開いてください。

スクリーンショット_050618_054306_PM

ウェブサイトを開きましたら、「F12」キーを押して「開発者ツール」を起動しましょう。

そして、コンソールタブをクリックします。

スクリーンショット_050618_082253_PM

なにやら色々と、赤い文字や黄色い文字のメッセージがでてきましたね。

エラーを吐き出している文章を引用してみましょう。

混在アクティブコンテンツ “http://www.google.co.jp/coop/cse/brand?form=cse-search-box&lang=ja” の読み込みをブロックしました

安全なページ上で (安全でない) 混在表示コンテンツ “https://hashio-wataru.com/wp-content/uploads/2017/07/koara.png” を読み込んでいます

安全なページ上で (安全でない) 混在表示コンテンツ “https://hashio-wataru.com/wp-content/uploads/2017/07/koara.png” を読み込んでいます

引用した文章をよく見てみると、「search-box」や「koara.png」といったURLが含まれていることがわかります。

スクリーンショット_050718_100919_PM

恐らく「search-box」は、ブログ内右カラムにあるGoogleAdsenseのサイト内検索ウィジェットでしょう。

そして「koara.png」は、HTMLのsrc属性で呼び出しているプロフィール画像のコアラだと思われます。

ここらへんの画像になると「Search Regex」で置き換えができませんので、手動でURLを変えていく必要があるんですね。

詳細表示のメディアタブからエラーを探す

もう一つ、ウェブサイト内のSSLエラーを探す方法があります。

それは、アドレスバーの鍵マークにある「詳細表示」から「メディア」を確認する方法です。

このメディアから確認する方法を使えば、ウェブサイト内にあるどの画像からSSLエラーを吐き出しているのかをすぐに理解することができます。

WS000259_050718_103300_PM

まず、あなたのウェブサイトにある鍵マークをクリックしてください。

そして「>」マークを押したら、次の表示画面へ移ります。

WS000260_050718_103751_PM

「>」マークをクリックしたら「サイトのセキュリティ」画面が開きますので、下にある「詳細を表示」という部分をクリックしてください。

スクリーンショット_050718_105623_PM

「詳細を表示」をクリックすると、「ページ情報」のウィンドウが開きます。

最初は「セキュリティ」のタブが開いているので、「メディア」のタブへ移動してください。

スクリーンショット_050818_122438_AM

メディアタブに移動したら、URLが「http」から始まるものを探し出してください。

「http」のURLを選択すると、下に「メディアプレビュー」がでてきて画像が表示されます。

この画像は、僕がウェブサイト(ブログ)のファビコンに設定しているアイコン画像ですね。

メディアプレビュー機能を使うことによって、SSLエラーの原因を特定しやすくなるので非常におすすめです。

是非、活用していきましょう。

ワードプレスの外観を確認する

ウェブブラウザの「開発者ツール」や「メディアの情報」を確認できたところで、次は、ワードプレスに戻って「外観」のメニューから色々と調べてみましょう。

テーマ内の設定で、HTMLから呼び出されている「img」「script」「iframe」「form」属性のタグから、「http」が混ざっていないかを確認してください。

ウィジェットエリアの確認

ワードプレスのウィジェットエリアで使っているウィジェットの中にテキストウィジェットなどがありますが、上記であげた内容の属性タグがウィジェットの内部に記入されていないかを探していきましょう。

面倒なことにSearch Regexでは、ウィジェット内部のコードまでは置き換えができないので、全て自力で変えていく必要があります。

SSLエラーの探し方で説明したように、僕のウェブサイトでは「プロフィール画像」と「Googleサイト内検索」がエラーを吐き出していたので、それを修正していく必要があるんですね。

スクリーンショット_051118_030932_PM

まず、ワードプレスの「外観」から「ウィジェット」を選択します。

スクリーンショット_051118_042706_PM

ウィジェットのページへ移動したら、HTMLで設定してあるテキストウィジェットを一つ一つ確認していきましょう。

僕の場合、プロフィール画像に設定している「コアラの画像」が「http」で呼び出されているままなので、ここに「s」の文字を追加してSSL化していきたいと思います。

ちなみに、「Search Regex」を使った場合、元画像の「https」バージョンは既に出来上がっているので、「s」の文字を追加して保存してやればいいだけなんですね。

スクリーンショット_051218_034543_PM

上図のようにURLを「https」に書き換えることができたら、下にある「保存」ボタンを押して更新してあげましょう。

※僕の環境下では、この時点でアドレスバーの横にある鍵マークが、正常な緑色をした鍵マークに変わっていました。

そして次に、問題となっていた「Googleのサイト内検索」ウィジェットですね。

こちらも上記と同様に、「http」となっている部分に「s」の文字を追記して保存すれば、SSLのエラーがでなくなりました。

カスタマイズエリアの確認

ウィジェットエリアの修正作業が終わりましたら、次は、カスタマイズエリアの確認作業をしていきましょう。

ウェブサイトのSSLエラーをメディア情報で探した時に、ファビコンがSSL化されていませんでしたよね?

カスタマイズエリアもウィジェットエリアと同様にSearch Regexでは置き換えることができないので、自分で変える必要があるんですね。

スクリーンショット_051218_061010_PM

ワードプレスで使っているテーマによって設定方法は異なりますが、「Simplicity」を使っている場合、「その他」からファビコンとアップルタッチアイコンを変更することができます。

他にも、ヘッダー画像やロゴ画像、背景画像などがありますので、画像の設定されている方は「画像の変更」をしておきましょう。

アフィリエイト等のコードを確認

今まで作った記事に、ASP(A8.netなど)のアフィリエイトコードを記事内に埋め込んだページってありますよね?

古いアフィリエイトコードになるとSSLに対応しておらず、画像が正常に表示されないバグが生じることがあります。

なので、今までに作った記事の中にSSLに対応していない古いアフィリエイトコードがあるならば、全て貼りかえる必要があるんですね。

※なお、A8.netの場合、成果報酬についてはちゃんと発生するようなので、恐らく他のASPも成果報酬は発生するものと思われます。

カエレバを使っている場合

僕はよく記事にAmazonのアフィリエイトリンクを貼るのですが、その時に「かん吉」さんというプロブロガーの方が作った、「カエレバ」というツールを使っています。

こんにちは!こんばんは!どうも、橋尾渡(@hashio_wataru)です! あなたは「かん吉」という人物をご存じだろうか、ブ...

このツールを使う事によって、Amazonや楽天などのアフィリエイトリンクを同時に表示させることが可能なんです。

ですが上記でも言ったように、カエレバでも古いアフィリエイトコードを使っている場合、こちらも画像がうまく表示されず、セキュリティ状態も安全な状態に保てません。

なので、カエレバで使われている古いアフィリエイトコードを「Search Regex」で新しいアフィリエイトコードに置き換える作業が必要になってきます。

スクリーンショット_051718_070311_PM

  • Search pattern:h ttp://ecx.images-amazon.com
  • Replace pattern:https://images-fe.ssl-images-amazon.com

「Search Regex」のページへ移動して、「Search pattern」と「Replace pattern」に上記のアドレスを入力して、「Replace & Save」ボタンをクリックしましょう。

※「Search pattern」の「http」という部分に空白がありますが、これは「Search Regex」を使った時に置き換えられてしまうので、わざと空白を入れてあります。なので、「Search pattern」に書かれているURLをコピーした際は、「http」にある空白を取り除いてください。

スクリーンショット_051718_081109_PM

そしてカエレバをご利用の際、デザインを使用されている方は、下記のURLを置き換えておきましょう。

  • Search pattern:h ttp://img.yomereba.com/
  • Replace pattern:https://img.yomereba.com/
※上図のデザインでは上記のURLでしたが、他のデザインを使用している場合URLが違う可能性があるので、メディア情報などでしっかり確認しておいてください。

Googleのサービスに再登録する

ここまでの面倒な作業を終えたら、最後にGoogleの各サービスに再登録していく作業に取り掛かります。

常時SSL化した時のデメリットという記事にも書きましたが、ウェブサイトをSSL化すると今までの「http」と「https」では、別のウェブサイトとして認識されてしまいます。

なので、Googleアナリティクスと、Googleサーチコンソールに再登録する必要があるんですね。

Googleサービスの詳しい登録方法については割愛させていただきますが、再登録するのはとても簡単なのでそこまで苦労しないと思います。

他にも、各ソーシャルメディアや、色々なウェブサービスに登録されている方は、再設定しておくことをおすすめします。

まぁ、リダイレクト用のコードを「.htaccess」のテキストファイルに記入されていると思われますので、よっぽどのことが無い限り大丈夫でしょう(笑)

終わりに

以上で、ウェブサイトを常時SSL化するまでの基本的な流れを説明した記事は終わりです。

これからのインターネットは常に安全性を求められ、どこのウェブサイトも常時SSL化していくことだと思われます。

特にGoogleはセキュリティ面を重視していますので、まだウェブサイトにSSLを導入されていない方はこの記事をよく読み、ウェブサイトを暗号化させておきましょう!

それではそろそろ、エックスサーバーに無料独自SSLを導入する手順をわかりやすく教えます!についての記事を終わりたいと思います。ありがとうございました!

どうも、こんにちは!橋尾渡(@hashio_wataru)です。 あなたは今、どこのレンタルサーバーをお使いになっていますか?...
スポンサーリンク
レクタングル(大)広告
レクタングル(大)広告
この記事をお届けした
わたろぐの最新ニュース情報を、
いいねしてチェックしよう!

シェアボタンを押して情報を共有しましょう。

フォローする

関連記事