ブログ運営

AFFINGER(WING)でSSL化(https)対応全手順【注意点・エックスサーバー】

2018-06-28

AFFINGER(WING)でSSL化(https)対応全手順【注意点・エックスサーバー】
つぶろ
こんにちは!つぶろ@リーマンブロガーです!

この度、このサイトを「常時SSL化」にいたしました!

やろうやろうと思ってやっていなかった常時SSL化、やってみたら案外あっさりできたので記事にまとめたいと思います。

合わせてこちらの記事もどうぞ

ちなみに自分はエックスサーバーを使用して、テーマはAFFINGER(WING)を使用しています。

ぴったり当てはまるって方はこの記事が助けになるのではと思います。

こんな方におすすめ

  • エックスサーバーを使っている方
  • AFFINGER(WING)を使っている方
  • 途中で諦めない方

なぜやろうと思ったのか

6月末が迫った今、突然「お名前.com」からこんなメールが届きました。しかも【重要】付き。

AFFINGER(WING)でSSL化(https)対応全手順【注意点・エックスサーバー】

あー、なんかたまに聞いてたけどやってなかったな。

中を読むと

AFFINGER(WING)でSSL化(https)対応全手順【注意点・エックスサーバー】

こんな事言われたら動かざるをえないでしょ・・・うちのサイト、既にアドレスの横に警告が出ていました。

AFFINGER(WING)でSSL化(https)対応全手順【注意点・エックスサーバー】

ということで重い腰を上げました。

かかった時間は2時間

重い腰を上げてやってみたものの、かかった時間は2時間。

  • エックスサーバー上での手続きが一瞬2分くらい。
  • サイト切り替え中(アクセスできない)が1時間くらい。
  • WordPressや内部リンクの設定で1時間くらい。

案外かかりませんでした。次から手順を踏んで解説しますので軽い気持ちで取り掛かりましょう。

常時SSL化手順解説

エックスサーバー上でSSL手続き

エックスサーバー手続き後は1時間ほどアクセス不可になるので注意

AFFINGER(WING)でSSL化(https)対応全手順【注意点・エックスサーバー】

エックスサーバーのサーバパネル(直リンク)にログインし、「SSL設定」をクリック。

AFFINGER(WING)でSSL化(https)対応全手順【注意点・エックスサーバー】

ドメイン選択画面からhttps対応をするドメインを選択する。

AFFINGER(WING)でSSL化(https)対応全手順【注意点・エックスサーバー】

「独自SSL設定の追加」をクリックし、設定対象ドメインからサイトを選び、「独自SSL設定を追加する(確定)」を押してください。

「CSR情報(SSL証明書申請情報)を入力する」は必要?

結論から言うと個人ブログなら必要なし。会社などの組織がSSL化を実装する場合はつけましょう。

AFFINGER(WING)でSSL化(https)対応全手順【注意点・エックスサーバー】

「SSL新規取得申請中です。しばらくお待ちください。」の文字。

AFFINGER(WING)でSSL化(https)対応全手順【注意点・エックスサーバー】

自分の場合、10秒ほどで完了しました。

AFFINGER(WING)でSSL化(https)対応全手順【注意点・エックスサーバー】

「SSL設定の一覧」から「SSL用アドレス」を確認すると「https」になっている!これでエックスサーバーは完了。

「無効なURLです。プログラム設定の~」が出てアクセスできない。

エックスサーバーでの手続きを終えると自分のサイトにアクセスできなくなります。

AFFINGER(WING)でSSL化(https)対応全手順【注意点・エックスサーバー】

こんな画面。1時間ほど待ちましょう。できればアクセスが少ないときにやりたいですね。

その間、WordPress管理画面もまともに使えませんので焦らずに待ちましょう。

1時間ほどでアクセス可能になる

AFFINGER(WING)でSSL化(https)対応全手順【注意点・エックスサーバー】

1時間ほど待って開くと無事にアクセスできるようになりました。ほっとした。。

