はてなブログからワードプレスへ移転、SSL化した全手順＆PV推移データ等まとめ

先日、このブログをはてなブログPro（独自ドメイン運営）からワードプレスへ移転しました。
移転作業はスムーズに進んだものの、かなり忙しい１ヶ月でした…
準備から移転、移転後のメンテナンスまで、めちゃくちゃな作業量！

実は、前にもサブブログをはてなブログからワードプレスに移転しています。
その時は作業を全て任せ、僕は見守るだけ…。
今回はサーバーやサイト移転のノウハウを少し覚えておきたいと思い、アドバイザーとなる人を探した上で、移転作業は自分の手で行いました。

さて、はてなブログからワードプレスに移転する人も増えてきています。
この記事では、移転準備から移転作業、サイトリニューアル、SSL化、アクセス傾向など…
ノウハウというよりも、リアルな作業日記としてまとめましたので、移転を考えているはぜひ１度お読みください。

※この記事は筆者の作業記録としてまとめています。移転作業に生じたトラブルは負いかねますので、その前提でお読みください。

このブログの運営環境とスペックについて
1. サーバーと独自ドメイン
はてなブログからWordpressへの移転作業まとめ
1. 『最低限』の作業はこれだけ
2. しかし、実際の作業は…
ワードプレスへの移転前にやっておくべきこと
移転当日から移転後のリニューアル作業まとめ
サイト移転とPV推移データまとめ
1. サブブログ（ネームサーバー移転＆SSL化完全同時）の場合
2. メインブログ（ネームサーバー移転後にSSL化）の場合
移転作業に役立ったWordpressプラグインまとめ
移転作業をお手伝いしてくれた人たちを紹介
おわりに

このブログの運営環境とスペックについて

サーバーと独自ドメイン

【移転前】
はてなブログPro
独自ドメイン運用（ムームードメイン）

【移転後】
エックスサーバー X10プラン
独自ドメイン運用（ネームサーバー変更）
SSL化

独自ドメイン（www.recomtank.com）はそのまま継続。
ムームードメインを利用していますが、サーバー移管でネームサーバーを変更しています（後述）。

ワードプレスにはXサーバーを選択。
これで僕が運営するサイト達のサーバー管理を一本化できました。
一番安いプランでもリアタイ1000ユーザー程度は余裕で耐えるので、ちょっとしたバズ、トレンドでもPVロスは心配ありません。
なお、Xサーバーでは、契約時の申し込みで独自ドメイン永久無料キャンペーンをやっています。独自ドメインをこれから契約する人はそちらの方がお得です（by更新費支払奴）。

月額900円(税抜)から、高速・多機能・高安定レンタルサーバー『エックスサーバー』

独自ドメインは継続ですが、移転３日後にSSL化しています。
また、はてな解約によって、はてなブックマークからの被リンクは、はてなドメイン（閉鎖中）へ移ってしまいました。この影響についても後述。

次章から、移転作業を細かく振り返っていきます。
はてなブログ→Wordpressへの移転を考えている人はご参考ください。

はてなブログからWordpressへの移転作業まとめ

『最低限』の作業はこれだけ

『はてなブログの記事をワードプレスに移す』
『サーバーとドメインを切り替える』

これだけであれば作業はカンタンです。

１．記事のバックアップ

はてなブログのダッシュボード＞設定＞詳細設定＞記事のバックアップと製本サービス

からMT（MovableType）形式のテキストファイルをダウンロードできます。
このテキストファイルはそのままワードプレスにアップロードできます。

２．Xサーバーへのドメイン登録＆ワードプレスダウンロード

サーバーごとに操作は違いますが、Xサーバーでは、

サーバーパネル＞ドメイン設定＞ドメイン設定の追加

でドメインを登録できます。
その後、メニュー欄の『自動インストール』でワードプレスをダウンロード。
どのサーバーも同じような操作です。同時に管理画面のURLも付与されます。

WordPress 自動インストール手順 | レンタルサーバー【エックスサーバー】

３．ネームサーバー切り替え＆ドメイン移管（はてなの場合）

新ドメインでのサイトを立ち上げる時は、このまま管理画面に進めます。
しかし、移管する場合はドメインのネームサーバーを変更しないと、管理画面にもログインできません。

はてなの場合はこのようにカスタム設定（ムームーDNS）されているはずです。

ムームードメインで独自ドメインを取得してはてなブログに設定してみた｜3歩進んで2歩更に進む。

