お名前.comの【共用サーバーSD】で0円SSLを利用する方法

スポンサーリンク

私が利用していますお名前.comのレンタルサーバー(共用サーバーSD-01)も無料でLet’s EncryptによるHTTPS化ができる様になり私のブログも常時SSL化を実現することができました。

SSL化は、新規からなら簡単なのですが今まで「http:」で長年ブログを続けていて途中からSSL化「https:」に変更するとなると大変な作業となります。

 

(※画像をっクリックすると拡大されます!)常時SSL

SSL化とは何?

SSL化する事で インターネット上でデータを暗号化して送受信するから第三者からデータを盗み見られたり、改ざんされたりするリスクが激減します。
昔は、銀行や物販サイトのようなお金のやり取りをするECサイトではSSL化されていました。

常時SSL化のメリット・デメリット

メリット

  • セキュリティの強化(第三者からデータを盗み見られたり、改ざんされたりするリスクが激減する。)
  • 信頼性の向上(↑上記の理由から)
  • SEOに有利(httpのサイトよりhttpsのサイトの方が検索順位が優遇される。)

デメリット

  • 運用コストの増加(無料のモノから有料のモノまであります)
  • 広告収入の減少リスク(AdSense では、HTTPS 対応ページに掲載する広告を決めるオークションから、SSL 非準拠の広告を除外している。)
  • ソーシャル系ボタンのカウントがリセットされる(http:からhttps:に変更した場合)

WordPressサイトのSSL化の手順

準備としては、以下の通りに進めて行きます。

1.事前にブログのバックアップをとる
2.お名前.comでSSL設定を行う
3.WordPressの設定からURLを変更する
4.内部リンクをSearch Regexで全て置き換える
5. .htaccessにリダイレクト用のコードを追記する
6.SSLのエラーチェック方法

事前にブログのバックアップをとる

私は、WordPressのバックアップは、プラグイン「WP-DBManager」を使ってブログのバックアップを取っています。

バックアップについては、それぞれ今までのやり方でバックアップを取って下さい。

お名前.comでSSL設定を行う

お名前.comの共用サーバーSDのコントロールパネルの「Web設定」の中にある「SSL設定」よりSSL設定を行います。

コントロールパネル

最初に思っていたSSL化設定をする事による心配事!

HTTP から HTTPS への常時SSL化には、ちょっと心配を抱いていました。

私は、ホームページやブログなどを 同じドメインで全8個をお名前.comのレンタルサーバーで所有していますので もしサイトをSSL化設定してしまうと今まで「http://」で表示されていたブログやホームページが、表示されなくなるのではないかという心配がありました。

しかし実際にSSL化を 行ってみるとWordPressでのURLを「https://」に変更をしない限り「http://」でも「https://」でも両方表示されましたので サーバーをSSL化設定したからといってSSL化していないサイトが、見られなくなってしまうという事は無かったで安心しました。

SSL設定を行う前の確認!

お名前.comのレンタルサーバーでは、SSL設定を行う前の注意として下記の様な事が書かれていました。

独自SSL Let’s Encrypt は、下記要件を満たしている状態でコントロールパネルより設定が可能となります。

・共用サーバーで利用しているドメイン(サブドメイン)
・該当ドメインのネームサーバーが共用サーバー指定のものであること

プライマリDNS : dns01.gmoserver.jp
セカンダリDNS : dns02.gmoserver.jp

 

 

そこでコントロールパネルの「サービス設定」の「サーバー情報」より「ドメインのネームサーバー」を確認します。

サーバー情報

 

ドメインのネームサーバー

上記を確認したらコントロールパネルの「SSL設定」から「SSL設定ー Let’s Encryptー」より「新規作成」をクリックして「確認画面に進む」をクリックし「決定」をクリックします。

SSL設定

※サブドメインをSSL化する場合は、メインドメインとは、別にサブドメインを選択しなくてはなりません。

SSL設定

SSL設定決定

SSL設定完了

これでSSL設定は、完了です。

「SSL設定トップに戻る」と「状態」は、「稼働中」となっていますが、最初の説明にもあった様に「SSLの証明書」の実反映までには、30分以上かかる場合もあるということです。

稼働中

 

1時間ほどして「https://seikou38.com/home/」を確認しましたらまだ表示されませんでした。

Chrome

Chrome

 

Firefox

Firefox

 

Internet Explorer

Internet Explorer

 

1時間30分経ってもう一度確認するとSSL化されて表示されていました。

そこでサロンのホームページ全てを確認すると「https://」が、緑色の表示が、されていないページも確認できました。