そしてここを見てください。

AFFINGER(WING)でSSL化(https)対応全手順【注意点・エックスサーバー】

無事にhttpsに変わってる!そして「この接続は保護されています」キターーーー!

余談:エックスサーバーの無料独自SSLの自動更新設定

エックスサーバーが提供する無料独自SSLの有効期限は発行日から90日間となります。

3ヶ月毎に手続きが必要かと思ったんですがエックスサーバー側で自動更新を無料でやってくれるそうです。手厚い。

無料独自SSLで使用するSSLサーバー証明書の有効期限は、発行日から90日間です。 当サポートにて、有効期限から30日前・25日前・20日前にそれぞれ自動更新を行い、有効期限を延長いたします。

Webサイトの常時SSL化

先程の作業ではまだ終わりません。常時SSL化をするためには2つ問題をクリアにする必要があります。

問題1:リダイレクトが行われず重複コンテンツとなっている

「http://~」から「https://~」への転送が行われないためその設定を行います。

転送されないと何がだめ?

「http://okiraku-life.com/」と「https://okiraku-life.com」は別サイトとして扱われるため重複コンテンツとなってしまいます。

さらに、「www.okiraku-life.com」と「okiraku-life.com」も表示されるページは同じですが重複コンテンツとなってしまいます。

重複コンテンツはGoogle Adsenseの規約違反になります。

問題2:内部リンクにhttpが含まれている

WordPressのデータベースにhttpが含まれているとそれだけでSSL化の障害となってしまいます。

2つの問題を解決

問題を一つずつ解決させましょう。

問題解決のために「リダイレクト設定」と「内部リンクの修正」を行います。

解決1 リダイレクト設定

.htaccessの編集

ブラウザで編集する場合

AFFINGER(WING)でSSL化(https)対応全手順【注意点・エックスサーバー】

サーバパネルから「.htaccess編集」を選択。

AFFINGER(WING)でSSL化(https)対応全手順【注意点・エックスサーバー】

自分のドメインを選択。

FTPソフトを使う場合

AFFINGER(WING)でSSL化(https)対応全手順【注意点・エックスサーバー】

FTPソフトを使ってログインし、public_htmlフォルダの中の「.htaccess」をダウンロードします。

.htaccessをメモ帳などで開き編集します。(編集前に.htaccessファイルのバックアップとを取っておきましょう)

.htacessって何?

Webサーバを制御するファイル。今回の場合は「httpでアクセスされた場合にhttpsへ転送する」ように修正を行います。

編集前

ブラウザで編集している場合

AFFINGER(WING)でSSL化(https)対応全手順【注意点・エックスサーバー】

「.htaccess編集」タブを選択して編集画面に入ります。

FTPソフトを使う場合

AFFINGER(WING)でSSL化(https)対応全手順【注意点・エックスサーバー】

一番上に

# wwwなしに統一
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_HOST} ^www\.(.*) [NC]
RewriteRule ^ http://%1%{REQUEST_URI} [L,R=301]
</IfModule>

# httpからhttpsへダイレクト転送
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{HTTPS} !=on [NC]
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>

を挿入する。

編集後

ブラウザで編集している場合

AFFINGER(WING)でSSL化(https)対応全手順【注意点・エックスサーバー】

最後に「.htaccessを編集する(確認)」。次のページの「.htaccessを編集する(確定)」で完了です。

FTPソフトを使う場合

AFFINGER(WING)でSSL化(https)対応全手順【注意点・エックスサーバー】

保存をして、FTPソフトで.htaccessを同じ場所へ上書きアップロードします。

.htacessのファイル名を変更しちゃうと元に戻せなくなるので注意。

AFFINGER(WING)でSSL化(https)対応全手順【注意点・エックスサーバー】

重複コンテンツの問題はこれで解決します。

問題2 内部リンク解決方法

サイトアドレスの変更

AFFINGER(WING)でSSL化(https)対応全手順【注意点・エックスサーバー】