ほとんど使っている人はいないと思いますが、『ムームーメール』というサービスはムームーDNS以外では使用不可になります。
たまたま僕はブログ用のメールに利用していたので解約しました…。

エックスサーバーを利用する場合は、

カスタム設定を解除し『GMOペポパ以外のネームサーバーを利用する』を選択。

ns1.xserver.jp
ns2.xserver.jp
ns3.xserver.jp
ns4.xserver.jp
ns5.xserver.jp

を登録すればネームサーバーが切り替わります（Xサーバー共通）。

４．ワードプレスへの記事アップロード

バックアップした記事は、ワードプレスの管理画面『ツール』メニューからインポートできます。
アップロード前に、パーマリンク設定から、カスタムURLを、

『https://独自ドメイン/entry/%postname%』

に変更しておきましょう。
この設定を忘れると、記事のURLが変わってしまう＝記事の被リンクがリセットされることになります。

しかし、実際の作業は…

これだけなら難しくありません。
しかし、実際に移転すると、サイトデザインは全てリセット、内部リンクエラーや、おかしな表示など散々な状態です…。

同じサイト状態のまま移転するには、たくさんの作業が必要です。
僕がアドバイザーと相談して決めた作業スケジュールは以下の通り。

【ネームサーバーDNS移転前（仮サイトの状態）】〜10/14まで

ドメインの追加
WordPressのインストール
はてなブログのデータインポート
テーマの設定
ウィジェットの設定
パーマリンクの設定
すべてのバックアップ作成
プラグインの設定
プラグインのデザイン調整
アイキャッチの調整
目次の調整
シェアボタンの調整
子テーマのPHP調整、アドセンス等
子テーマのCSS調整、見出し、リンク等
画像のリンク調整、https化
ブログカード、iTnunes等の不要なコンテンツの調整
https化できない画像（外部サイトへのリンク）の調整
全体の確認と調整

【ここからhostsを戻しての作業】10/14〜10/15

ASP関連の準備、対応
SNS関連の準備、対応
はてなブログのSNS連携解除
DNSの設定変更
SSLの設定
WordPressのURLをhttpsに変更
DNS切り替え後のコンテンツ確認
ASP関連の動作確認

【ネームサーバーが完全に切り替わった後】

はてなブログを非公開に変更
WordPressのURLを正規化
再度、混在コンテンツがないかの確認
アフターフォロー（10日間）

以上。
契約書のほぼコピペです。

コンテンツをSSL対応にする作業もありますが、ざっと挙げただけでもこれだけ…
気が遠くなります…。

ブログを移転するというのはそれだけ大きなこと。
移転してからリニューアルをしていては遅い！
サイトがゴチャゴチャの状態で放置すれば、Googleからの評価が下がるリスクもあります。

これらの作業を安全にこなした上で、見せられる状態にしてからサイトを移転することが必須！

次章では『移転前にやっておくべきこと』についてまとめます。

ワードプレスへの移転前にやっておくべきこと

ネームサーバー移管前は作業できない？

サーバーにドメインを登録し、ワードプレスをダウンロードしても管理画面に入れません。
管理画面もこのドメイン（recomtank.com）だから当たり前ですね。
はてなブログの404 Not Found画面が開いてしまいます。

これでははてなブログを消さないと移転作業ができない…！
そのため、はてなブログを公開したままワードプレスの管理画面にログインできる環境を作ります。

ローカルでのカスタマイズ環境の構築

ローカル環境でDNS変更前のサイトにアクセスするには、hostsファイルを編集します。
hostファイルにエックスサーバーのIPアドレスとドメインを追記することで、既存のDNSより先に参照されます。

簡単に言うと、hostファイルの最後に、

『（例）114.51.419.19.072 www.recomtank.com』

のように追記（IPアドレスは仮）するだけで、ネームサーバーを移管しなくても、ワードプレスにアクセスできるようになります。
IPアドレスは、エックスサーバーの場合は『サーバー情報』から確認できます。

Macだとhostファイルをそのまま編集できないので、『Mi』というテキストエディタをダウンロードしました。
詳しくは冒頭のリンクをお読みください。

hostに追記するとXサーバーが優先されるので、作業中は自分のパソコンからははてなブログが閲覧不可になります。
はてなブログを編集したいときは追記コードを消しましょう。

仮サイトでやるべき『必須項目』とは？

これは『公開できるレベル』をどこに設定すべきかによります。
僕の場合は、SSL化も意識していたので、内部リンク以外のコンテンツを全てSSL対応し、サイトデザインも完了した状態としました。

