昨年、GoogleはSSL対応をしているサイトは検索ランキングで優遇すると発表しました。
そこでBlogのSEO対策としてSSL化は必須です。
そのため先日サイトのSSL化を行いました。
ただ、このBlogはさくらインターネットのレンタルサーバーで運用しているのですが、さくらインターネットでは無料のSSLサービスがあります。ただ、私もSSLを行う際に知ったのですがさくらインターネットはサーバ仕様が特殊らしくSSLの対応が非常に大変です。
そのためさくらインターネットからもSSL用のプラグインも出ているのですが、それだけでは上手くいかず色々と対応しなければなりません。
対応方法はネット上でも出ています。
しかし！それではうまくいかない方もいらっしゃると思います。
事実、初心者の私はそれでも上手くいかず４時間くらい途方にくれました。
特にこのBlogはテーマにWordPressテーマ「ストーク」
というテンプレートを使っているためおそらくそれが何かエラーを出しているのだろうと推測しましたが、
インターネット上にストークのさくらインターネットSSL化情報は皆無でした。
そこで私のSSL格闘記を記すとともにもし同じ現象が生じている方がいらしたら参考にしていただければと思います。
目次
SSL化する前にまずすること（バックアップ）
まずすることとしてはバックアップです。
今回、さくらインターネットでSSL化する際に.htaccessやphpの書き換えを行います。
また、何か失敗した際の保険にもなりますのでバックアップを行いましょう。
バックアップの方法は以前ご紹介しました方法で行えば完璧です。
さくらインターネットでSSLを設定する（基本）
ここからさくらインターネットのマニュアル通りにSSLの設定を行います。
SSLの設定
下記リンクより無料SSLの設定を行います。
常時SSL化プラグイン”SAKURA RS WP SSL”を使う
SSLの設定が完了したら、WordPressのプラグインより「SAKURA RS WP SSL」をインストールして一括でhttpからhttpsへ変換を行います。手順については下記リンクをご参照下さい。
しかしここまででは、CSSが引き継がれず下層ページが崩れます。
そこで.htaccessとwpconfig.phpに追記が必要になります。
さくらインターネットSSL設定（応用）
.htaccessへの追記
.htaccessよりhttpからhttpsにリダイレクトするように記述します。
.htaccessですがファイルマネージャーより下記の位置にあります。
「編集」をクリックして下記の記述文を先頭に入れて下さい。
またドメイン名の部分にご自分のサイトのドメイン名を代入して下さい。
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://ドメイン名/$1 [R=301,L]
</IfModule>
wp-config.phpに追記
同様にwp-config.phpに追記します。
wp-configは先ほどの.htaccess同様の階層にあります。
「編集」をクリックして下記コードをコピペします。
if( isset($_SERVER[‘HTTP_X_SAKURA_FORWARDED_FOR’]) ) {
$_SERVER[‘HTTPS’] = ‘on’;
$_ENV[‘HTTPS’] = ‘on’;
}
場所は
// 注意:
// Windows の “メモ帳” でこのファイルを編集しないでください !
// 問題なく使えるテキストエディタ
// (http://wpdocs.sourceforge.jp/Codex:%E8%AB%87%E8%A9%B1%E5%AE%A4 参照)
// を使用し、必ず UTF-8 の BOM なし (UTF-8N) で保存してください。
の下にしてください。
ここまで行けば大体の人がCSSも引き継がれデザインが崩れずSSLが完了するはずです。
しかしまだ私の場合まだ下のように崩れました。
トップページの下に大きな空白が・・・
ネットで調べてもこれ以上の対象方法は出てきません・・・」
特に私のブログではテンプレートに有料のテーマであるストークを使っているためかとも思いましたが、ストークでの対応方法は全く出てきません。（実際は関係ないかもしれないですが・・・）
そのような場合にまずどこが原因でSSLが失敗しているのかを調べる必要があります。
Firefoxで確認する
FirefoxでSSL失敗のページを開くと原因を調べることができます。
Firefoxで開くとURLの左横に鍵マークがついてウェブサイトへの接続性が確認できます。
正常な場合
部分的にしか暗号化されておらず、盗聴者の攻撃を防ぐことができない場合
SSLを失敗している人はこの黄色の！マーク付きの鍵が表示されます。
その鍵マークをクリックし開いた画面の＞マークをクリック。
「詳細を表示」をクリック
メディアを選択するとページ内の画像リンクのURLが表示されます。
赤枠のようにまだhttpのままでhttpsに置換できていないのがかなりあります。
これによりSSL化失敗の原因が明らかになりました。
http→httpsに一括置換できるプラグイン「Search Regex」を使う
ただ、サイトの画像ひとつひとつ手作業でhttpsに修正するのは大変です。まして初心者であればどうやって修正すればいいかわからないため登録画像を削除して再登録するしか方法が分かりません。
この手作業の修正に私は途方にくれそうになりました。
しかし、そのような状況を打破してくれるプラグイン「Search Regex」を使えば解決します。
これを使えば登録データのhttpからhttpsの変換が一括で行うことができます。
ただ逆に言うと間違えた場合は全て間違えて置換されてしまいます・・
そのためこのプラグインを使う際は必ずバックアップをとりましょう。
使い方ですが、
まずワードプレスダッシュボードのプラグインページ＞新規プラグイン＞Search Regexで検索＞インストール＞有効化をして下さい。
有効化したらワードプレスダッシュボードの左側のツール＞Search Regex を開きます。
下記画面が開きます。
①Source：投稿コンテンツから、コメントからなど選択できますが、デフォルトのPost contentのままで基本的にはOKです。
②Limit to：選択する上限を指定できます→あまりにも該当箇所が多いと処理しきれなくなる場合があるので注意してください。
③Order By : 確認表示の並べ方を上昇表示か下降表示にするかの設定です。
④Search pattern：検索したいキーワード、箇所記入欄で、置換しなければならないテキストを入力します。
⑤Replace pattern：どう置換するのかの指定欄です。
⑥Regex : デフォルトのチェックなしで問題ないです。
⑦Search：検索→確認したいキーワードをサイト内から単純に検索できます。
⑧Replace：置換する箇所、置換後はどうなるかを一覧で確認できる画面を表示してくれます。
⑨Replace＆Save：置換を実行するボタンです。
（実行すると元に戻すにはバックアップから復元するか手動で書き直すか、部分的に呼び出して少しづつ変換していくかしかないのでご注意ください）
やり方は下の図のように「Search pattern」にhttp://ドメインを、「Replace pattern」にhttps://ドメインを入力します。そして「Replace」で確認してから問題なければ、「Replace＆Save」をクリックし実行します。
実行後、登録ページの画像等、全てがhttpsに変換します。
変換後、Firefoxで再度画面の確認をします。
トップのメイン画像を差し替える
Firefoxで確認すると・・・
トップページがまだ崩れています・・・
正直、この段階で崩れていたときは「終わった」と思いましたが、
下層ページは成功しています！
そこで気を落ち着け再度Firefoxでトップページの原因を確認します。
すると、トップのメイン画像だけがhttpのままでした。
一括変換のプラグイン「Search Regex」ではトップ以外のページは成功したようです。
そこで、再度トップのメイン画像を再度ナビの外観＞背景のヘッダー背景画像を削除し、再度画像をアップロードして再登録します。
すると・・・
鍵マークが緑色になっています！レイアウトも崩れていません！
成功しました！（涙）
まとめ
さくらインターネットでのSSL化は初心者には結構ハードルが高いのですがなんとか成功しました。
特にレイアウトが崩れた際は有料テーマ「ストーク」が原因なのかそれ以外が原因なのかわからず途方にくれました。（実際今もレイアウト崩れの原因がストークなのかは分かりません）
ただ今回の一連の作業をまとめると
- バックアップ
- さくらでSSL対応
- プラグイン「SAKURA RS WP SSL」を利用。CSS読み込み失敗（ここまでは失敗しても簡単に元に戻せます。）
- CSS読み込み対策とリダイレクト対応として.htaccess、wp-config.phpに記述。（ここで失敗するとログインできなくなる場合があります。）
- 登録画像のURLをhttp→httpsへプラグイン「Search Regex」で全て変更。（全URLが変更するので確認してから置換して下さい。）
- トップの画像を再登録
- 完了
の流れになります。
ひとつひとつ対応していけば必ず成功しますので諦めず、特にストークを使用している方でレイアウトが崩れたりSSLが失敗した方は是非、参考にして下さい。
コメントを残す