WordPress管理画面から「設定>一般」を選択。

AFFINGER(WING)でSSL化(https)対応全手順【注意点・エックスサーバー】

WordPressアドレス(URL)とサイトアドレス(URL)にあるアドレスの「http」を「https」に修正します。

AFFINGER(WING)でSSL化(https)対応全手順【注意点・エックスサーバー】

修正後。

AFFINGER(WING)でSSL化(https)対応全手順【注意点・エックスサーバー】

修正したら一番下の「変更を保存」を押す。

内部リンクの修正(https置換)

プラグイン「Better Search Replace」インストール

AFFINGER(WING)でSSL化(https)対応全手順【注意点・エックスサーバー】

Better Search Replaceプラグインを使ってWordPress内のhttpを全てhttpsへ置換していきます。
「Search Regex」ではできない、WordPress内にあるデータベースを奥深くまで渡って置換してくれます。超オススメです。

データベースをいじるため、必ずバックアップを取りましょう。

AFFINGER(WING)でSSL化(https)対応全手順【注意点・エックスサーバー】

「Better Search Replace」をインストールしたら「ツール>Better Search Replace」を選択。

AFFINGER(WING)でSSL化(https)対応全手順【注意点・エックスサーバー】

  • Search for・・・https化前のアドレス
  • Replace with・・・https化後のアドレス
  • Select tables・・・置換対象とするテーブル
  • Run as dry run?・・・チェックを入れると文字列の検索のみで置換は実行しない置換する場合はチェックを外す。

「Run Search/Replace」を選択。
 

AFFINGER(WING)でSSL化(https)対応全手順【注意点・エックスサーバー】

この画面がでれば完了です。

余談:実行結果のところの「Click here」で結果を確認できます。

結果を確認。

AFFINGER(WING)でSSL化(https)対応全手順【注意点・エックスサーバー】Better Search Replace上で「Run as dry run」にチェックを入れて「Run Search/Replace」を選択。

httpがないか確認したところこの記事以外では見つかりませんでしたので問題なし。

試しにAFFINGERの会話風テキストで使っているアイコンが置き換わっているのか確認したところ問題なくhttpsに置換されていました。

AFFINGER(WING)でSSL化(https)対応全手順【注意点・エックスサーバー】

無事に置換されていそうです。

常時SSL化確認

改めてサイト内のページを見て回って確認します。

AFFINGER(WING)でSSL化(https)対応全手順【注意点・エックスサーバー】

どのページでも問題なく「この接続は保護されています。」キターーーーー!

AFFINGER使っているけど問題なくできたー!

リダイレクトの確認

今回、「httpとhttps」「wwwの有無」を全て「https://●●●/」へリダイレクト転送するように設定しました。

それのチェックも行います。

このサイトでは「http://www.okiraku-life.com/」へアクセスして「https://okiraku-life.com/」が表示されればチェックOKになります。

AFFINGER(WING)でSSL化(https)対応全手順【注意点・エックスサーバー】

URL欄に「http://www.okiraku-life.com/」と打ちエンター。

AFFINGER(WING)でSSL化(https)対応全手順【注意点・エックスサーバー】

結果、問題なく「https://okiraku-life.com/」に転送キターー。

ということで無事SSL化に完全対応しました。

ポイント

  • 作業は2時間くらいで終わる。
  • 2時間中1時間はサイトアクセス不可。
  • サイトへのアクセスが少ない時間にやる。
  • テーマ「AFFINGER(WING)」でも問題なくSSL化可能。
  • 置換プラグインは「Better Search Replace」がおすすめ。

常時SSL化を終えて

重い腰を上げたけどそこまで難しいことは必要なく、テーマ編集とかいじったことがある人だったら問題なくできると思いました!

これからは常時SSLが当然となるのでできるときにやってしまいましょう!

お疲れ様でした!
AFFINGER(WING)でSSL化(https)対応全手順【注意点・エックスサーバー】
つぶろ

-ブログ運営
-, ,