この段階で サイトをSSL化しただけでホームページの修正をする事無く 私の所有するいくつかのホームページは、「https://」が、緑色で鍵マークが表示されたサイトがありました。(iPhone6からも鍵マークの確認ができました。)
シンプルなホームページほどSSL化しやすい様です。シンプル・イズ・ザ・ベストですね。いくつかのサイトを持っておられる様でしたら まずは、小さなサイトからSSL化を 試みられるのが良いかと思います。

WordPressの設定からURLを変更する

次に、Wordpress管理画面から「設定 」→「 一般」設定を開きます。

「一般設定」にある以下の項目を変更します。

一般設定

https

  1. WordPressアドレス(URL)
  2. サイトアドレス(URL)

それぞれのURLの「http」部分を「https」に変更し一番下の「変更を保存」をクリックします。

変更を保存

そうすると「IDとパスワード」の入力画面が、表示されますのでそこへ入力して設定画面に入り直しURLの設定は完了です。

パスワード入力

※WordPressアドレス(URL)とサイトアドレス(URL)の「https:」への変更は、必ずサイトをSSL化したあとで行いましょう。

先にURLを 変更してしまうと自分のブログや管理画面に入れなくなってしまいます!

内部リンクをSearch Regexで全て置換する

新規プラグインより「Search Regex」をダウンロードしてインストールし有効化します。

Search Regex

 

有効化できましたらサイドバーのツールより「Search Regex」を立ち上げます。

 

Search Regex

 

このプラグインを使って「http://~」から「https://~」への置き換えを行います。

この時に「http://ドメイン名」→「https://ドメイン名」まで書く方が良い様です。

【例】http://seikou38.com/  → https://seikou38.com/

その理由は、ブログ内で外部へリンクを張っている場合その外部リンク先の「http://~」までもが、「https://~」に置き換わるからです。

但し http://seikou38.com/  → https://seikou38.com/ に置き換え

上記の様にして置き換えを行った場合は、下記の様にURLに「www.」が、記述している箇所は、置き換わりませんのであとで 手直ししなくてはなりません。

http://www.seikou38.com/ → https://seikou38.com/ に置き換え

searh_reqex

searh_reqex

 

「Replace」ボタンを押すと、下記の図のように「こんな感じで置換を行うよ」という一覧が表示されます。
この時点では、まだ変換はされません。Search Regexが置換する部分は、赤色で表示されています。

薄緑色の上が置換前の状態で、薄黄色の下が置換後のソースコードになります。

 

searh_reqex

 

ここで置換するURLは間違っていないか?置換後のURLは間違っていないか?のチェックをしておきます。

間違いがないようでしたら「Replace & Save」ボタンをクリックして置き換えを実行します。

 

searh_reqex

 

「Replace & Save」ボタンをクリックするとあっという間に終了しました。

下の赤で囲んでいるところに「258」と数字が、表示されています。

これで置き換え完了です。

 

searh_reqex

 

あとは、手作業でサイト全体のページが、鍵マークと「https://」が、緑色の表示になっているかを確認して なっていないページは、原因を突き止めて手直しします。

私のページでも2カ所ほど鍵マークと「https://」が、緑色の表示になっていないページがありました。

調べてみると「Search Regex」で すべて「https://」に変更したはずなのに2カ所「http://」のままで置き換わっていない箇所がありました。

その箇所を「https://」に変更すると「https://」の鍵マークが、緑色に表示されました。

これでホームページ自体は、SSL化は完了です。

※もしもリンク先のURLが「https://」に対応していない場合の解決策として「http://example.com/」の「http:」を除外して「//example.com/」の様に記述にします。但し「//example.com/」にするとアクセスできないサイトもありますので 確認してから行いアクセスできないサイトは、「http:」のままおいておきます。

 

次は、「http://」のURLで検索された時に新しい「https://」のURLに誘導する仕掛けの設置です。

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

まずは、サイト上にある.htaccessファイルをダウンロードします。

(※.htaccessファイルをダウンロードしたらまず最初に.htaccessは、非常に重要なファイルなのでもしもの時の為にコピーを取って保存しておきましょう。)

ダウンロードには、2つの方法があります。

一つは、FFFTPソフトを使う方法と お名前.comのレンタルサーバーのコントロールパネルにあるファイルマネージャーを使う方法です。

【FFFPを利用する方法】

FFFPを使って WordPressのwpフォルダーと同じ階層にある.htaccessファイルを 任意のフォルダーにダウンロードします。

 

FFFTPダウンロード

 

