ロリポップのブログを独自SSLでhttps化しました!WordPressでやったことまとめ


 
ロリポップのブログを「https化(SSL化)」しました!
 
これからはhttpsが主流になりそうなのと、
Chromeが10月からセキュリティ強化する、と言うこともあり、
いまのうちにやった方が良いかなと。
 
 
いろいろと調べながら作業して、10個のブログで8時間かかりました。
https化自体はすぐに終わったんですけどね。。。
 
この記事では、やったことをざっくりまとめておきます。
 

スポンサーリンク

作業その1「下準備」

まずは下準備です。
 
先にやれることはやっておきましょう。
 
  1. ファイルとDBのバックアップ
    ロリポップの「バックアップオプション」を使って、3日に一回、自動的にバックアップしてます。
    念のため、作業前にも手動でバックアップしておきました。
     
  2. 置換プラグイン「Search Regex」のインストール
    URLが「http → https」に変わりますので、記事内のURLも変更が必要です。
    けど、一つ一つを手動でするのは超大変!
     
    このプラグインを使うと、ブログ内の全記事を一括置換できます。
     
    しかも、「検索だけ」「置換内容を表示」「置換して保存」の3機能があるので、
    置換して良いかを確認しながら作業できました。
    素晴らしい!!
     
  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
     
  4. ロリポップで独自SSL(無料)を申し込む
    「Let’s Encrypt」という認証局を使ってるようですね。
     
    これまでは、一番安い「クイック認証SSL」でも \2,000/月からでしたが、今回申し込むのは無料。
    ありがとうロリポ!
     
    早速申し込んでみると、https化は数十分で完了しました。
    かなり早かった。。。
     
    この状態でも、まだhttpにもアクセスできるので安心です。
これで下準備ができました。 
 
スポンサーリンク

作業その2「ブログ毎の作業」

既に、ブログのhttps化はできてますが、これだけではまだ完了ではありません。
 
ブログの設定や記事内の文字で「http」を使ってるところを、「https」に変更していく必要があります。
 
 
使っているWordPressテーマは、「responsive」「BlogPress」「Chill」の3つ。
それぞれを変更していきます。
 
地道に。そして確実に。
 
  1. サイトアドレス (URL)
    このブログは、マルチサイト化してます。
    画面左上の「参加サイト – サイトネットワーク管理者 – サイト」をクリックして、「サイトを編集」からURLを変更していきます。
     
    「サイトアドレス (URL) 」を変更すると、「Siteurl」と「Home」は自動的に変わりました。
    あと、必要かは分かりませんが、「Ossdl Off Cdn Url」「Ossdl Off Blog Url」も変更しておきます。
      
  2. Favicon
    「All in one Favicon」プラグインの設定画面で、ファビコン画像のパスを変更します。
    この時、「s」を付けるだけでなく、変更後のパスをブラウザのアドレス欄に入力して、ちゃんとアクセスできるかを確認しておくと安心ですね。
     
  3. ブックマーク
    「Link Library」プラグインでも同じ。
    ポータル画面のパスを「https://amaotolog.com/」に変更します。
      
  4. サイドバーのメニュー
    「外観 – ウィジェット」です。
    HTMLメニューを「テキスト」ウィジェットで作ってるんですが、ここのパスを変更しておきます。
     
  5. 画面上のメニュー
    「外観 – メニュー」です。
    間違って「全角のs」にならないように!!
     
  6. twitterのパス
    TCDテーマの場合、「外観 – テーマオプション」ですね。
    「https://twitter.com/amaotolog」に変更しました。
      
  7. 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】
    https://www.islog.jp/entry/sns-count-cache-facebook/
    大変分かりやすく参考になりました。ありがとうございます。
      
  8. 内部リンクの置換
    ここからは、「Search Regex」を使った文字置換作業です。
    間違わないようにじっくりと。

    とはいえ、普通であれば、この変換だけで十分のはず。 
    ・旧:http://amaotolog.com
    ・新:https://amaotolog.com
     
    いきなり置換するのではなく、まずは「Search」でどれくらいあるか探して、「Replace」で置換後の文字を確認し、「Replace & Save」で置換&保存するのがポイントです。
      

  9. 画像ファイルパスの置換
    旧ドメインで残ってた画像パスを変更しました。
    http://junbr.raindrop.jp/am/img/
    https://amaotolog.com/amalog/wp-content/uploads/am/img/
     
  10. 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
    だけは、変換後のパスが分かりませんでした。古すぎるのかも。
     
  11. バリューコマースのパス置換
    http://ck.jp.ap.valuecommerce.com
    https://ck.jp.ap.valuecommerce.com
      
    http://ad.jp.ap.valuecommerce.com
    https://ad.jp.ap.valuecommerce.com
       
  12. 念のためチェック
    もう一度検索してみると、意外にひっかかるものです。
    http://junbr.raindrop.jp
    http://amaotolog.com
      
    「自分のブログ以外で、https対応していないところ」は変更しないように!
    余分な変更には十分注意です。
 
一つのブログを修正したら、簡単な動作確認をしておきます。
 
リンクをクリックして画面が変わるか、
chromeでアクセスしてアドレス欄に「保護された通信」と表示されるか、など。 
 
 
F12キーを押して出てくる「DevTools」を使うと便利です。
 
