急に思い立ってはてなブログからロリポップサーバー上のWordPressに移行しました。元々はてなブログからWordPressへの移行は考えていたのです。それでも、思い立ってまさか半日で移行作業をするとは思っていませんでした…。強行軍すぎましたね。

今回の記事は、「なぜ移行したのか」「移行作業の流れ」「行ったこと」を中心にまとめています。

思っていたより重労働だったので、はてなブログからWordPressへの移行をお考えの方は念入りに準備されることをお勧めします。参考になれば幸いです。

WordPressに移行した理由。

かなり前からはてなブログからの移行を検討していました。 主な理由が「デザイン」「テーマ」「コンテンツの周遊」です。

デザイン

はてなブログでデザインを弄ろうとすると、CSSやらJavascriptやら、後付けで記入していかなければなりません。

見出しのデザインがH3,H4,H5、更新履歴表示のためのスクリプト、広告非表示のためのスクリプト、記事下のSNSアイコン、グローバルナビゲーション…。

そうやっていろいろ記入した結果、カスタムCSS等のスクリプト記述欄は膨大な行数を抱えてしまいます。何か変更したい時、その膨大なスクリプトの中から、該当箇所を消してリライトして…って作業がものすごく大変!JavaScriptやjQueryを何か所も実装したいときもありましたが、競合するのかなんなのか、うまく動かなくて諦めるということも。

はてなで快適かつ自分の目指すブログデザインを実装するには、そこそこのWeb制作知識が必要だと思い知りました…。私の付け焼刃かつ古いWeb知識では、全く太刀打ちできなかったです。膨大な時間が消えちゃう。

テーマ

そんなはてなブログでの悩みを解決してくれるのが、WordPressのテーマだったんです!自分が「こうしたい!」というポイントが、大体テーマ内で完結してくれます。スクリプトを自分で記述することなく、大体のカスタマイズができるテーマが存在します。

WordPressのテーマは、無料のものから有料テーマまで、数多く配信されています。

私ははてなブログから引っ越しするにあたって、有料テーマの購入を決めました。

――DIVER

多くのブログさんが使っている”JIN”や”SANGO”も見て回ってはいたのですが、DIVERの清潔感のあるきっちりさに一目惚れです。よりブログ記事が増えてきたらトップページをカテゴリごとの新着にしたいと思っているので、最初から実装できるとわかっている(Demoサイトで実装されている)のも嬉しいポイントです。

ただ、他の有料テーマと比べても割と高価です。アップデートで追加料金が必要ないと明言されていること・サポート体制が整っていること・何サイトでもテーマを使用できること、この3点を考えると最終的にはお安いのかもしれませんが、今の段階では何とも言えません。

コンテンツの周遊性

前のブログデザインでは、気合い入れて書いたつもりの記事も、記事が増えると埋もれて見てもらいにくくなっていました。

はてなブログでは関連コンテンツが公式で実装されていますが、関連具合が謎な記事が選ばれていたり、間違いなく関連しているコンテンツが一覧になかったりと、仕事しているか微妙です。

せっかく記事を見に来てくれる方がいるのに、次の記事への導線が作りづらかったんです。自分で一つ一つ関連記事設定するというのも手段の一つですし、そんな風にしてコンテンツ同士を結びつけられている方もいますが、デザインが気になってしまいます。

このテーマは入れただけでもいろいろな記事を掘り出してくれるので、大変助かっています。

引っ越し準備編:最初からやっておくべきこと。

はてなブログ時代からこれだけはやっておけ!ということ。

記事のURLをカスタムURLにしましょう!

逆に、カスタムURLを使わないのであれば、全てデフォルトにしましょう。カスタム・デフォルトURLが入り混じった状態が一番面倒です(経験談)。

はてなブログでは、デフォルトのURLが【.../entry/西暦/月/日/時間】に設定されています。

何が問題かというと、WordPressではカスタムURL部分に”/”を用いることができないということです。

プラグインで”/”を使えるようにしても、全記事のURL変更が必要になります。記事をインポートした時点で、”/”がハイフンに置き換えられてしまうためです。

また、URLに大文字を使わないようにした方が良いしょう。

はてなブログではURLの大文字を認識してくれましたが、WordPressはどうやら小文字のみ対応のようです。URLの大文字と小文字は区別されるため、はてな→WP移行後は別URL扱いになります。

注意
“/”をパーマリンクに使えるようになるプラグイン【 Enhanced Custom Permalinks 】を導入してみたものの、私の環境ではうまく動きませんでした。 このプラグインを使うことで後々不具合が起こる可能性もあるので、使用は自己責任でお願いします。 やっぱりカスタムリンクが一番いいです(教訓)。

引っ越し準備編2:サーバー選び。

