はてなブログからWordPressに移行した最新詳細手順【2018年6月】PART2

こんちくわ あ゛じです。

なんだか最近、はてなブログProもSSL化したそうじゃないですか。

オレが出ていくタイミングを見計らってのことですかね?

腹立たしいわぁ~w

今までのおさらいと、これからの流れ

さて、今回は、はてなブログからWordpressに移行した手順のPART2です。

これでほぼ完結かな。

ここまでの流れを簡単におさらいしてみましょう。

  1. Instant WPを導入
  2. パーマリンクの設定
  3. 見出しタグの修正
  4. テーマをインストール

ここまでやりました。

あと、書き忘れてましたが、ブログタイトル、サブタイトルも修正しておきましょう。

「外観」→「カスタマイズ」をクリック。

「サイト基本情報」で修正出来ます。

移行後でも出来ますけどね。

Instant WP内で作業をしているため、今まで運営しているブログにはまだ、何も影響がありませんでした。

でもここから先は、実際に移行をしないと出来ない作業になります。

テーマのインストールもして体裁がある程度整っているので、本格的な移行に移りましょう。

移行自体はそれほど面倒ではありませんが、アイキャッチ画像が表示されていない等、完璧にはなっていない状態で公開されることになります。

これらの修正は手作業になるので、時間がかかることが予想されます。

検索順位には影響無いと思いますが、なるべくなら恥ずかしい姿を見られる時間は少ないほうが良いですよねw

なのでこれからの作業は一気に出来るよう、時間に余裕がある時にすることをお勧めします。

早く注文しないと売り切れるよ!

事前準備

あ~あ~~川の流れのよぅ~にぃ~♪ってカンジでスムーズに作業が出来るよう、事前に以下の準備をしておきましょう(歌ってる場合か!w)

用意しておくソフト類

・FTPソフト

画像ファイルの移行で必要になります。

移行先のWordpressのフォルダにアクセスして、画像ファイルをぶっこみますw

使ったことがある人は問題ないと思いますが、使ったことがない人は準備して慣れておきましょう。

無料の有名どころでは、FFFTPFileZilla があります。

設定に慣れていないと、「ホスト名」ってなに?とか「ユーザー名」には何を入れるの?って悩むかもしれません。

オレは長年使ってますが、今でも悩んだりしますw

そういう悩みは事前に解決しておきましょう。

今はレンタルサーバーの管理画面にもFTPのツールがある場合が多いので、それでも良いです。

サクラエディタ(無料)

画像ファイルのURL取得で必要になります。

DS Downloader(無料)

画像ファイルのダウンロードで必要になります。

・画像ファイルを入れるフォルダ

デスクトップに「2018」というフォルダを作り、

その中に「05」というフォルダを作っておきます。

この「05」のフォルダに画像ファイルをダウンロードして、Wordpressのフォルダに入れることになります。

別に2018とか05じゃなく、好みの名称でも大丈夫です。

画像ファイルに対する認識

画像ファイルについて、理解しておいたほうが良いことを書いておきます。

はてなブログの記事に挿入した画像というのは「はてなフォトライフ」に保存されます。

記事のソースを見ると分かりますが、その保存先にリンクをして、記事に画像を表示させているんですね。

はてなブログから移行しても、IDを削除しない限り、自分のはてなフォトライフは生きていて、そのまま使えます。

移行先に移行した記事のソースは、画像のリンク先がそのままの状態です。

なのでリンク先である、はてなフォトライフの画像を表示します。

移行後に記事を見てみると、何もしなくてもちゃんと画像が表示されています。

この状態のまま、移行先のWordpressで運用を続けても大丈夫なんですが、

仮に・・・

・はてなフォトライフがサービスを終了した

・はてなフォトライフの画像URLが変更になった

・はてなIDが使えなくなった(削除等)

というようなことがあれば、すべての記事の画像が一斉に表示されなくなる事態になります。

