はてなブログからWordPress（テーマ：JIN）へ移行した手順と参考サイトまとめ

※こちらの記事はブログ運営に関する記事となります。

はてなブログからWordpressへの移行を致しました。
まだ作業は残っておりますが、ひとまず体裁は整えられたと言っていいと思います。

大変大変と言われていた移行の作業はやっぱり大変でした笑

やっさん

疲れたよ…( ;∀;)

作業を行う中で初心者の私がいくつかつまづいたポイントがありましたのでそれを含めて実際の手順をまとめたいと思います。

※あくまでもやっさんが行った作業の記録ですので、場合によっては順番が逆になってもいいものもあります。
こういうことをしないといけないんだな、ぐらいに思って下さい。
ご自分の環境に合わせてアレンジして頂ければと思います。

作業環境によっては同様の結果が得られないこともあるかと思います。あらかじめご了承ください。

これから１つずつ説明していきますので参考にしていただければ幸いです。

当ブログの運営状況

今回やっさんが行った移行の作業をまとめるにあたって参考となる運営状況をメモしておきます。

移転前

• 独自ドメインにて運営（お名前.com）
• はてなブログPro

移転後

• 独自ドメインにて運営（お名前.com）
• エックスサーバー（X10プラン）
• WordPressのテーマ：JIN

バックアップ

はてなブログでの記事のバックアップ

1. はてなブログのダッシュボードの設定→詳細設定へと進みます。
   ページ下部にある「エクスポート　記事のバックアップと製本サービス」をクリック。
   
2. ダウンロードして保存します。
   

サーバーを用意する

サーバー登録

はてなブログでははてなのサーバーを使用していましたが、ワードプレスに移行すると自分でサーバーを契約しなければなりません。

今回やっさんはエックスサーバーのX10プランにしましたのでそちらで説明していきます。

まずこちらにアクセスしてください。

エックスサーバー公式サイト

1. 「お申し込みはこちら」をクリック。
   
2. 「サーバー新規申込」をクリック。
   
3. 画面に沿って必要事項を入力していきます。
   
   
   
4. Xサーバーからアカウント設定完了のお知らせメールが来ます。
   
5. 試用期間は10日間あります。この間に忘れないように支払いを済ませておきましょう。
   Xサーバーにログイン後、インフォパネルの「料金の支払い」から設定することができます。
   
   月に1000円（契約期間によって金額が前後します）、初回のみ3000円です。

ドメイン登録

次にXサーバーに独自ドメインを設定します。

1. サーバーパネルにログイン
2. ドメイン設定をクリック
   
3. ドメイン設定の追加タブをクリック
   ドメイン名を入力し、「ドメイン設定の追加（確認）」をクリック。
   

WordPressをダウンロード

Xサーバーの自動ダウンロード機能を使ってWordpressをダウンロードします。

1. サーバーパネルにログイン
   
2. 自動インストールをクリック
   
3. プログラムのインストール→Wordpress日本語版の「インストール設定」をクリック。
   
4. 必要事項を入力し、「インストール（確認）」をクリック。
   
5. 入力した内容を確認し、「インストール（確定）」をクリック。

これでワードプレスがダウンロードされました。

WordPressでの記事修正、カスタマイズ

hostsファイルを使ってローカルのカスタマイズ環境を作る

ワードプレスをダウンロードしたのでお次はデータをインポートしていよいよカスタマイズ…！！！

と行きたいところですが、ネームサーバーを移管しないと今のままではワードプレスの管理画面にすら入れないんです。

でもネームサーバーを移管してしまうと現はてなのサイトに入れなくなってしまいます。

移行後、はてなのサイトは運用したままワードプレスのカスタマイズをしたい…。

やっさん

どうすればいいんだ…

これは、hostsファイルというものを使うと可能になります。

hostsファイルを使うことで、DNSを使うことなしにホスト名を用いて未公開のサイトにアクセスできます。

詳しくは参考サイトを見て頂くとして、簡単にやり方だけまとめておきます。

1. hostsファイルを開いて編集するhostsファイルの実体はテキストファイルです。それぞれのOSでファイルが置かれている場所が違います。
   hostsファイルのある場所は以下のようになります。

   OS 設置場所(通常の場合)
   Windows 7 C:\Windows\System32\Drivers\Etc\hosts
   Windows 8.1 C:\Windows\System32\Drivers\Etc\hosts
   Windows 10 C:\Windows\System32\Drivers\Etc\hosts
   Mac OSX /private/etc/hosts

   テキストエディタ（「メモ帳」などのアプリケーション）を使って編集することができます。

