ロリポップのブログを独自SSLでhttps化しました！WordPressでやったことまとめ
ロリポップのブログを「https化（SSL化）」しました！
これからはhttpsが主流になりそうなのと、Chromeが10月からセキュリティ強化する、と言うこともあり、いまのうちにやった方が良いかなと。
いろいろと調べながら作業して、10個のブログで8時間かかりました。
https化自体はすぐに終わったんですけどね。。。
この記事では、やったことをざっくりまとめておきます。
作業その１「下準備」
まずは下準備です。
先にやれることはやっておきましょう。
ファイルとDBのバックアップ
ロリポップの「バックアップオプション」を使って、3日に一回、自動的にバックアップしてます。念のため、作業前にも手動でバックアップしておきました。
置換プラグイン「Search Regex」のインストール
URLが「http → https」に変わりますので、記事内のURLも変更が必要です。けど、一つ一つを手動でするのは超大変！
このプラグインを使うと、ブログ内の全記事を一括置換できます。
しかも、「検索だけ」「置換内容を表示」「置換して保存」の3機能があるので、置換して良いかを確認しながら作業できました。
素晴らしい！！
旧ドメインの画像ファイルをコピー
あまおとろぐブログは10個あるんですが、まだ「ロリポップの旧ドメイン」の画像ファイルを使ってる記事が残ってました。独自ドメイン（amaotolog.com）に移行した時の名残ですね。
残念ながら、旧ドメイン（junbr.raindrop.jp）は独自SSLの対象外。
画像ファイルの移行が必要です。
画像パスの変更が少しでも楽になるように、フォルダ構造を維持してファイルコピーしておきます。
・旧：http://junbr.raindrop.jp/am/img/167-2.jpg
・新：https://amaotolog.com/amalog/wp-content/uploads/am/img/167-2.jpg
ロリポップで独自SSL（無料）を申し込む
「Let’s Encrypt」という認証局を使ってるようですね。これまでは、一番安い「クイック認証SSL」でも \2,000/月からでしたが、今回申し込むのは無料。
ありがとうロリポ！
早速申し込んでみると、https化は数十分で完了しました。
かなり早かった。。。
この状態でも、まだhttpにもアクセスできるので安心です。
これで下準備ができました。
作業その２「ブログ毎の作業」
既に、ブログのhttps化はできてますが、これだけではまだ完了ではありません。
ブログの設定や記事内の文字で「http」を使ってるところを、「https」に変更していく必要があります。
使っているWordPressテーマは、「responsive」「BlogPress」「Chill」の3つ。
それぞれを変更していきます。
地道に。そして確実に。
サイトアドレス (URL)
このブログは、マルチサイト化してます。画面左上の「参加サイト – サイトネットワーク管理者 – サイト」をクリックして、「サイトを編集」からURLを変更していきます。
「サイトアドレス (URL) 」を変更すると、「Siteurl」と「Home」は自動的に変わりました。
あと、必要かは分かりませんが、「Ossdl Off Cdn Url」「Ossdl Off Blog Url」も変更しておきます。
Favicon
「All in one Favicon」プラグインの設定画面で、ファビコン画像のパスを変更します。この時、「s」を付けるだけでなく、変更後のパスをブラウザのアドレス欄に入力して、ちゃんとアクセスできるかを確認しておくと安心ですね。
ブックマーク
「Link Library」プラグインでも同じ。ポータル画面のパスを「https://amaotolog.com/」に変更します。
サイドバーのメニュー
「外観 – ウィジェット」です。HTMLメニューを「テキスト」ウィジェットで作ってるんですが、ここのパスを変更しておきます。
画面上のメニュー
「外観 – メニュー」です。間違って「全角のｓ」にならないように！！
twitterのパス
TCDテーマの場合、「外観 – テーマオプション」ですね。「https://twitter.com/amaotolog」に変更しました。
SNS Count Cache
以下の設定を変更しました。・対象SNS：「Facebook、Google+、はてなブックマーク、Pinterest、Pocket、Twitter」にチェック。
・シェア数のチェック間隔（秒）：3600。シェアの頻度は低いので。。。
・一度にチェックするコンテンツ数：10
・HTTPからHTTPSへのスキーム移行モード：有効。これだけで、http時代のカウントも合計してくれます。スゴイ！
・HTTPからHTTPSへのスキーム移行日：2017/10/12。切り替えた日ですね。
ついでに、Facebookの「APP ID」取得、Twitterの「widgetoon.js & count.jsoon」申込みもやっておきます。
[2017/10/17追記]
SNS Count Cache 0.11.1では、Facebookの「いいね！」をカウントしてくれなかったので、このサイトを参考にPHPファイルをカスタマイズしました。
■「SNS Count Cache 0.11.1」でFacebookのシェア数をカウントする方法【WordPress】
大変分かりやすく参考になりました。ありがとうございます。
内部リンクの置換
ここからは、「Search Regex」を使った文字置換作業です。間違わないようにじっくりと。
とはいえ、普通であれば、この変換だけで十分のはず。
・旧：http://amaotolog.com
・新：https://amaotolog.com
いきなり置換するのではなく、まずは「Search」でどれくらいあるか探して、「Replace」で置換後の文字を確認し、「Replace & Save」で置換＆保存するのがポイントです。
画像ファイルパスの置換
旧ドメインで残ってた画像パスを変更しました。http://junbr.raindrop.jp/am/img/
https://amaotolog.com/amalog/wp-content/uploads/am/img/
amazonのパス置換
ブログ内に貼っているamazonパスも変更しておきます。正直なところ、いくつかは「ホントにこれで良いのか？」なパスもありますが。。。
http://www.amazon.co.jp/exec
https://www.amazon.co.jp/exec
http://www.amazon.co.jp/gp/product
https://www.amazon.co.jp/gp/product
http://www.assoc-amazon.jp/
https://www.assoc-amazon.jp/
http://ecx.images-amazon.com
https://images-na.ssl-images-amazon.com
http://ir-jp.amazon-adsystem.com/
https://ir-jp.amazon-adsystem.com/
http://ws-fe.amazon-adsystem.com/widgets/
https://ws-fe.amazon-adsystem.com/widgets/
http://www.amazon.co.jp
https://www.amazon.co.jp
おかしいのがあれば、後から修正する方向で。
http://ws.assoc-amazon.jp/widgets
だけは、変換後のパスが分かりませんでした。古すぎるのかも。
バリューコマースのパス置換
これも変更しておきます。
http://ck.jp.ap.valuecommerce.com
https://ck.jp.ap.valuecommerce.com
http://ad.jp.ap.valuecommerce.com
https://ad.jp.ap.valuecommerce.com
https://ck.jp.ap.valuecommerce.com
http://ad.jp.ap.valuecommerce.com
https://ad.jp.ap.valuecommerce.com
念のためチェック
もう一度検索してみると、意外にひっかかるものです。http://junbr.raindrop.jp
http://amaotolog.com
「自分のブログ以外で、https対応していないところ」は変更しないように！
余分な変更には十分注意です。
一つのブログを修正したら、簡単な動作確認をしておきます。
リンクをクリックして画面が変わるか、chromeでアクセスしてアドレス欄に「保護された通信」と表示されるか、など。
F12キーを押して出てくる「DevTools」を使うと便利です。
httpが残っている場合、Consoleに「Mixed Content」と表示されますよ。
作業その３「残りの調整」
作業の終盤です。
もう一息。
親サイトのサイトアドレス (URL)
設定画面からは変更できないので、DBを直接変更します。モバイル端末向けのヘッダ画像調整
モバイル向けに小さいヘッダ画像を表示してたんですが、パスがhttpのままでした。<img src="<?php echo str_replace( 'http://', 'https://', esc_attr( $options['画像のパス'] ) ) ; ?>
みたいな感じで変換しました。
オリジナルSNSボタン
これまでは、「WP Social Bookmarking Light」プラグインとテーマ標準のボタンを使ってました。けど、どちらも「はてなブックマーク」ボタンで「まだhttpですよ」エラーが出る。。。
これも「SNS Count Cache」プラグインで解決です！
ボタンの作り方を公開されているサイトを参考に、各ブログに配置していきます。
画面表示が速いのと、デザインに統一感が出たのがうれしい。
ツイッターの紹介ページ
ここにもURLがありましたね。忘れないように修正です。
GoogleのSearch Console
以前は「ウェブ マスター ツール」だったような。知らない内に名前が変わってたようです。
URLは変更できないので、「プロパティを追加」で新しくブログを登録しました。
サイトマップ（sitemap.xml）の登録と、robots.txtが正しいかを確認します。
しばらくすると、クロールされてインデックスが登録されました。
良かった。。。
Googleアナリティクス
画面左下で「管理」アイコンをクリックし、プロパティ設定で「デフォルトのURL」、ビュー設定で「ウェブサイトのURL」を「https://」に変更しました。これは、プルダウンを変更するだけで簡単でした。
リダイレクト設定
httpにアクセスがあった場合、すべてhttpsにリダイレクトするように設定します。FTPで「.htaccess」ファイルを修正しました。
ここの作業は要注意です！
私の場合、既に「RewriteEngine on」になってたので、以下の2行を追記しました。
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]環境によってコマンドが異なるかも知れないので、良く調べておきましょう。
万が一に備え、修正前に「.htaccess」のバックアップも忘れずに！
万が一に備え、修正前に「.htaccess」のバックアップも忘れずに！
全画面の確認（パソコン）
パソコンからアクセスして、画面が正しく表示されるかを確認します。できれば全画面ですが、大変なので少しずつ。
全画面の確認（スマホ）
同じくスマホでも確認します。パソコンではOKでもスマホではNG、という画面がいくつかありました。
問題があれば、地道に修正していきましょう。
これですべての作業が完了しました！！
今回は8時間くらいかかりました。。。
https化だけであればすぐにできるので、パスの修正やボタン作成がなかったら、1～2時間で終わる気がしますよ。
やって良かったと思うこと
セキュリティ向上だけでなく、その他にも良い事がありました。
Googleの評価が良くなる
どこまで効果があるかは分かりませんが。httpのままよりは良いらしい。
WordPressの管理画面も安心
当たり前ですが、通常のブログ画面だけでなく、管理画面もhttpsになります。通信データが暗号化されるので安心。
通信速度が速くなる？
httpsにすると、次世代プロトコル「HTTP/2」が使えるようです。ロリポップでも対応してました。
あまり体感では分かりませんでしたが、これからに期待です。
まとめ
あまおとろぐのブログをhttps化しました！
地道な作業が多くて大変でしたが、すべての作業が終わったあと、みなさまにアクセスして頂いてるのが確認できて安心してます。
良かったですよ。
コメント
トラックバックは利用できません。
コメント (2)
こんばんは。コメントは初めてになりますが
いつも更新を楽しみにしています(^^)
同じロリポップを使っています。と言ってもまだ大変日が浅いですが(^^;)
設定に8時間ですか！？(ﾟДﾟ;)ひぃぃぃぃ
すでに心が折れてしまい、たぶん年内に処理できないで年を越すと思います(;^ω^)
コメントも何でか分かりませんが、ログインしないとコメント出来ないようになってて
もうそれだけで私の中ではパンク！！！(´Д⊂ヽ
結局、私が好きなブロガーさんのブログに尋ねる、
そしてその方のブログでコメントし合ってて(+o+)
コメントありがとうございます。
https化はゆっくりと確実にするのが良いですね。
パスなどを間違うと大変ですし。
> コメントも何でか分かりませんが、ログインしないとコメント出来ないようになってて
ログインしなくてもコメント入力できますよ。
実際、このコメントも見れていますので。
少し気になりますね。