運良くそれらの画像ファイルを手元に入手出来ていれば修正出来るでしょうけど、最悪、画像ファイルも消えてしまっていたら、泣き崩れるしかないでしょうw

それと、アイキャッチ画像についてですが、アイキャッチ画像は内部リンクしか出来ず、基本的には外部リンクが出来ないようです。

(可能にするプラグインもあるようですが、うまく動作しないとか・・・)

つまり、はてなフォトライフにある画像は外部リンクとなるのでアイキャッチに出来ないんです。

それらの理由から、ブログ移行と同時に画像ファイルの移行も必要なんですね。

アイキャッチはいらないよ!ってんであれば、とりあえず画像はなにもしなくてもOKでしょうけど。

その他の注意点

あと、これから説明する実際の移行作業で、「ドメインのネームサーバー設定変更」と「移行先サーバーへのドメイン登録とWordPressのインストール」があります。

この部分については、人によって利用環境が違うので説明しません。

自分の利用環境に合ったやり方を事前に確認しておいてください。

それほど難しくないです。

ちなみにオレは、ドメインについては「お名前.com」、サーバーは「エックスサーバー」です。

それでは、ちゃんとトイレに行って、飲み物とポテチでも用意しましょうw

はてなブログからWordpressへ移行開始

作業の順番

  1. はてなフォトライフから、記事に使われていた画像ファイルを一括ダウンロード。
  2. 「All-in-One WP Migration」というプラグインで、Instant WPからデータをエクスポート(ここでInstant WPの役目終了)。
  3. ドメインのネームサーバー設定を、はてなブログから移行先のサーバーへ変更。
  4. 移行先のサーバーにドメインを登録し、WordPressをインストール。
  5. 移行先のWordPressに「All-in-One WP Migration」をインストールし、Instant WPからエクスポートしたデータをインポート。
  6. (これで移行完了)
  7. FTPソフトで移行先のWordPressフォルダに画像ファイルをアップロード。
  8. アイキャッチ画像の修正
  9. 記事内の画像リンクをはてなフォトライフからアップロードしたWordPressフォルダ内の画像ファイルへ変更。

文字にすると大変そうですが、1と2は移行前の作業なので慌てないで大丈夫。

7~9は見た目が悪くなるだけだし、後でゆっくりやれば良いや、と割り切ればOKですw

3~6だけはブログの表示に影響する重要な部分なので、ここだけはスムーズにこなしましょう。

ここだけに限れば、作業にかかる時間は30分程度です。

1.はてなフォトライフから、画像ファイルを一括ダウンロード

いきなりですが、ここは先人の知恵をお借りしたので、そちらを参考にしてください(爆)

参考にしたのはこちらのサイトです。

残念なのは、後半の一括URL変更が説明のとおりにやっても失敗します。

よく考えてみたんですが、この方法だと多分うまくいかないんです。

しかし、ダウンロードについてはこの方法がベストだと思うので、そこだけ参考にさせてもらいましょう。

ダウンロードにあたって、画像の保存フォルダを年月で仕分けするよう説明されてますが、これはしなくて良いです。

画像は上の事前準備で説明したフォルダにまとめて保存します。

DS Downloaderでダウンロードする前に、画像の保存先をこのフォルダに設定しておきましょう。

「オプション」→「フォルダ検索ボタン」→フォルダ指定

無事、画像がダウンロード出来たでしょうか?

(他人まかせw)

とりあえず、画像からはここで一旦離れます。

2.「All-in-One WP Migration」で、Instant WPからデータをエクスポート

Instant WPに「All-in-One WP Migration」というプラグインをインストールします。

「プラグイン」→「新規追加」

「プラグインの検索」に「All-in-One WP Migration」と入力。

「All-in-One WP Migration」をインストールし有効化します。

「All-in-One WP Migration」→「エクスポート」

「エクスポート先」をクリックします。

「ファイル」をクリックします。

処理が始まるので待ちましょう。

ボヨンボヨンしてる緑部分をクリックしてダウンロードします。