2. hostsファイルの最後の行に
   〈IPアドレス〉〈スペース〉〈ホスト名〉を入れます。
   IPアドレスはエックスサーバーのサイトから調べます。エックスサーバーのサーバーパネルにログイン
   
   サーバー情報をクリック
   
   IPアドレスが記載されています。
   

その際の対処法については以下に参考サイトを挙げておきます。

これでWordpressの管理画面にアクセスすることが出来るようになったと思います。

私の参考にしたサイトでは、hostsに追記するとXサーバーが先に参照されるため、作業中は自分のパソコンからはてなブログが閲覧不可になると書かれていました。
はてなブログを編集したいときはhostsファイルの追記を消しましょう。
（やっさんはなぜか作業中もはてなブログの管理画面にアクセスできました…なぜかはわかりません。）

ここまででやっと環境が整いました…！！
ここからワードプレスで作業をしていきます。

はてなブログのデータをインポート

1. WordPressにログインするログイン画面は「ドメイン/wp-login.php」で出てきます。
   
2. ツール→インポートをクリック
   
3. Movable Type と TypePadの「今すぐインストール」→「インポーターを実行」をクリック。
   ※やっさんはインストール済みなので画面では「インポーターを実行」となっています。
   
4. 参照をクリック→はてなブログのデータをエクスポートした際に保存したファイルを選びます。
   「ファイルをアップロードしてインポート」
   
5. インポートが始まります！
6. 「すべて完了しました」と出れば終了です。

テーマ購入

やっさんはWordpressを始めるにあたってテーマは有料一択！でした。
魅力的なテーマが多く、SANGO、AFFINGER、SWALLOWと迷っていました。

そんな時、絶妙なタイミングで新しいテーマの発表が…！

デモサイトを見に行き、そのデザインとやっさんのやりたいイメージがぴったりと合ったため即決！

というわけでやっさんが購入に踏み切ったテーマはJINです…！

JIN公式サイト

JINのインストールの仕方はマニュアルに丁寧に書かれています。

JINマニュアル

パーマリンク設定（記事URLの修正）

まずは自分のパーマリンク（個別記事のURL）を確認しましょう。

やっさんの場合は

この2種類を設定していました。

カスタムURLを使用していると、パーマリンクの設定は格段に楽になります。

やっさんの場合は途中からカスタムURLにしたり、気分によってしていないものが全体の半分くらいありました(;O;)

日付形式のものは後から修正が必要になります。
一つずつ見ていきましょう。

1. WordPress管理画面のダッシュボードから設定→パーマリンクの設定と進みます。
2. カスタム構造を選択してドメイン以降に「/entry/%postname%」と入力します。
   

   画像では「/entry/%postname%」の後に「/（スラッシュ）」が付いていますが、通常はスラッシュは入れないでください！

   やっさんは他の方の記事を参考にスラッシュを入れて修正していたら、移行後にそれが間違いだったと発覚し修正を余儀なくされました。ご注意くださいね。

3. 下の「変更を保存」を忘れずにクリックしておきましょう。
   これでカスタムURLは無事に変更されています！！

日付形式のURLはこのままでは作業が完了しません。

上記作業をしただけではインポートした記事のURLは以下のようになっており、スラッシュが抜けてしまっているんです。

そこでスラッシュを入れる作業が必要になってきます。
早速行っていきましょう。

1. プラグイン「Enhanced Custom Permalinks」をインストールします。Wordpress管理画面で「プラグイン」→「新規追加」と進み、キーワード検索欄に「Enhanced Custom Permalinks」を入れて検索します。
   
2. インストールして有効化をクリック。
3. こちらのプラグインはWordpressの記事URLに/（スラッシュ）が入れられるようになるプラグインです。
   1つずつ記事を編集してパーマリンクを修正していきます。Wordpress管理画面で「投稿」→「投稿一覧」と進み、記事をクリック。そしてURLに/(スラッシュ)を入れていきます。
   ※ここでも画像ではURL最後に/（スラッシュ）を入れておりますが、皆様は入れないようにお気を付けください。

   このURLを間違えるとはてなブログからきちんと記事が引き継げないので慎重に進めましょう。

   旧はてなの記事を見てURLが同じになっているか確認すると確実ですね。