時系列で並べると、

カスタムURLの設定
記事のインポート
テーマの設定&子テーマの導入
サイドバーなどのウィジェット設定
はてな専用ブログカードの削除、編集
はてな専用の目次（[:contents]）の削除
サイトカスタマイズ

が最低限になります。赤字ははてな特有のもの。
他にも、カテゴリーの再設定や、アクセスの少ない記事（or内輪ネタ）の断捨離、過去記事のリライト、アイキャッチの設定なども実施しました。
（はてなブログははてなドメインで再開予定なので、断捨離記事はそちらに残ります）

また、はてなブログ専用のブログカードがエラーになります。
これらをSearch Regexというプラグイン（後述）で抽出して、テキストリンクに変えました。
僕の場合は約200記事で600個以上編集したので、リンクにブログカードを使っているはてなブロガーは覚悟しましょう（笑顔）

[:contents]タグで見出しを目次にするのもはてな専用。
僕はこれまで全ての記事で”【目次】[:contents]”と手打ちしていたので、これも全て削除しました…。
ワードプレスではTOC+という１番メジャーな目次作成プラグインを使っています。

便利なプラグインなどは後章でまとめます。
テーマにはサブブログでも使っており、ある程度慣れているAffinger4を導入しました。

正直、機能を持てあましていますが…他のテーマをまた最初から使うのも大変！
テーマについては落ち着いたら再考します！

細かい作業やワードプレスのテーマについては、下記のリンクをご参考ください。
Affinger4では専用の子テーマもダウンロードできます。

移転当日から移転後のリニューアル作業まとめ

いよいよネームサーバー移管

ローカル環境で『これで公開できるぞ！』というところまでリニューアルしました。
これでいつでもネームサーバーを移せる状態。

ただし、ネームサーバーが安定するまでアクセスが不安定になります。

アクセスダウンを抑えるために、
21時就寝、23時起床
23-2時リライト、2時半移転
2時半− 4時スプラトゥーン
4時ネームサーバー反映確認
5−9時就寝というスケジュールで行ったから体がふわふわする。
— みるおか (@miru_oka87) October 15, 2017

移転作業はアクセスが最も少ない深夜2:00過ぎに始めました…。
ネームサーバーの切り替えは２時間程度で終了！

しかし、半日ほど僕のサイトを見れない人もいました。
完全に切り替わるには半日〜１日かかるようですね。
そのため移転当日のアクセスも減少しました…詳しくは後述！

移転後に確認すべきこと

無事サイトが公開できました。
移転日から翌日に休暇を取っていたため、その日はブログに張り付きっぱなし。

この時点でSearch Consoleにサイトマップを再送信しました。
おまじない程度にFetch as Googleもしつつ…

リニューアルを完了してから公開したはずが、細かいエラーやサイトデザインの崩れを確認。
すぐに修正しました。

SSL化のタイミングについて

僕の場合は、

ローカル環境での準備（約3週間）
移転（10/15早朝）
アクセス状況確認（10/15〜16）
SSL化（10/17早朝）

と、同時ではないものの、SSL化を早めに進めました。

ブログ移転とhttps化を同時に行うのは自爆するようなものとGoogleコメント｜Zバッファ

にもあるように、サイトリニューアルとSSL化を同時に進めると、アクセスダウンや問題が発生した時に原因究明が難しくとなります。
サイトを移転して、アクセスが安定した後にSSL化を検討すべきでしょう。

ブログ逝ったらリアル終わるほど追い込まれてない趣味系ブロガーだし、
『このような発信内容、施策がアクセス&単価に及ぼす影響とは』
みたいな研究的好奇心を満たすためにブログ運営してるので、移転でアクセスが下がるかについてもワクワクしてるマゾです。
いや下がらないでほしいけど。
— みるおか (@miru_oka87) October 9, 2017

僕の場合は、前にはてなブログからワードプレスへの移転とSSL化を同時に行ってアクセスが全く変わらなかったこと、そして何よりも『めんどくせぇ』という感情から、さっさとSSL化を済ませました。
そのうちSSL化するなら、https://の状態で被リンクを集め始めたいというのも理由です。

念のため、移転後に２日インターバルを取って移転直後のPV推移を確認しました。
これも後でまとめます。

サイトコンテンツのSSL対応まとめ

移転前にコンテンツのSSL化もローカル環境で進めないといけません。
基本はテキストリンク以外のhttpコンテンツをhttpsに対応させるだけです。
内部リンクを除けば、主に物販アフィリエイトの古いリンク（画像URL）が修正対象になります。