ダウンロードが完了したら.htaccessファイルを notepadなどのテキストエディタで開きhttp://のサイトにアクセスした時に、https://にリダイレクトする301リダイレクトのコードを追記をします。

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

 

※.htaccessファイル記述するときは、

# BEGIN WordPress

# END WordPress

の上または下に記述します。#〜#の中に記述しますと WordPressを更新した場合記述したコードが消えてしまいます。
追記が完了したらまたFFFPを使って同じ場所へ上書きアップロードします。
これで完了です。

 

スポンサーリンク

FFFTPアップロード

 

 

【コントロールパネルのフィルマネージャーを利用する方法】

コントロールパネルより「サービス設定」の「サーバー情報」をクリックします。

 

サービス設定

サーバー情報

「ユーティリティー」の「ファイルマネージャー」のURLをクリックします。

 

ファイルマネージャー

 

パスワード入力画面になりますので FTPアカウントとパスワードを入力して「ディレクトリ: /」に入ります。

 

アカウント・パスワード入力

 

ここでもし「FTPアカウント」と「パスワード」が、わからない場合は、いったんコントロールパネル画面にもどりその中の「Web設定」の「FTP・SSHアカウント」をクリックします。

 

FTP・SSHアカウント

 

するとその中のページで「FTPアカウント」と「パスワード」を確認できます。

 

管理者アカウント

 

「ディレクトリ: /」の中に入ったら表示されている今回SSL化(https化)するドメインをクリックします。

 

ダウンロード

 

するとディレクトリやファイルが、表示されますのでディレクトリの中の.htaccessをクリックするとダウンロードがはじまります。

 

ダウンロード

 

.htaccessをダウンロードが、完了したらそのファイルを開いてhttp://のサイトにアクセスした時に、https://にリダイレクトする301リダイレクトのコードの追記をします。

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

 

※.htaccessファイル記述するときは、

# BEGIN WordPress

# END WordPress

の下に記述します。#〜#の中に記述しますと WordPressを更新した場合記述したコードが消えてしまいます。
追記が完了したらまた同じ場所へアップロードします。

お名前.comのレンタルサーバーでは、次の様な注意事項があります。

<注意事項>
.htaccessを設置すると、そのディレクトリ以下においてコントロールパネル で 設定された以下の機能が無効となりますのでご注意ください。
◆ .htaccessの影響により、利用できなくなるコントロールパネルの機能

  • アクセス制限
  • エラーページ設定
  • ドメイン(ホームページ)の転送
  • モバイル転送

 

追記が完了して.htaccessファイルをアップロードする時は、ファイルマネージャーのアップロードをクリックします。

 

アップロード

アップロード

 

「ファイルを選択」をクリックして追記が完了した.htaccessファイルを選びます。

 

アップロード

アップロード

 

「ファイルを選択」の横に選んだ.htaccessファイルが表示されてる事を確認してアップロードボタンをクリックして完了です。

以上「FFFTPソフト」を使う方法と お名前.comのレンタルサーバーの「ファイルマネージャー」を使う方法の紹介でした。

 

アップロードが、完了しましたら一度お使いのブラウザで「http://〜」のURLでアクセスして「https://〜」にリダイレクトされるかを確認してみて下さい。
※この時にブラウザが、サーバーエラーになりましたら.htaccessファイルに追記する前に取った.htaccessファイルのバックアップを 元の場所へ上書きアップロードします。(あと.htaccessファイルへの追記したコードに誤りがないか確認します。)

 

サイト内にいくつかのブログを作っている場合は、301リダイレクトのコードを追記した.htaccessファイルは、ブログ単位でのディレクトリに置く方がよさそうです。

 

SSLのエラーチェック方法

次は、パソコンやスマホのブラウザでブログにアクセスした時に 緑色の鍵マークが、表示されて「https://〜」になっているでしょうか?