SIZEが512MBを超えると、有料の無制限版が必要なようです。

オレのブログは300記事程度で55MBなので、512MBまで大丈夫なら大抵、無料でいけるように思います。

ダウンロードはちょっと時間がかかります。

最初、ダウンロードしたファイルが2つあるなぁ?って不思議に思ったんですが、それはダウンロード中だったからでした。

ダウンロードが終わるとファイルは1つになります。

3.ドメインのネームサーバー設定変更、4.新サーバーへのドメイン登録とWordPressインストール

ここは各自の環境で作業してください。

ドメインのネームサーバー設定変更はドメインを取得したところで、移行先のサーバー管理画面でドメインの登録とWordPressのインストールをします。

5.移行先のWordPressに「All-in-One WP Migration」をインストールしデータをインポート

移行先のサーバーでWordPressをインストールしたら、早速、管理画面に入りましょう。

上記2の方法で「All-in-One WP Migration」をインストールします。

インストールされたら、先程エクスポートしたファイルをインポートします。

「All-in-One WP Migration」→「インポート」をクリックします。

ファイルをドロップするか「インポート元」をクリックし、指定します。

インポートが始まります。

「PROCEED」をクリックします。

インポート完了です!

6.移行完了

ブログにアクセスしてみましょう。

ちゃんと移行されてるハズです(感動w)。

これで一応、移行は成功しました。

このままで良ければ、そのまま運用出来ますw

SSL化(https)ですが、エックスサーバーの場合、管理画面から簡単に出来ます。

どのタイミングでやったら良いか悩みましたが、このタイミングでSSL化したと思います。

タイミングによって何か影響が出るのか分かりませんが、問題はありませんでした。

※SSL化は別途設定が必要です。

参考になるサイト

※注意※

移行先のWordPressをインストールしたときに、IDとパスワードを設定したと思います。

しかしインポートをしたことで、これらがInstant WPで使っていたIDとパスワードに書き換わっているハズです。

ID:admin

パスワード:password

これは危険なので、スグに書き換えてください。

「ユーザー」から変更出来ます。

7.WordPressフォルダに画像ファイルをアップロード

FTPソフトを使って、1でダウンロードした画像ファイルをアップロードします。

FTPソフトの使い方は大丈夫ですね?w

「wp-content」というフォルダを探し、その中にある「uploads」というフォルダの中に画像が入ったフォルダごとアップロードします。

こんなカンジになりますよ。

これでWordpressの「メディアライブラリ」に移行出来たんですが、このままでは認識されないようです。

なので「Add from Server」というプラグインを使って認識されるようにします。

「プラグイン」→「新規追加」をクリックします。

「Add from Server」と入力します。

インストールして有効化します。

「メディア」→「Add from Server」をクリックします。

すべての画像を選択し、「File Time」を選択→「Import」をクリックします。

これで画像ファイルの移行完了です。

8.アイキャッチ画像の修正

ここは力作業になります。

一番時間がかかったのがコレで、もう倒れそうになりましたw

一応、記事の最初にある画像をアイキャッチにしてくれるプラグインがあるので、使ってみましょう。

「Auto Post Thumbnail」というプラグインです。

プラグインのインストール方法はもう覚えましたよね?

動作はボタンを押すだけなので、やってみてください。

オレの場合、以下(右端)のような結果になりました(汗)

やらないよりは少しマシっていう程度ですw

ほとんどの記事の編集を開いて、手直ししました(涙)

ちょっとでもラクになる方法としては、この一覧に表示される1ページあたりの記事数を増やすことくらいでした。

1ページに表示される記事数が増えれば、ページを移動する回数が減るので、それだけでも結構違います。

表示件数の変更は、上の方にある「表示オプション」から

「ページ送り」で変更出来ます。

この作業をしながら、もっと早く引っ越しすべきだった!とホントに悔やみましたよw

なんか簡単に設定出来る方法がありそうなもんなんですけどねぇ・・・。