具体的には、

http://cdn.image.st-hatena.com/
http://ecx.images-amazon.com/
http://thumbnail.image.rakuten.co.jp/
http://hbb.afl.rakuten.co.jp/
http://i.af.moshimo.com/
http://js.medi-8.net/
http://ir-jp.amazon-adsystem.com/

などを修正しました。

バックアップをインポートすると、記事中の画像がはてなフォトライフへの直リンクとなっています。
現在、はてなフォトライフはSSL対応済みなのでエラーにはなりませんが、対応前の画像に注意！
そもそも画像が他ドメインへの直リンクというのも良くはないので、気になる人は貼り替えましょう。
（僕は３割くらいしか貼り直していません）

これはサブサイトで確認したのですが、Amazonアソシエイトでの商品ページへの短縮リンクもSSL化エラーとなりました。テキストリンクです。
アフィリンクを『通常URL』に変更すればエラー解消となりました。

SSL化当日の作業まとめ

SSL化の作業そのものはカンタン！
サーバーパネルから『SSL設定』で、httpsを申請すれば終わりです。
僕は証明書付きの有料プランを申し込みました。Xサーバーのインフォパネル『追加のお申し込み』から申請できます。

SSL申請から反映までは約1時間で終了しました。
こちらも作業は早朝2時から始めています。
ネームサーバー移転と違い、反映後のアクセスは安定していました。

SSL化後に一番大事なのは、内部リンクのhttps化！
これだけはhttps反映後すぐに終わらせましょう。

これもSearch Regexというプラグインで一括変換できます。
”http://独自ドメイン”でサイト内検索し、”https://独自ドメイン”に変換するよう指定してReplace&Saveで終了！
最強のプラグインです。

さて、実際にSSL化すると、ちょくちょくSSLエラーとなるページが見つかりました。

鍵マークが付いていないページをGoogle Chromeで開きます。
検証ツールを使えばSSLエラー箇所、すなわちMixed Contentを確認できます。
エラー内容を見返し、リンクや画像を貼り替えましょう。

SSL化後はhttpへのアクセスをhttpsに301リダイレクトさせました。
被リンク評価を引き継ぐための作業です。

サーバーのhtaccess.というファイルの先頭にコードを追記するだけですが、かなりクリティカルな部分なので作業には注意しましょう。

リダイレクトを含むSSL化の手順については、ワードプレスの有名テーマ『Simplicity』作者わいひら氏の『寝ログ』を見るべし！
細かく、そしてわかりやすくまとめて下さっています。

WordPressをhttpからhttpsにSSL化した全手順まとめ（エックスサーバー環境）｜寝ログ

この通りに作業すれば、SSL化は安全に間違いなく進められます。

Google、アフィリエイトへのアカウント情報変更を忘れずに

URLが変更になるので、SSL化したらすぐにアカウント情報を直しましょう。

はてなではwww.付きのURLを使用していたので、Search consoleには『http://www』『https://www』『http://』『https://』の4つのアカウントを登録しました。

これまで通り、www.を優先するように『サイトの設定』から選択しました。
Google周りの変更についても、寝ログでくわしく書かれています。神！

サイトのHTTPS化で必要となるGoogleサーチコンソールの再登録方法｜寝ログ

サイト移転とPV推移データまとめ

サイト移転で一番気になるのが『アクセスが落ちないのか』ということ。

ここでは、このブログ、そしてサブブログ『いただきライフ』を移転、SSL化したときのアクセス推移をまとめておきます。
Google Analyticsのキャプチャー公開は禁止なので、僕がエクセルで作り直したグラフです。

サブブログ（ネームサーバー移転＆SSL化完全同時）の場合

移転は5月。ブログ開始3ヶ月程度でした。当時は20記事、月間PVは約4万。
レコメンタンクの1/10程度しかないスケールですが、わかりやすいグラフだと思います。

このブログはまだ若く、リスクが少なかったこともあり、SSL化と移転を同時にしてもらいました。
ネームサーバー安定までは半日程度。そのため、移転当日はPVが約30%ダウンしました。

しかし、翌日からはアクセスが安定し、PVも安定…むしろ微増という結果に。
ただ、立ち上げて間もないため、ドメイン力をモリモリ伸ばしている最中。
移転よりも更新頻度やソーシャルでの拡散、被リンクなどの成長が影響したと考えています。
『サーバー移転、SSL化の影響はなし』と結論づけました。