全て変更し終えたら終了です。お疲れさまでした。

見出しタグの変更

ここからは記事の修正、修正の連続となります！！頑張りましょう！

はてなブログからWordpressへ移行する際には、はてな独自の仕様で修正が必要になってくるものがいくつかあります。

その１つが見出しタグ。

はてなブログは記事タイトルがh1、記事中の大見出しがh3を使用しています。

やっさん

h2がないやん！！！

そうです。h2がないのです。

このままいくとWordpressでは大見出し(h2)にしたいところが全て中見出し(h3)になってしまうのです。

そこで全記事のh3タグをh2タグへ、h4タグをh3タグへ…と変更していく必要があります。

1つずつ変更していってもいいのですが、気が遠くなりますよね…

これを一括で変更する方法があるんですよ！！

こちらの記事に「Search Regax」という文字の置換えができるプラグインを使った方法がめっちゃ親切に書かれています。

カテゴリー見直し

移行を機会にカテゴリーも見直しました。
はてなブログは階層化するのに色々とこねくり回す必要がありましたが笑、それに比べるとWordpressの設定のしやすさっていったらなかった笑

カエレバカスタマイズ

まだまだ作業、あります…大変だけど、頑張ったら絶対いいことあるよ！頑張ろう！！

カエレバのデザインを入れます。
こちらの記事を参考にしました。

アイキャッチ

アイキャッチ、これが一番大変だった…（そしてまだ作業中）

アイキャッチを意識して作りだしたのが最近でして。
それまでは記事に使用している一番最初の画像がアイキャッチになってました。

今回移行するにあたってそれが気に入らなくて（テーマが素敵だから妥協できなかった）、１つずつ新たに作成し直しました。

元々アイキャッチをきちんと作成されている方は「Auto Post Thumbnail」というプラグインを使うと自動的にアイキャッチを設定してくれます。

1. WordPress管理画面で「プラグイン」→「新規追加」と進み、キーワード検索欄に「Auto Post Thumbnail」を入れて検索します。
2. インストールして有効化をクリック。
3. 「設定」→「Auto Post Thumbnail」と進んで「Generate Thumbnails」をクリック。
   
4. すると記事にアイキャッチが自動的に設定されます。

ただ、このプラグインではやっさんのブログはほぼアイキャッチがきちんと設定されませんでした(;O;)（なぜか大半がブログ村のアイコンになってた泣）

結局ほとんどの記事を手動で設定しています。

アイキャッチを設定しようと思うと普通は記事の編集画面に入らないといけません。１つずつ編集画面を開くのが非常に面倒くさい。

少しでも簡単に登録できないかと探したところ、管理画面の一覧からアイキャッチを設定できるプラグインを発見。

以下参考記事です。

プラグインは「Easy Featured Images」です。

これ、2年以上前に更新が止まっているそうでして…入れるのためらいましたが人柱になってやろうと思って入れてみたら無事動きました。バージョン4.9.3です。

きちんと動作するかわかりませんので使用される際は自己責任でお願いします。

入れるとこんな感じでアイキャッチが表示されます。
設定したいときは「＋add image」をクリックすればオーケー。

目次

WordPressでは目次はプラグインで入れることができます。

JINであればあらかじめデザインが搭載されているため、マニュアルに従ってプラグインを入れるだけでオーケー！

はてなブログの方では[:contents]と入れると目次が表示されるようになっていたため使用していましたが、Wordpressの方と重複してしまうため削除しなければなりません。

これも記事１つずつ地道に…

調べたところ前述した「Search Regax」という文字を検索して置換えできるプラグインを使って正規表現というもので削除できそうだったのですが、いかんせん正規表現がわからなくて( ;∀;)

もし正規表現に精通してらっしゃってこのやり方ならできるよ！というのをご存知の方がいらっしゃったらぜひご一報をお願い致します(‘Д’)

正規表現については説明すると長くなりそうなので気になる方はググってみてください！

ブログカード

ブログカードははてなブログ特有で修正が必要になるんですが、Wordpressのテーマによって修正することなくきちんと表示してくれるものがあります。