WordPressに移行するにあたって避けて通れないのがサーバー選び。

私はエックスサーバーロリポップで迷った結果、ロリポップを選びました。

エックスサーバーは早い・安定している、と多くのブロガーさんたちが大絶賛していますが、私のこのブログの規模だと、まだロリポップのスタンダードプランで充分だと判断しました。

エックスサーバーはもっとPVも規模も大きいブログ向けかなあと。ちよろぐはバズったこともないですし、毎日のPVが~万とかそんなの夢のまた夢です。月間PVも3000程度ですから、アクセス過多での表示遅延とかは気にしなくてよいと考えました。毎月のコストもはてなProの半額なのが嬉しいです。(6か月以上の長期契約から1月500円、1・3か月は1月600円)

ロリポップではWordPressをライトプラン(300円)から使用可能ですが、スタンダードプランからは高速なWordPressが使用可能ということで、スタンダードプランを選択。どのように高速なのかはわかりませんが、ページの読み込みが遅くなればなるほどユーザービリティが低下するので、最低限の速さは確保したいところです。

ライトプランはデータベースが1つなのに対し、スタンダードプランは30個使えるので、複数WordPressを作りたい方にとってもスタンダードプランが必要でしょう。私の場合は複数サイトを運営するわけではありませんが、移行作業・デザイン確認にテストブログを作るため、複数のデータベースが必須でした。

ロリポップはWordPressの簡単インストール機能付きで、サイトを立ち上げるのはとても簡単でした。必要事項(ログインID/パスワード等)を記入するだけで、後のものは自動でインストールしてくれます。FTPサーバーに触る必要はありません。

アクセスが増えてきたら、またサーバーの引っ越し考えればいいや!と思っています。はてなブログから移行するよりは簡単でしょうし。

移行後リライトが必要なもの一覧。

はてなブログ時に設定していた目次は、WordPressではただのジャンプになってしまいます。WordPressで目次を表示したい場合、プラグインを導入することで自動的に挿入されるようにします。

はてなブログの内部リンクは、idとhatenablogのドメインでURLが指定されているため、はてなブログ記事を消した後は404になってしまいます。私はWordPressの埋め込みでリンクを挿入しなおしました。

変則的なことに、はてなブログは記事内見出しがH3から始まります。記事タイトルをH1、次の大見出し(記事内)をH2…とするのが一番いい形とされているので、できることなら全て置き換えた方が良いです。

移行作業の流れ。

テストサイトでURL変更やリライト作業を行った後、本番サイトを作成という順番で行いました。

テストサイトでの作業中は新規記事は書けないものの、普段通りはてなブログを公開しておけるので、ゆったりと作業ができます。

最初に

  1. はてなブログの記事をエクスポート:はてなブログの設定→詳細→エクスポート
  2. サーバーを借り、WordPressのテストサイトを立ち上げる

テストサイトでの作業

  1. テストサイトを非公開にするプラグインを導入・起動:【WP Maintenance Mode】
  2. パーマリンク設定をカスタム構造に:設定→パーマリンク設定→カスタム構造【/entry/%postname%/
  3. 実際使用予定のテーマをインストール
  4. はてなブログのエクスポートデータをインポート:ツール→インポート→Movable Type と TypePad
  5. 地道にリライト・URLの変更Enhanced Custom Permalinksを導入するのもアリ
  6. 表示崩れ等ないか確認後、データをエクスポート:ツール→エクスポート→全てのコンテンツ

ここまではのんびり作業してください。ここから先はスピーディーに行う必要があります。

サーバーに独自ドメインを登録

ロリポップの場合はこちらの公式サポートが参考になります。

ドメインの管理画面で行うこと

  1. ドメインを取得したサイトの管理画面へ(私の場合はエックスドメイン)
  2. はてなブログのDNSレコードを削除
  3. ネームサーバーを各サーバー指定のものに変更

独自ドメインをサーバーに登録できたら

  1. 独自ドメインにWordPressを新規インストール
  2. 管理画面【http://独自ドメイン/wp-admin/】へログイン
  3. パーマリンク設定をカスタム構造に:設定→パーマリンク設定→カスタム構造【/entry/%postname%/
  4. テストサイトに導入したプラグインを導入・有効化させる(サイトを非公開にするもの以外)
  5. テストサイトからエクスポートしたWordPressデータをインポート:ツール→インポート→WordPress

注:WordPressの管理画面にログイン可能、あるいは接続が安定するまで時間がかかる場合があります

移行完了!

お疲れさまでした!これで移行完了です。

サイトのURLを入力して、どの端末からも完全にWordPressが表示されたらオッケーです。それまでははてなブログを公開させたままでもよいと思います。