パソコンとiPhone6のsafariでのフルサイズとモバイルサイトでの鍵マークが表示のされ方です。(WordPressサイト

ブラウザ種類 URL
Google Chrome グーグルクロームSSL化
Firefox ファイヤーフォックスSSL化
Internet Explorer インターネットエクスローラSSL化
safari
フルサイズ
safariフルサイズ
safari
モバイルサイト
safariモバイル

 

上記のように表示されていましたらSSL化成功です。

 

もし下記のように 緑色の鍵マークが表示されない場合は、ページ内の一部(画像など)が安全に呼び出されていない状態か「http://」が、残っているかまたは、プラグインの影響があるものと思われますので次の項「Chromeのデベロッパーツールでチェック」と「Firefoxのページ情報ダイアログでチェック」を試してみて下さい

Google ChromeSSL化NG

 

Chromeのデベロッパーツールでチェック

アドレスバーの確認をします。左側に緑色の鍵マークは、表示されているでしょうか? 表示されていましたら次は、右側を見ます。
このアドレスバーでは、緑色の鍵マーク表示は、されているものの右側には、「盾のマークに×」の表示がされています。

アドレスバーの左側だけ見ていると見逃してしまうので右側も確認する必要があります。

 

Chromeのデベロッパーツール

盾のマークに×の表示は、HTTPスクリプト(JS)が混じっている事を表しています。

この表示を消すためには、 ページ上でパソコンの「F12」キーを押してツールを立ち上げます。そして、Console(コンソール)タブを選択します。

 

Chromeのデベロッパーツール
バックの色が、赤くなって表示されてる箇所に原因が有るという事です。
その中に書かれているURLのページにHTTPスクリプト(JS)が、混じっている事を知らせています。

次にメニューバーのNetworkを選びます。
Chromeのデベロッパーツール

「F5」と表示されていますので 「F5」キーを押します。
すると下記のようにデータが表示されます。

赤枠【3】で囲っている赤字で表示されている「ke●●●●●.js」のファイル名に注目して下さい。

 

Chromeのデベロッパーツール

 

上の赤枠【5】で囲んでいるConsole(コンソール)を見ると「https://seikou38.com/jot_auto_uwajima_link.cgi」の中に「http://seikou38.com/joto/ke●●●●●.js」のリンクが、【6】「http:」のままで書かれているのでこれを「https:」に書き換えれば良いという事ですね。

「https:」に書き換えてアクセスすると「盾のマークに×」の表示が消えます。

Chromeのデベロッパーツール

Firefoxのページ情報ダイアログでチェック

アドレスバーの「鍵マーク」をクリックします。

 

Firefoxのページ情報ダイアログでチェック

右側の「>」矢印をクリックします。

Firefoxのページ情報ダイアログでチェック

 

下の「詳細を表示」をクリックします。

 

Firefoxのページ情報ダイアログでチェック

 

上の「メディア」を クリックします。

 

Firefoxのページ情報ダイアログでチェック

 

画像のURLの一覧が、表示されます。
ここで「http://」のURLが、あればそのファイルの中に記述されている「http://」を「https://」に修正します。

Firefoxのページ情報ダイアログでチェック

全て修正してから更新すると緑の鍵マークが、表示されます。

グーグルクロームSSL化

もしこれらを試しても 緑の鍵マークが表示されない場合は、プラグインを疑ってみて下さい。

WordPressにインストールして有効化している全てのプラグインを いったん停止にしてみて 緑の鍵マークが、表示されるかの確認をしてみて下さい。

もし表示されていれば原因は、プラグインという事になりますから 次は、停止したプラグインを一つずつ有効化して行き 緑の鍵マークの表示が、消えるか確認しながら原因のプラグインを探します。原因のプラグインが、見つかればそのプラグインは、停止したままにしておくか削除します。

一応これでサイトのSSL化は、完了です。

あと「Google Analytics」や「Google Search Console」を 使われている場合は、そちらもSSL化したサイトのURLを「http://」から「https://」に変更登録をしなくてはなりません。

 

まとめ

今、SSL化へ移行するサイトが増えてきています。
SSL化するのであればやはり新規サイトからすると簡単にSSL化できますが、今までhttp:だったものをhttps:に変更する場合は、サイトをhttps:に対応させるためには、状況によっては大変な作業となります。

これから先もブログを続けて行くのであればいつかは、https:に 変更しなくてはならないと思います。
http:のままにしておくと「安全でない」と表示されてしまいますしiPhoneやiPadのアプリでサイトが表示されなくなってしまいます。

「アップル、「iOS」アプリにHTTPS接続を義務づけへ–2017年1月から」や「Google、検索結果ランキングでHTTPS対応サイトを優遇へ」とアナウンスされています。

いくつかのサイトを持って居るのであれば、まずは規模の小さなサイトからSSL化すると良いと思います。

私のサイトの場合ホームページビルダーなどのソフトで作っているサイトは、問題なくすんなりとSSL化できました。

これは、サイト内のリンクが、絶対パスではなく相対パスでリンクが、張られているおかげです。
サイトをSSL化する場合は、まずは手順をメモに書き出してそれに沿って進めて行くと良いですよ。

スポンサーリンク

コメントを残す

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