エックスサーバーが独自SSLを無料化したけど、少し面倒でした

エックスサーバーから、独自SSL無料提供のメールが届いたので、早速導入しました。

SSL？

何となく知っていたので、ただならと取り合えず申請したのですが、一瞬早まったかと焦りました。。。

SSL化した後、調べてみると、やらないといけない事が沢山あったんですね。

調べつつ朝までにやった事を書いておきます。今後のためにも。

SSLとか何？

まず、SSLとは何か？から簡単に解説します。

SSL（Secure Sockets Layer）は、利用者のパソコンとサーバー間を暗号化して、データの盗聴や改ざんを防止する仕組です。

パスワードやメールアドレス、秘匿の書き込みなど、サーバー管理者とのやり取りで重要な個人情報を入力する事があります。

これをサイバーテロなどで抜き取られるとまずいという事で、導入されたのがSSLになります。

SSL化したサイトのアドレスは、https と s が付いたものになり、ブラウザによりますが、緑の鍵が表示されたりします。

要は、このサイトと情報のやり取りをしても安全ですよ、という証明になる訳です。

導入すると何か良いことがあるのかというと、今のところほとんどないでしょう。

ただ、Googleは今後、SSLを検索順位の評価の1つにするといっているので、いずれは多少なりとも影響するかもしれません。

あとは、利用者の信頼を得るとか、プロっぽいWebサイトみたいとかですかねｗ

エックスサーバーでSSL化

1．サーバーパネルにログインして、SSL設定のページに移動します。

2．ドメイン選択画面で選択して、SSL設定に入ります。独自SSL設定の追加で、ドメインを設定しますが、www. を選択します。これしか選択肢はないと思いますが、www なしを選択すると、www ありの https を使用できなくなるので注意です。

CSR情報(SSL証明書申請情報)を入力する。これは入力してもデフォルトのままでも良いです。

後は認証されるまで数時間待つだけです。

SSL化してからが大変だった

SSL化するだけなら全てエックスサーバー側がやってくれるので簡単でしたが、実はここからが少し大変です。

WordPressのアドレス設定を変える

1．WordPressの設定を https に変えます。管理画面の設定から、サイトのURLに s を追加します。

2．WordPressの設定が変わったので、管理画面のアドレスも変わり、再ログインする必要があります。一旦ログアウトしてから、もう1度ログインしてください。

HTTPを書き換え

外部リンクや内部リンク、画像に http があると、認証されずアドレスバーに緑の鍵がでません。せっかくSSL化したのに意味なしどころかブラウザによってはダイアログで注意が出るようなので、できる限り修正します。

出来る限りというのは、外部リンクだと相手がSSL化していないと https に書き換えてもリンクできなくなるからです。

手作業で書き換えるのはバカらしいので、「Search Regex」プラグインを使います。

Search Regexプラグインを導入する

アドレスを変換する前にサイトのバックアップを取ってください。

サーバーパネルにバックアップがあるので、念のため全てのサイトのバックアップをダウンロードしておきます。

今回は、「Search Regex」を利用する事にしました。変換は非常に簡単ですが書き換えには注意も必要なので説明します。

まず「Search Regex」をプラグインの追加からインストールして有効化します。

次にツールに「Search Regex」の項目があるのでクリックして設定画面に移動します。

アドレスの書き換えを行ないますが、その前に説明します。

https に書き換えたい所ですが、http を消す方をお勧めします。http を消すと、相対パスになりページを表示する時、自動的に https を追加してくれます。仮に http に戻しても http を追加してくれるので、内部リンクは相対パスの方が良いと思います。

検索文字列を http とせず、http://affiroad として、変換後の文字列は //affiroad とすると、内部リンクだけ書き換えられます。

外部リンクも書き換えて良いなら、検索文字列を http: として、変換後を空欄のままにします。: まで入れるのを忘れないように。

サーバーパネルから必ずバックアップを取ってから実行してください。

1. Search patternには、http から始まる自サイトのURLを入れて検索します。
2. Serchボタンを押すと、検索結果が出るので確認します。大量に出るので、念のためさっと見るだけで良いです。
3. Replaceボタンを押すと、置換する文字列が表示されます。こちらも間違いないか一応確認してください。
4. Replace＆Saveボタンを押すと、文字列の置換が完了して記録されます。

変換できていないものがある

子テーマのCSSとか一部変換されていない可能性があります。

ファビコン

テーマにもよりますが、このブログで使っているSTINGER5だと、直接コードに書き込んでいたので、手動書き換えました。

こちらの記事を参照⇒ ブログのファビコンを変更しました。

子テーマのheader.phpの中の下記のコードです。

<link rel="shortcut icon" href="//affiroad.com/wp-content/uploads/2015/05/faviconsk.ico" />

このようにhttpを削除しました。

手抜き自動アイキャッチ

手を抜くためにランダムに自動で、アイキャッチを入れるようにしたのも、子テーマだったため変換してくれませんでした。

「itiran.php」、「kanren.php」、「newpost.php」の該当する箇所のhttpを削除しました。

修正箇所は下の記事を参考にしてください。

こちらの記事を参照⇒ No imageらしくない画像に変えて手抜きを誤魔化そう

ランキングサイト

人気ブログランキングを貼っていますが、SSLに対応していないみたいです。リダイレクトも考えましたが取り合えず外しました。