ただし、このブログはSSL化を見すえていたため、はてなでの立ち上げ当初から混在コンテンツをゼロ＆内部リンクをつけない状態で運営していました。
レコメンタンクと比べて、はてなブックマークからの被リンクもわずか。
移転しやすいサイトだったと言えます。

メインブログ（ネームサーバー移転後にSSL化）の場合

こちらはメインブログを移転した前後のグラフ。

10月15日早朝にサーバー移転しました。記事数は200→180記事に断捨離しています。
スケールが大きくなっても、PV傾向はサブブログとほぼ同じ。
はてなブックマーク数が20,000超だったブログで、被リンクダウンの影響が心配でした。
しかし、SSL化当日からもアクセスの変動はほぼなし…体感では10%程度増えています。

まだ移転して間もないデータですが、今のところレコメンタンクも『移転＆SSL化での影響はなし』という結果でした。

しかし、どちらのサイトも『サイトリニューアルを終わらせ、混在コンテンツもほぼゼロの状態で移転した』ということは忘れずに。

移転作業に役立ったWordpressプラグインまとめ

以下のプラグインは、移転作業でよく利用したものです。
いずれもプラグイン＞新規追加で検索すれば見つかります。

【必須】Search Regex

サイト内の文字列を検索し、指定の文字列に一括変換できます。
単なるサイト内検索ツールとしても有能！

移転作業はとにかくエラー箇所の修正ばかりです。
時短にはSearch Regexという神プラグインが最強！

Auto Post Thumbnail

移転直後は画像がはてなフォトライフへの直リンクのまま。
テーマによってはサムネイルが表示されません。

Auto Post Thumbnailはアイキャッチが設定されていない記事を抽出し、自動でアイキャッチを設定してくれます。
また、記事内に直リンク画像しかなければ、自動でワードプレスにダウンロードして表示してくれます。

とりあえずサイトの見た目を整えたいときに助かるプラグインです。

WP Fastest Cache

サイト高速化のために導入しているキャッシュプラグインです。
リニューアル中は、CSSやphpなどをカスタマイズすることが多くなります。
『あれ？CSSが反映されてない？』って時はこのプラグインでキャッシュを削除してから見ると確実です。

Broken Link Checker

稼働させておけば勝手にリンクエラーを検出してくれます。
幸い、今のところエラーはありませんが、サブサイトではリライト時に活躍しています。

移転作業をお手伝いしてくれた人たちを紹介

ブログ移転を助けてくれた方を紹介！
期待以上のクオリティで仕事を仕上げてきた人たちばかりです。

事前に断っておきますが、いずれの方も相談の上、有料で発注しています。
ダンピングや無料発注は論外なのでやめましょう。

つばさ氏

レコメンタンクの移転をお任せしました。
今回はアドバイザー契約として、

作業内容のディレクション
CSS、PHPエラー対応
SSL未対応コンテンツの抽出ツール作成、実行

その他、僕の知識ではできない（リスクが高い）作業は丸投げしました。
このブログの移転やカスタマイズ依頼についても何人かに打診しました。
今回は『今まで発注していない人』の中から、ビジネス相手として一番信頼できると感じた人を選びました。
（僕はサイト関連で有料で依頼する（受ける）ときはビジネスとして割り切っています）

細部までフォローして頂いたおかげで安心して作業を進められました。

はてなブログ中心のカスタマイズ、ツール作成に関する知識が豊富。
Wordpress環境でも活用できるコンテンツを多数作成されている方です。

たけ氏

ツイッター（@jin30cm）を見る限りは本当にバカに見えるんですが、サイト構築からサーバー周りまで、体系的な知識がある方です。
サブブログ『いただきライフ』の移転・SSL化作業を全て委託しました。

ローカル環境でのリニューアルには僕も関わりましたが、ほぼ全ての作業を丸投げ。
こちらの負担はかなり少なかったので助かりましたね。
以前はかなり酷使したので今回は休ませておきました（澄んだ笑顔）

男もVIO脱毛！7つのメリットとメンズ脱毛を徹底比較｜日刊たけ氏！

SHIROMA氏

はてなブログのカスタマイズで有名なWEBデザイナー。

メインブログ、サブブログのカスタマイズを任せています。
ちなみに、レコメンタンクの現デザインは、シロマに作成してもらったサブブログのCSSをそのまま活用しています。
さすがに同じデザインもつまらないので、また全面的に発注予定！
WEBデザインだけではなく、こちらの要求に合う便利ツールもサクッと作ってもらえたので助かりました。