9.記事内の画像リンクをWordPressフォルダ内の画像ファイルへ変更

さて、やっと最後になりました。

最後なのに、これはやってもやらなくても見た目は変わらないんで、達成感は無いと思いますw

でもやらないワケにはいきません。

記事内の画像リンクURLを一括で全部変更するという大技を繰り出します。

ちょっと怖いです。

一括で置換するので、失敗すると予想してなかった部分まで変更されたりして地獄を見ます。

なので、ここでまたもや先人のサイトを参考にしてもらいましょう。

オレのせいにされたら困るし(ナニ!?w)。

とっても信頼できるサイトです。

「画像のリンクURLの書き換え」という項目から下をよく読んで、理解した上で実施して下さい。

今までのオレの説明のとおりにやってきたのなら、「Search pattern」「Replace pattern」は以下のように設定してください(コピペ推奨)。

・Search pattern(書き換えたい部分の抽出)

#https://cdn-ak.f.st-hatena.com/images/fotolife/はてなIDの頭文字/はてなID/(……..)/#

オレの場合、はてなIDが tokushitai なので、はてなIDの頭文字は t になります。

・Replace pattern(書き換え後の状態)

移行先WordpressのURL/wp-content/uploads/2018/05/
オレの場合、移行先WordpressのURLは https://tokushitai.com です。
実際に「Search Regex」に入力した画像は以下です。

この状態で「Search」をクリック、「Replace」をクリックしてみます。

※「Replace & Save」はまだクリックしない。

こんなカンジで対象部分の置換前(緑)、置換後(茶)の置換予想が表示されます。

内容を全部確認しろと言ってもムリなので、

  • 予想外の部分が対象になっていないか?
  • 対象が極端に多い、または少ないということがないか?
  • 正しい(指定した)内容で変換されるか?

このへんを確認しましょう。

「Replace & Save」をクリックしない限り、実際に置換と保存はされませんので、違和感があるなら何度でも繰り返し試してみて下さい。

確認してOKなら「Replace & Save」をクリックします。

実際に記事編集(テキスト)を開いて、確認してみます。

画像のソース部分を見ると、

指定した内容に書き換わっています。

もちろん、画像もちゃんと表示されていると思います。

これで全作業終了です!

おつおつ!!!w

amazonクリスマス特集

移行後にやること

長い道のりでしたが、よくぞここまで頑張りましたね!w

移行は無事、終了です。

でもまだ、ちょこちょことやることが残っています。

・はてなブログの後処理

はてなブログ側にも同じ記事が残ったままなので、これを処分しないとです。

Googleさんにコピーサイトと認識されたら大変です。

オレは全部削除しました。

併せてリダイレクトの設定もしました。

確かこの設定は、でででーさんのブログを参考にさせてもらったような。

はてな時代に何度か見かけてたんですが、今回の引っ越しで偶然、でででーさんも引っ越ししてた事を知りましたw

・ブログカードや画像の未修正部分等を修正

大半の部分は正常に表示されているんですが、中にはおかしな状態になっている部分があるので、それらの修正が必要です。

画像が半分ちぎれていたり(ダウンロードがうまく出来なかった?)、テキストの一部分が何故か変な色が付いていたり・・・。

全部確認するのは大変なので、そこらへんは見つけ次第修正ってカンジで良いように思います。

アクセスが多いページに絞って確認するのも手ですね。

それとリンク切れについては、勝手に見つけて教えてくれるプラグインがあります。

「Broken Link Checker」

このプラグインを入れておくと便利だと思いますよ。

こんなところかなぁ~?

後始末関連は結構ダラダラやったんで、忘れてることもあるかも。

モレてたらゴメンよw

おわりに

いやぁ~やっと書き終わった!w

何日かに分けて書いてたんだけど、段々めんどくさくなってきて、途中で何度止めようかと思ったことかw

はてなブログからWordpressへ移行する人達のバイブルになれば幸いでございます。

書籍化ならないかしら?w