というのも、ネームサーバーがしっかり書き換わってくれるまで少々時間が必要になります。いくらドメインでネームサーバーを変更したからといっても、すぐには周知してくれないんです。

ネームサーバーの変更が上手くいっているか不安な方は、nslookupでDNS情報を取得してみるのもいいかもしれません。(私もやりました)

この書き換え(浸透)の間は旧ブログが独自ドメインに表示され続けるため、旧ブログを非公開にしてしまうと403エラーが出てしまいます。機会損失が大きいので、移行する時間帯にも注意を払ってください。

私は深夜1時頃からドメインのネームサーバーを変更し始め、ひと眠りして朝7時に全ての移行作業を終えました。

そのほかやったこと。

リダイレクト処理

私の場合、パーマリンクにスラッシュが使えるようになるプラグインが上手く作用しなかったため、多くの記事のURLを変更しました。

URLを変更した記事の中で、継続的に検索からの流入がある記事があり、さすがに勿体ないのでリダイレクト処理を施すことにしました。

これもプラグインで簡単に実装できるのがありがたいです。

https://ja.wordpress.org/plugins/redirection/

設定は簡単で、プラグインを有効化した後【ツール→Redirection】より【転送ルール】を選択。ソースURLを旧アドレスターゲットURLを新アドレスにして追加すれば、あっという間にリダイレクトの用意が整います。

今回私は、検索からのアクセスが多い幾つかの記事のみリダイレクト処理をするように設定しました。

アイキャッチ画像の縮小

ページの表示スピードを意識したことってあんまりなかったのですが、このサイトができてすぐにGoogleSpeed Insightsにかけてみると結果がひどい!

原因の一つに画像のサイズが大きいということが診断でわかったため、アイキャッチ画像を横幅最大300pxのものに縮小しました。読み込みはだいぶん改善された様子です。

もう一つ・読み込みが遅い原因の”レンダリングを妨げるリソースの除外”については、何をどうしていいかわからないため、今は置いておこうと思います。

追記(12/21):DIVERテーマ作者さんにスマホサイトの読み込みのスピードを改善するにはどうしたらよいか、と尋ねたところ、テーマ側でスピードアップできるよう調整してみます、とのこと。アプデを待つしかなさそうです。

サイトのSSL化

はてなブログ時代にSSL化作業を終えていたため、SSL化に伴うリライト作業はありませんでした。

ロリポップの管理画面で、【セキュリティ→SSL化】からwww.chiyolog.comとchiyolog.comのSSL化を有効にするだけで完了です。

※初めてSSL化する場合:SSLを有効化するのは簡単なのですが、サイト内のリンクが全て"https"の形になっているか確認する必要があります(本文・ソースを含む全て)

https化した後、httpとhttps両方で同じページに接続できるかチェックしてください。上手くリダイレクトされなかったら、.htaccessファイルにスクリプトを追加する必要があります。

参考:WordPressサイトの常時SSL化(全ページHTTPS)リダイレクトを.htaccessで設定しよう

wwwあり・なしを統一して正規化 

WordPressを立ち上げた当初、"www.chiyolog.com"と"chiyolog.com"が別URL扱いされてしまっていました。これでは困るので、ググります。

ロリポップサーバーの場合、こちらのサイトが大変参考になります。

――ロリポップ htaccessでwww統一設定はしちゃダメ!ワードプレス4.5: Script

ファイルを弄ることなく、WordPressの設定画面からURLを"chiyolog.com"から"www.chiyolog.com"に変更するだけで正規化されました。

今回は.htaccessを弄らなくて済みましたが、ロリポップ以外のサーバーだと、.htaccessにスクリプトを追加する必要がある場合があります。

感想

思っていたより手間がかかりました!

はてな→WordPress間の移行を代行してくれるサービスがあるらしいのですが、今回のような移行作業なんて何度もやるものじゃないし…と思い、自分で挑戦しました。いい経験にはなったのではないかなと思います。

代行の方が楽なのは間違いありません。でも私はこのブログに対する愛が深まったので吉。

WordPressへの移行は11月くらいからぼや~っと考えていたのですが、まさかこんな突発的に移行するなんて自分でも思ってもいませんでした。WordPressの有料テーマをぼーっと眺めていて、DIVERに出会った瞬間購入キメてましたもの…。これぞ一目惚れです。

買うなら○○かな~とかそういう緩い気持ちじゃなくて、「これだッ!!」っとピンと来るものがありました。

自分の記事を見直すいい機会にもなりました。昔の記事を読んで、もうこれ下書きに戻したほうがいいやつだ…と嘆いたり、リライトすればまだ見れる記事になる!と希望を持ったり。

せっかく過去記事まで掘り返して見やすいブログになったのですから、できるだけ読みやすくまとまった記事を残していきたいです。

おすすめの記事