single.phpと、サイドバーウィジェットの2ヶ所です。

プロフィール画像

適当に作ったプロフィール画像も変換されていませんでしたｗ。こちらもサイドバーウィジェットから http を消しました。

ソーシャルボタンが対応できていない

STINGER5のソーシャルボタンも変換されていません。外部リンクの http は消していないので当然ですね。

「sns.php」と「sns-top.php」中のhttpをhttpsに書き換えます。それぞれ5箇所にsを追加するだけで完了です。

SSLに対応していないASPのバナー広告

https に対応していない広告があると、アドレスバーに緑の鍵が出ません。しかし、対応していないものは仕方ないので、広告を外すか、該当するページは諦めるしかないです。

（A8は7月26日に一部を除いてSSL化しました。）

テキスト広告ならリダイレクトすれば良いのですが、画像付だと変わらなくなるので不都合がでます。それより何よりコードの改変になるので怒られるかもしれませんね。

テキスト広告のリダイレクトは自己責任ですが、大抵のASPでは不問らしいです。

広告をリダイレクトする

テキスト広告を簡単にリダイレクトする方法を解説します。

リダイレクトすると、アフィリエイトコードを短く出来たり、URLの変更にも簡単に対応できます。ただし、自己責任になるので、ASPや広告主から注意されたら素直に元に戻しましょう。

.htaccessにリダイレクトコードを書き込む方法もありますが、「Redirection」プラグインを導入する方法が最も簡単です。John Godley氏のプラグインです。

使い方は簡単です。

グループを例えば、広告として、新しい転送ルールを設定するだけです。

ソースURLにリダイレクトコード、例えば、/redirect/sample/とします。

そして、ターゲットURLにアフィリエイトのURLを入れるだけです。

まだ緑の鍵が出ない人

画像かリンクが https になっていないと緑の鍵はでません。もしくは、鍵の前に！が表示されたりします。

解決する為には問題のある http を徹底的に探すしかありません。

画像の探し方ですが、アドレスバーの鍵マークをクリックすると、出てくるポップアップ画面の右側の ＞ 先の詳細を表示ページのメディアで確認できます。

外部や内部リンクは、ページのソースを表示して、http: で検索して探します。

FireFoxは・・・

Google Chromeは問題ないようですが、Firefoxはなぜか灰色の！が出ています。別の自サイトでは問題ないようですが、他の人のサイトでもChromeでOKでもFirefoxだと駄目な場合があるようです。

ソースを見ると、ajaxのURLが http になっている事が原因でした。ajaxは https に対応しているようなので、function.phpファイルからURLを探して、s を付けるか、http を消せばOKです。

Analytics

https に変えるだけなので簡単です。

アナリティクス設定 → プロパティ設定 → デフォルトのURLで、https を選択して、保存するだけで完了です。

Search Consorl

Search Consorl、、、いつの間にかウェブマスターツールから名前が変わっていますが、ちょっとだけ面倒です。

httpsバージョンを登録しますが、その他のバージョンも登録した方が良いです。

その他のバージョンとは、https://を含む、https://www.、http://、http://www.の全4バージョンです。

要するに、http のwww ありとなし、https のwww ありとなしの4パターンですね。

1つでも登録していないと、どれか1つだけ優先するバージョンを設定できません。

登録方法は、プロパティを追加 → Google アナリティクス アカウントを使用します。

最初の選択でHTML～と出ていた場合、別の方法のタブにアナリティクスアカウントを使用があります。

地道に4バターン追加してください。

次に、優先するバージョンを設定します。

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

2の優先するバージョンを設定ページでwww ありか、なしか好きなバージョンを選んでください。

あと、3の国を選択で日本を選択した方が、グラフの時間が日本時間になります。デフォルトはアメリカになっているので、時間が半日ほどずれていたはずです。

最後に、https:// バージョンだけサイトマップを送ります。サイトマップの追加に、「sitemap.xml」を追加します。

今までのサイトマップは消しても良いと思いますが、念のため https が全てインデックスされるまで待っても良いでしょう。

リダイレクト

これは最重要です。

元のURLから新しいURLにリダイレクトします。

リダイレクトすると、http にアクセスした人も https に移動させる事ができます。それから、元の評価も新しいURLに移せるので、順位を落とさずにすみます。

最も簡単な方法は、.htaccessにリダイレクトコードを書き込む事です。

サーバーパネルに.htaccess編集があるので、編集画面に移動してください。

RewriteEngine on

RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://affiroad.com/$1 [R=301,L]

RewriteEngine onは元からあるはずなので、2行目以降を書き込みます。

https://affiroad.com/ の部分は、自分の新しいアドレスを入れてください。このままコピペすると面白いことになります私が。そしてあなたは面白くない事になるので細心の注意をしてください。

http のアドレスを入力してリダイレクトされたら成功です。確認を怠らないように。

まとめ

ちょっと面倒でしたが、何とか上手くいったと思います。特に最後のajaxは悩みました。。。他の外部リンク先がSSL化していない問題は、今後徐々に対応するのを待つしかありませんね。

SSL化は、いずれ必須になると思われるので、導入するなら早いに越した事はないです。エックスサーバーなら永久に無料ですよ。

SSL化でちょっとだけカッコいいサイトへ

エックスサーバーのアフィリエイトコードは http でも、エックスサーバーが https に対応しているので問題ないようです。

⇒ エックスサーバー公式