httpが残っている場合、Consoleに「Mixed Content」と表示されますよ。
 

作業その3「残りの調整」

作業の終盤です。
 
もう一息。
 
  1. 親サイトのサイトアドレス (URL)
    設定画面からは変更できないので、DBを直接変更します。
      
  2. モバイル端末向けのヘッダ画像調整
    モバイル向けに小さいヘッダ画像を表示してたんですが、パスがhttpのままでした。
     

     <img src="<?php echo str_replace( 'http://', 'https://', esc_attr( $options['画像のパス'] ) ) ; ?>
    

    みたいな感じで変換しました。
      

  3. オリジナルSNSボタン
    これまでは、「WP Social Bookmarking Light」プラグインとテーマ標準のボタンを使ってました。
    けど、どちらも「はてなブックマーク」ボタンで「まだhttpですよ」エラーが出る。。。
     
    これも「SNS Count Cache」プラグインで解決です!
     
    ボタンの作り方を公開されているサイトを参考に、各ブログに配置していきます。
    画面表示が速いのと、デザインに統一感が出たのがうれしい。
       
  4. ツイッターの紹介ページ
    ここにもURLがありましたね。
    忘れないように修正です。
      
  5. GoogleのSearch Console
    以前は「ウェブ マスター ツール」だったような。
    知らない内に名前が変わってたようです。
     
    URLは変更できないので、「プロパティを追加」で新しくブログを登録しました。
    サイトマップ(sitemap.xml)の登録と、robots.txtが正しいかを確認します。
    しばらくすると、クロールされてインデックスが登録されました。
    良かった。。。
      
  6. Googleアナリティクス
    画面左下で「管理」アイコンをクリックし、プロパティ設定で「デフォルトのURL」、ビュー設定で「ウェブサイトのURL」を「https://」に変更しました。
    これは、プルダウンを変更するだけで簡単でした。
     
  7. リダイレクト設定
    httpにアクセスがあった場合、すべてhttpsにリダイレクトするように設定します。
    FTPで「.htaccess」ファイルを修正しました。
    ここの作業は要注意です!
     
    私の場合、既に「RewriteEngine on」になってたので、以下の2行を追記しました。

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

    環境によってコマンドが異なるかも知れないので、良く調べておきましょう。
    万が一に備え、修正前に「.htaccess」のバックアップも忘れずに!
      

  8. 全画面の確認(パソコン)
    パソコンからアクセスして、画面が正しく表示されるかを確認します。
    できれば全画面ですが、大変なので少しずつ。
     
  9. 全画面の確認(スマホ)
    同じくスマホでも確認します。
    パソコンではOKでもスマホではNG、という画面がいくつかありました。
    問題があれば、地道に修正していきましょう。
これですべての作業が完了しました!! 
 
今回は8時間くらいかかりました。。。 
 
https化だけであればすぐにできるので、パスの修正やボタン作成がなかったら、1~2時間で終わる気がしますよ。
 

やって良かったと思うこと

セキュリティ向上だけでなく、その他にも良い事がありました。
 
  • Googleの評価が良くなる
    どこまで効果があるかは分かりませんが。
    httpのままよりは良いらしい。
      
  • WordPressの管理画面も安心
    当たり前ですが、通常のブログ画面だけでなく、管理画面もhttpsになります。
    通信データが暗号化されるので安心。
      
  • 通信速度が速くなる?
    httpsにすると、次世代プロトコル「HTTP/2」が使えるようです。
    ロリポップでも対応してました。
    https://lolipop.jp/info/news/5657/
    あまり体感では分かりませんでしたが、これからに期待です。 
 

まとめ

あまおとろぐのブログをhttps化しました!
 
地道な作業が多くて大変でしたが、すべての作業が終わったあと、
みなさまにアクセスして頂いてるのが確認できて安心してます。
 
良かったですよ。
 
スポンサーリンク


カテゴリー: パソコン タグ: , , ,

■前後の記事です
ロリポップのブログを独自SSLでhttps化しました!WordPressでやったことまとめ” への1件のコメント
  1. 匿名 より:

    こんばんは。コメントは初めてになりますが
    いつも更新を楽しみにしています(^^)

    同じロリポップを使っています。と言ってもまだ大変日が浅いですが(^^;)

    設定に8時間ですか!?(゚Д゚;)ひぃぃぃぃ
    すでに心が折れてしまい、たぶん年内に処理できないで年を越すと思います(;^ω^)
    コメントも何でか分かりませんが、ログインしないとコメント出来ないようになってて
    もうそれだけで私の中ではパンク!!!(´Д⊂ヽ
    結局、私が好きなブロガーさんのブログに尋ねる、
    そしてその方のブログでコメントし合ってて(+o+)

    • だーしゅ より:

      コメントありがとうございます。

      https化はゆっくりと確実にするのが良いですね。
      パスなどを間違うと大変ですし。

      > コメントも何でか分かりませんが、ログインしないとコメント出来ないようになってて
      ログインしなくてもコメント入力できますよ。
      実際、このコメントも見れていますので。
      少し気になりますね。

コメントを残す

メールアドレスが公開されることはありません。