そしてJINでは対応してるんですよ！(*´з`)

これは助かった！そういうところでもJINおすすめ。

キーワードリンク

こちらもはてなブログ特有のもの。無料版のはてなブログ特定のキーワードに語句説明のリンクが勝手に貼られてしまうんですよ。

有料版のはてなproにすると外すことができるんですが、はてなproにする以前の記事にはリンクは貼られたままという超不親切仕様( ﾟДﾟ)

なので過去記事をこれまた一つずつ…

はてな無料版を使われている方でいずれはWordpressに、と思っている方はさっさと移行してしまうか早めにproにしておくことをお勧めいたします。

そしてこれも「Search Regax」と正規表現で削除できそうだったのですが、いかんせん正規表現が…（以下略）( ;∀;)

これめっちゃできそうだったんですけどねー。

キーワードリンク削除が地味に辛い。

テーマカスタマイズ

記事の修正が出来たら、いよいよテーマカスタマイズです…！

テーマカラーの設定やらプロフィール作成、CTA(Call To Action)の作成などやること盛りだくさんです！

でもどんどんブログが出来上がっていくので楽しいところでもあります。

JINはマニュアルを順に追っていけば素敵なサイトが完成するという親切設計です。

今回やっさんはCSSなどもいじる必要はありませんでした。

ワードプレスで「移行しました」の記事を作成する。

移行が完了したらすぐに記事を投下したいので、あらかじめ記事を作成、投稿しておきます。

はてなブログで「移行します」の記事を作成する。

更にはてなブログでも記事を作成します。

出来るだけはてなブログの読者の方にお知らせしたかったためです。こうしておくとはてな読者の方には新着記事としてお知らせがいきます。

そしてこちらの記事はURLを先ほどワードプレスで書いた「移行しました」の記事と同じにしておきます。

これは移行完了後にはてなからワードプレスへ、同じURLへリダイレクトされるように設定するためです。（リダイレクトについては後ほど詳しく書きます。）

そうすると、

というわけです。

うまくいくか不安でしたが、無事狙ったようにできたようです。

移行本番

hostsファイルを戻す

ここまでできたらいよいよ移行本番です。これまでの作業、お疲れ様でした。あとちょっとなので頑張りましょう！

一番最初にローカル環境を作るためにhostsファイルに付け足した
〈IPアドレス〉〈スペース〉〈ホスト名〉を削除すればいいだけです。

ネームサーバー変更

ネームサーバーを移管します。
これをするとサイトへのアクセスが不安定になってしまいます。
（しばらくつながらなくなります。）
そのため、やっさんは金曜の深夜より作業開始しました。
移管してからも色々と作業があってあんまり寝れないので、できれば次の日はフリーにしておくことをお勧めいたします。

これからブログ移行したいなぁと思ってるんだけどアナリティクス見たらアクティブユーザーがいるのでまだしない方がいいよなぁ…
何時まで起きてればいいのだろう((+_+))

— やっさん＠ブログ移行中 (@yassantassanblg) 2018年3月24日

結局は深夜1時頃より始めました。

やっさんはお名前.comからエックスサーバーにネームサーバーを移管しましたので、そちらの作業過程をまとめたいと思います。

1. お名前.comにログインするこちらにアクセスしてログインします。
   お名前.com公式サイト
2. 「ドメイン」→「ドメイン設定」→「その他の機能」をクリック
3. 「ネームサーバー設定」の「ネームサーバーの変更」を選ぶ
4. ネームサーバーの変更を行うドメインにチェックを入れ、「その他のネームサーバー」を選びます。そして出てきた入力欄にエックスサーバーのネームサーバーを入れていきます。エックスサーバーのネームサーバーは、最初にエックスサーバーでアカウントを作成した際に送られてきた「サーバーアカウント設定完了のお知らせ」メールに記載されています。ネームサーバーの入力欄は始め3つしか出ていませんが、欄右横の＋マークをクリックすると追加することができます。５つ全て入力してください。
5. 入力が完了したら確認をクリック。
   
   確認画面が出たらOKをクリック。
   
   ネームサーバーの変更はこれで完了です。お疲れ様でした。

DNSレコード設定

引き続きお名前.comで作業を続けます。

1. 「ネームサーバー設定」の「DNS関連機能の設定」をクリック。
   
2. 設定をするドメインにチェックを入れて「次へ進む」
   
3. 「DNSレコード設定を利用する」の「設定する」をクリック。
   
4. 登録済みの表の「VALUE」欄に「hatenablog.com」と書かれているところがあるので、右の削除欄にチェックを入れ、確認画面に進みます。
   
5. 「設定する」をクリック。
   これでDNSレコードの設定が完了しました。

ドメイン浸透を待つ

ここまで作業出来たら、後は待つのみです。
サーバーを引っ越した際には先ほど行ったDNSの書き換えの作業が必要になります。
書き換えた後、新しい情報がインターネット上に反映されるまでは時間がかかるそうなのです。
待っている間がとにかく不安なのですが、、、
やることはやったと思って潔く休みましょう！！
（やっさんは気になって中々寝れず、結果寝不足になりました。）

反映までにかかる時間は人それぞれですが、一般的には1日～3日と言われているそうです。

やっさんの場合は設定変更が完了したのが深夜2時ごろ。
次の日8時頃はまだ自分の環境ではアクセスできませんでしたが、フォロワーさんからは見れてるよという声が。
その後やっさんもお昼前頃に一度アクセスできるようになりましたが、その日の夜はまたつながらなくなっていたりと丸1日は不安定だったのではないかと思います。

やっさん

不安になるけど自分を信じてじっと待つのみです！！

移行後の作業

はてなブログの独自ドメインを外す

無事に移行が完了していたらはてなブログの独自ドメインを外しましょう。
ダッシュボードの「設定」→「詳細設定」と進み、
独自ドメイン欄を消すだけです。
忘れずに一番下の変更するボタンを押しておきましょう。

はてなpro解約

はてなブログproを契約されていた方は解約しておきましょう。
はてなブログ管理画面–はてなブログpro
こちらから解約できるそうです。
やっさんはproの更新期限が近付いており、支払いのためのはてなポイントもチャージしていなかったので期限がすぎたら自動的に解約されました。

リダイレクト設定

旧はてなブログが独自ドメインからhatenablog.jpにアドレスが変わったので、hatenablog→独自ドメインへリダイレクト（自動的に移動）させる必要があります。

こちらのサイトの通りにやればすぐにできました。
これで旧はてなからWordpressへ、ドメイン以降が同じURLの記事へ飛ばすことができます。

ワードプレスではてなブックマークの通知がくるようにプラグインを入れる

WordPressは何も設定をしていないと自分の記事にはてブがついても通知が来ないので気づきません。
それを解決してくれるのがプラグイン。
こちらの記事を参考に設定しました。

Google Analyticsの設定

Google Analyticsも忘れずに設定しておきましょう。
設定の仕方はGoogle Analyticsヘルプを見るか、Wordpressの各テーママニュアルを見てください。

Google Search Consoleの設定とURL表記の統一

はてなの時はwwwありのサイトURLしか登録していなかったので、
今回wwwのなしの方もSearch Consoleに登録しました。
更にURLをwwwありの方に統一させました。

URLは、wwwを含むバージョンとwwwを含まないバージョンの両方を任意に指定できます。(例：http://www.example.comとhttp://example.comなど)

しかし、Googleはこの2つを別のページとして判断するため、正しく設定しないと重複ページとして認識されることがありますので、回避策として、GoogleサーチコンソールでサイトのwwwありなしをGoogleに指定することができます。

wwwありなしをGoogleサーチコンソールで統一する方法より引用

やり方は以下の記事を参考にしました。

広告の設置

こちらも各テーママニュアルを参照しましょう。

まとめ

以上、やっさんがはてなブログからWordpressへ移行した際に行った作業全てをまとめさせていただきました。

アクセスは今のところ移行前と比べて横ばいか少し下がったくらいです。

ただ、記事が依然と比べて格段に書きやすく、それだけでもWordpressへ移行してよかったと思います。

お次はhtts化に手を付けようと思います！！

やっさん

ちょっとその前に一息つきたい

やっさんたっさんの子育て隊の購読

当ブログは以下アカウントより読者登録して頂けます。

Twitterでは更新情報の他、ブログ運営に関する試行錯誤や
毎日家事・育児をこなす中で心に留めたいことをつぶやいています。
気軽に声を掛けて頂けると飛び上がって喜びます。

TwitterをフォローするFeedlyで購読する