エックスサーバーで無料独自SSLを導入して緑の鍵マークを表示させる方法

公開日:2016年7月1日 

エックスサーバーで無料独自SSLを導入して緑の鍵マークを表示させる方法

エックスサーバーで独自SSLが無料で使えるようになり、さっそく実験サイトで導入してみました。しかし、そのままだとhttpとhttpsどちらでもアクセスできてしまいますし緑の鍵マークも付きませんので、URLの正規化と緑の鍵マークが表示されるように設定しました。


昨日(2016/6/30)からエックスサーバーで独自SSLが無料で使えるようになりました。

全サーバープランで独自SSLが無料・無制限に利用可能に!「独自SSL」機能の強化のお知らせ

導入方法はマニュアルでご確認ください。
とっても簡単です。数クリックするだけで導入できます。
で、私もさっそく導入してみたのでその時に設定したことについてメモっときます。

すでに運営しているサイトをSSL化した時にsecureにならない(グリーンの鍵マークが出ない)場合、この方法でsecureになります。

greenkagi

httpからhttpsに転送する(URLの正規化)

これを設定する意味

この設定をしないと非SSL(http://)でもアクセスできてしまいます。
URLのwww有り無し問題みたいなもので、SSLも統一しといた方がいいと思います。
すでに稼働しているサイトで外部サイトからリンクされている場合、当然httpでリンクされていると思いますので、それをhttpsに転送してやるんです。

それと、もうひとつ大事なことは、過去の画像などの転送です。
過去に絶対パスで画像を貼っていた場合、http://で画像にアクセスしてしまいます。
その画像などのアドレスをhttps://に転送するためにこの方法を使います。
これをしないと緑の鍵マークが表示されないはずです。

.htaccessに記述する

.htaccessに下記を追記

いつも思うんですが、htaccessについて調べ物した時に上級者用のサイトばかり見つかって、実際にどう追加していいかわからないことがあります。
例えば、既に<IfModule mod_rewrite.c></IfModule>がある場合どうするのか?重複してもいいのか?とか…

なので、今現在実際に設定できているサイトの実例を画像で貼っておきます。

エックスサーバーにwordpressをインストールしてる場合の実例
記述例1

ちなみに以下のようにしても動作します。
記述例2

WordPressの設定

WordPressの場合はもう一箇所修正します。
こっちはWPの管理画面から簡単にできます。

これを設定する意味

これを修正しないとwordpress関数の<?php bloginfo(‘url’); ?>などで、非SSLのURLが吐き出されます。つまり、今後記事内で画像を貼る時も「http://〜」というパスになってしまいます。

設定方法

WordPressの設定

設定 → 一般 の「WordPressアドレス(URL)」と「サイトアドレス(URL)」のhttpをhttpsに変更するだけです。変更というか「s」を追加するだけ。

これらをやっても緑の鍵マークが表示されない場合

greenkagi

上記の設定をしても緑の鍵マークにならない場合、原因をひとつずつ見つけるしかありません。

SSLエラーの探し方

chromeの場合で説明します。

SSLエラーの探し方1

白い書類のようなアイコンをクリックして詳細をクリックします。

SSLエラーの探し方2

このような画面が開くので、エラーマーク(SSLエラーマーク)をクリックします。
そうすると画面下部に詳細が表示されますので、その該当箇所を修正します。

エラーは環境によって様々あると思いますが、私の場合、テーマファイルで扱っているURL関係が該当してました。
具体的に言うと賢威7というWPテーマのトップページの画像です。この場合はWPの管理画面で画像URLを修正したら直りました。

google search console(さちこ)も修正する必要があるかも

あと、グーグルサーチコンソールも設定しなおす必要があるかもしれません。
私以前からSSL対応のサイトをいくつか運営してるのですが、サーチコンソールではこのようになってます。

さちこ

これらのSSLサイトは最初からでしたので、途中で変更した場合どうするのが最適解なのかしりませんが、さちこの事も忘れないでくださいとだけ言っておきます。あとはぐぐってみてください。(放棄)

以上です。


それにしてもエックスサーバー、独自SSLが無料だなんてやってくれますね。
これからもメインサイトはエックスサーバーを使っていきたいと思います。

We are Xxxxxxxxxxxxx!!!!!!!!!!!!!!