>> 目的別おすすめプログラミングスクールはこちら!

初心者でも簡単!はてなブログからWordPressに移行手順最新まとめ

ブログ関係

 

こんにちは!みなさん!お気づきでしょうか。
ついに当ブログ…はてなブログからWordPressに移行しました!(ワーパチパチ)

はてなブログはそれはそれで使い勝手は良く、個人的には気に入っていたのだが、何せ最近webデザインの勉強を始めてしまったので自分でCSSのカスタマイズが出来るようになりました。そうするとはてなのカスタマイズ性がイマイチに感じてきて、なんだかんだとWordPress移行に踏み切った訳です。

画像の差し替えだったり、タグが違ったっりと…とにかく面倒臭いと聞いていたのですが、実際にやってみて思ったのは「面倒なことはあったけれど、想定していたほどではなかった」ということ。全部の手順をまとめているサイトがなかったので、全部まとめて書きました!超長いです!できるだけ丁寧に解説していきます。

そんなわけで「はてなからWordPressに移行したいな〜。けど面倒臭いらしいし、難しいのは嫌だなぁ…」と思っている人向けに、全ての手順をまとめました。是非参考にしてみてくださいね!

 

はてなブログとWordpressの違い・メリット比較

では始めに、おさらいとして、何故移行するのか、はてなブログとWordPressの大きく違う点やメリットの比較を簡単にまとめてみます。

 

はてなPro

・カスタマイズや記事を書いたりする操作が簡単→初心者も作業しやすい
・デザインのカスタマイズが比較的限られている
・サーバーがはてなのサーバー →簡単

<おすすめな人>
難しい設定をしたくない初心者
趣味でブログを「書く」ことメインにやりたい人

 

WordPress

・機能が多すぎ少し使いづらい側面も→ある程度慣れた人向け
・テンプレートの豊富さ
・自分でレンタルサーバーを用意する必要がある →ここが面倒臭く思われがち

<おすすめな人>
ある程度の管理の面倒臭さが苦にならない人
SEOを意識する人(アフィリエイター含)
ブログのデザインも思い通りに細かく設定人

というわけで、完全に住み分けなので、どっちが優れているとかではないです。よく「はてなブログとWordPressブログどっちがいいのか!?」みたいな記事が書かれているけど、あれは嘘です。「どっちが良いか」ではなくて、「どっちがよりあなたのスタイルに合うか」で考えてみてください

移行するメリット
・サーバーによっては契約代金が安くなる
(はてなPro¥600/月 → ロリポップスタンダード ¥500/月)
移行するデメリット
・時間と手間がかかる
・WordPressに慣れるまで時間がかかる

 

僕の移行したときの環境

さて一概に「はてなブログからWordPressに移行」と言っても、それぞれの環境によって結構やり方や手順が変わってきてしまいます。なので予め僕が行った作業環境をまとめておきます。

 

作業環境

OS:macOS
はてなブログ:はてなPro・独自ドメイン取得済
レンタルサーバー:ロリポップ!
独自ドメイン設定:お名前ドットコム
WordPressテーマ:Cocoon
記事数:160件ほど(写真多め)

 

今回の手順で使用するソフトやプラグイン一覧

FileZilla FTP
Site Sucker
Atom(エディタ)
Search Regex
Auto Post Thumbnail

たくさん出てきてややこしいですね…!
でも実際そこまで難しくないのでここでやめてしまわずに頑張ってみましょう!!

 

移行の大まかな流れ

わかりやすくするために、先に大まかな手順をざっくりとだけ説明しますね。

 

1. 移行の準備をする
サーバー・ドメインの設定、WordPress導入など

2. 実際に記事を移行する
はてな側でエクスポート・WordPress側でインポート

3. 画像を移行する
はてなフォトライフから一括ダウンロード・WordPressにアップロード

4. ドメインの設定を移行する
はてなで使っていたドメインをサーバーと紐付けてWordPressの方を表示させるようにする

5. 微調整
WordPressテーマ設定・アイキャッチ設定など

 

こんな感じです!まとめると結構簡単そうじゃないですか?
ちなみに僕は調べるのを含めて、1日でこの作業を完了できました。実質作業していたのは約7時間くらいですかね。

画像のアップロードのところでトラブルがあり、それでかなり時間を食っていたので、問題なくいけばもっと早く終わるかもしれません!

それでは詳細な手順を見ていきましょう

 

移行準備編

まずは実際に「移行」に移る前に準備することをしてしまいましょう。ここでしっかりやっておけばあとが楽になるはずです!「サーバー」とか「ドメイン」とか分かりづらい用語が多く出てくるので、難しく感じますが、頑張っていきましょう!

独自ドメインを取得

僕の場合は、はてなブログがはてなProに契約していて、すでに独自ドメインを取っていたのですが、そうではない人はここからです。
参考記事:はてなブログPro

ドメイン設定のおすすめは
お名前.com

ムームードメイン

のどちらかで間違いはないと思います。

 

サーバーを契約

これも僕はすでに契約していました。多くの人はここで用語に混乱してくるかと思いますが、焦らずにやっていきましょう。「サーバー」は「土地」、「ドメイン」は「住所」、そして「webサイト(ブログ)」が「家」というイメージです。あなたは今から土地を借りて、家を建て、そこに住所をもらう作業をする必要があります。

▼サーバーとドメインについて、わかりやすくまとめてくださっている記事があるので参考にしてください。
参考記事:【超初心者向け】Webサイト制作は家を建てるイメージで覚えよう!-ナナシログ

まずは「土地」が必要となるので、それを借りにいきます。(=レンタルサーバー)
僕はロリポップ!というサーバーを契約していました。
ロリポップ!もいいですが、おすすめはエックスサーバーです。基本的にはこのどちらかで問題はありません。

→ エックスサーバー

→ ロリポップ!

どちらも10日間の無料期間があるのでとりあえずインストールしてみましょう!

サーバーの導入方法(ロリポップ!の場合)

  1. 「お申し込み」クリック
  2. プランを選択。安さに惹かれそうになりますが、長期的に見てスタンダードを選択した方が良いです。
  3. 「アカウント名」「ロリポップ!のドメイン名」「メールアドレス」「パスワード」を入力します。ここの「アカウント名+ロリポップ!のドメイン」が自分のサーバーのホームURLとなりますが、結局独自ドメインをつけるので、そのURLは人にあまり見られません
  4. 各情報を入力して登録し、「無料期間お試し開始」をクリック<登録完了>

 

WordPressをサーバーに導入

今紹介した2つのサーバーでのWordPressのインストールは、実はめちゃくちゃ簡単です。サーバーの管理画面から「WordPress簡単インストール」を押して、サーバーの中にWordPressを導入してしまいます。以上です!手順ひとつだけです!笑

 

これでWordPressの管理画面(ダッシュボード)にアクセスできるようになっているはずです。管理画面にアクセスする方法は、サーバーに作ったURLの後に「/wp-admin/」と入れるだけです。ブックマークなどですぐアクセスしておけるようにしましょう。

 

独自ドメインのネームサーバーを変更

今度は先ほどのドメインをサーバーに紐づけてあげます。つまり、借りた土地(サーバー)に住所(ドメイン)をつけてあげます。

 

設定方法(お名前.comの場合)

  1. お名前.comでドメインを取得していること
  2. お名前.com Naviにログイン
  3. 「TOP」から「ネームサーバーを設定する」
  4. 使うドメイン名を選択し、「その他」→「その他のネームサーバーを使う」を選択
  5. 登録したサーバーのネームサーバーを入力して保存する

以上です!手順通りやればそんなに難しくはないはず!

 

パーマリンクをはてなの仕様に合わせておく

最後に、パーマリンクというものを設定します。簡単に言うと投稿したブログ記事のURLの一番右側にある自分で変更できる部分のことです。はてなブログとWordPressでは、この記事のURL部分の初期設定が異なるので、変更しないで記事を移行してしまうと、記事のURLが全て変わってしまい、移行ができてもこれまでの全ての記事が読めなくなってしまいます!!そんなことにならないように、移行前にしっかり準備しておきましょう。

WordPress管理画面→設定→パーマリンク設定

 

・はてなブログでのURL設定が、初期設定のままの人は…
「共通設定」の中の「カスタム構造」にチェックを入れます。


空欄の中に「/entry/%year%/%monthnum%/%day%/%hour%%minute%%second%」といれてください。
はてなブログの記事ページのURLは
「http://自分のドメイン/entry/投稿した西暦月日時間分秒/」で設定されています。14桁の数字の羅列です。

 

・はてなブログでのURL設定をカスタムURLに設定していた人は
「共通設定」の中の「投稿名」にチェックを入れておきます。

お疲れ様でした。これでひとまず移行前の準備は終わりです。概念的にはこの部分が一番小難しくて、頭を使うので大変ですよね。少し一息入れてから次へ進んでください◎

実際に移行(記事編)

さて、準備は万全なので、ここから実際にブログを移行していきます。慎重に丁寧にやっていきましょう。まずは昔のブログのテキストデータを全て移行します。

 

はてなブログで記事をエクスポート(出力)

これは実は結構簡単です。はてなブログの初期機能でついているのです。

 

1.はてなブログの管理画面→「設定」→「詳細設定」→エクスポート欄の「記事のバックアップと製本サービス」をクリック

2.確認画面が出るので「エキスポートします」をクリック
※ちなみにエキスポート自体は何度でもできるので怖がらず作業してください。僕はこのボタンおすのめっちゃビビってましたけど。笑

3.エキスポートが完了しました。と表示されるので「ダウンロード」をクリック

これで自分のパソコンの中にブログ内のすべてのテキストデータが保存されました
次はこれを確認してみましょう!

 

エクスポートされたファイルを一部修正

実は、はてなブログは仕様が少しだけ変わっていて、見出しをつけるときのタグがWordPressと異なります。具体的には、

はてな
<h3>大見出し</h3>
<h4>中見出し</h4>
<h5>小見出し</h5>

と言うタグが使われています。

一般的には(WordPressでは)
<h2>大見出し</h2>
<h3>中見出し</h3>
<h4>小見出し</h4>

となるはずです。

なのでこのズレを修正させてあげないと、WordPressにインポートした後に見出しが違う!ってなって一つ一つ変えていく必要があり、めちゃくちゃ面倒になります。なので先にインポートしてきたファイルの状態で一括変換してあげます。

1. Atomダウンロード
ここで一つ目の武器(ソフト)「Atom」を使います。多分テキストエディタソフトならだいたいなんでもできると思いますが、僕がやった方法で解説は進めていきます。
→ Atomのダウンロード

2. 先ほどエクスポートしてきたファイルをまずは念のために複製してバックアップをとっておきます。

3. Atomを開き、「ファイル」→「開く」で先ほどのファイルを開きます。

4. command + F で画面下側に一括選択&一括置き換えのウィンドウが開きます。

5. 順番にタグを置き換えていきます。

search欄 replace欄
<h3 → <h2
/h3> → /h2>
<h4 → <h3
/h4> → /h3>
<h5 → <h4
/h5> → /h4>

一つずつ書いてはsearch&replaceを繰り返しましょう。この順番でやってください。

他にも直しておきたい要素があればいまのうちに直しておくと楽チンです!僕はこれ以上思い浮かばなかったので見出しタグだけ修正しました。

6. ファイルを上書き保存します。

 

WordPressの管理画面で先ほどのファイルをインポート(入力)

さあ、いよいよWordPressに記事をインポートします。これが終われば、記事はすべてWordPress内に入っていることになります。

1. WordPressの管理画面から「ツール」→「インポート」

2. Movable Type と TypePad の中の「今すぐインストール」をクリック

3. インストール完了後、「インポーターの実行」をクリック

4. 「ファイルを選択」からエディタで編集したファイルを選択して、「ファイルをアップロードしてインポート」選択

5. 投稿しゃの割り当て画面が出てくるので、現在の投稿者がはてなのアカウントになっています。それを既存のユーザーを割り当てでWordPressのアカウントを選択し「実行」

 

おめでとうございます!


これで記事の移行は完了しました。お疲れ様でした。まずは管理画面で記事が正しく移行できているか、確認してみてください。アイキャッチがない、タグがおかしい、などの細々とした問題はあるもの、基本的には終わっているはずです。お疲れ様でした。

 

ただ、画像が反映されていない!って人が多いと思います。そんな人は次の項目へどうぞ。
画像も問題ないよ!パスも大丈夫だよ!って人は一つ飛ばしてて下の方へ行ってください(まだやることがあるので終わらないように!

 

実際に移行(画像編)

画像の全移行とパスの設定を行なっていきます。基本的には行わないとならないと思いますが、僕の場合なぜか一部だけ正常にアップロードできていたので、もしかしたら問題ない人もいるかもしれません。画像が多い人は失敗すると面倒な項目なので丁寧にいきましょう!

 

はてなフォトライフに上がっていたブログの画像を全部ダウンロードする

はてなブログで使っていた画像はすべて「はてなフォトライフ」というサイトの中の自分のページに自動で保存されています。まずはそれを開きましょう
はてなフォトライフ:

ここで面倒なのが、このはてなフォトライフ、一括で画像をダウンロードする機能がないようです…。なので画像が多い人は手動でやるなんて不可能なので、「Site Sucker」というソフトをダウンロードしてきて、画像を一括でダウンロードします。最新版は有料なようで、以前ののバージョンを無料で落として使います。
Site Suckerダウンロードページへ

▼詳しく解説してくださっているサイトがあるので、やり方はこちらを参考にしてみてください
参考:Mac初心者が はてなフォトライフの画像を一括ダウンロードする方法-鯖メシ

なお、アップロードしている画像数10~30くらいと少ない人は、直接一つ一つダウンロードしていったほうが早いです。僕の場合は2000を超える画像数(ほとんど写真)だったので…流石に手動は厳しかったですね。笑

ブログ内にあげていたすべての画像のダウンロードが終わったら、わかりやすいように一つのフォルダにまとめて入れておきます。

 

画像をサーバーの設定画面かFTPソフトから入れる

次にPC内にダウンロードしてきた画像をすべてWordPressの方にアップロードしていきます。
アップロードする方法としては
①FTPソフト(FileZillaなど)からアップロード
②ブラウザ上のWordPress管理画面から直接「メディア」にアップロード
の2つがあります。僕はファイル数が多かったので①でやりましたが、②でもいけると思います。

 


まずはFileZillaダウンロード

(今回は設定方法を割愛します)
1. サーバーに接続
2. 「ブログ用に作ったフォルダ名」→「wp-content」→「uploads」→「2018(今の年号)」→「08(今の月)」とファイルを開いていきます。
3. この「08」フォルダの中にすべての画像ファイルをドラック&ドロップ


1. WordPress管理画面→「メディア」→「新規追加」
2. 画像を全部選択してドラック&ドロップ

これで、WordPress内に画像ファイルがすべてアップロードされます。

お疲れ様でした!
画像ファイルの移行もこれでおしまいです。実際に記事内に画像が表示されているか確認しましょう。

ついでに画像のURL(パス)を確認しておきましょう。
記事内の画像を右クリック→「検証」→画像のURLを確認
このURLが「〜hatena.ne.jp〜」ではなく、「〜wp-content〜」となっていればokです◎

 

実際に移行(ドメインやシステム編)

内容は移行できたので、最後にドメイン(URLの名前)を移行します。そこまで難しくはないので、説明通りにやっていきましょう!

サーバーにドメイン名を登録

まずは契約したサーバーのページに行ってドメイン名を設定してあげます。ここではロリポップを例としてあげますが、エックスサーバーでも大きくは変わりません。

サーバーのログインページ→「ドメイン設定」→「独自ドメイン設定」

こんな感じで初めにサーバーに登録したブログ用のフォルダに以前使っていた名前(独自ドメイン)をつけてあげるだけです。新しくドメインを取得した人は、先ほど決めたドメイン名です。

「自分のサーバーのアドレス/ブログ用フォルダ名」というURLに「example.com」のように好きな名前をつけてあげるだけなんです。
例)僕の場合「portfolio/pondelife」→「pondelife.com」

 

ドメインを取得したサイトでネームサーバーを登録

次にドメイン側のページに行き、「このサーバーでこのドメイン使ってますよ〜」っていう届け出を出さなくてはなりません。僕の場合ならお名前.comのサイトにいきます。

お名前.com Naviトップ→「ネームサーバー設定」→「その他」と先ほどと同じ手順を繰り返してあげます。

ややこしい設定はここでおしまいです!

 

はてなブログ側から独自ドメイン設定を消す

後は、はてなブログ側の設定で登録している独自ドメインを消します。このままだと同じドメイン名のページがインターネット上に2つになってしまうのでとてもまずいです。これはめちゃくちゃ簡単です。

はてなブログ管理画面→「設定」→「詳細設定」→独自ドメインの中に設定してあるドメイン名を消して変更を保存します。

これで設定は全部おしまいです!長かった〜〜〜。でも思ったよりも長くなかった〜〜〜〜
設定が反映さえされれば自分の独自ドメインを入力すれば、WordPressの表示画面が出てくるはずです。

※ちなみに独自ドメイン設定を消したはてなブログははてな標準のhatena.というドメインで表示されるようになります。もう公開している必要はないので、「設定」→「公開設定」→「自分だけ」に設定して保存しておきましょう。

 

反映されるまで待つ…

反映まで最大で72時間ほどかかると表示されます。人やサイトや時間によってもまちまちみたいですが、僕は1時間ほど後に無事反映されました。そこまで長くはかからないとは思います。この間暇になってしまうので、WordPressの管理画面から以下の設定を行なったり、まったりと時間を潰しましょう。

とにかく、長い戦いお疲れ様でした!これであなたもWordPressデビューです。色々な機能やテーマがありすぎて、初めのうちは戸惑うかと思いますが、自由でおしゃれなデザインとカスタマイズを楽しみましょう!

 

移行後編

移行後に一応最低限やっておいたほうがいいと思われることも紹介しておきます。ドメインの移行が反映されるのをドキドキしながら待っている間に、これくらいやっちゃってもいいかもしれませんね。

WordPressのテーマを設定する

無料も有料も数多くのテーマが出回っているので、是非調べながら自分の好みにあったテーマをダウンロードして使ってみましょう!
ちなみに僕は無料の「Cocoon」というデザイン・カスタマイズ性が高く、SEOにも強いテーマを使っています
参考:Cocoon

テーマの導入方法は簡単です。
1. 入れたいテーマのページに行く
2. ダウンロードする(子テーマがある場合はそれも。)
3. ワードプレス管理画面→「外観」→「テーマ」→「新規追加」をクリック
4. zipファイルのままダウンロードしてきたテーマファイルをアップロード
5. 親テーマを有効化、その後子テーマを有効化して設定しておくだけ!

簡単ですね。zipファイルのままあげられるというのは楽でいいですね!
自分の好みにあったテーマを選んでみましょう!

 

アイキャッチを仮に設定しておく

はてなから移行してきた段階だと、基本的には画像が記事中には入っていてもアイキャッチにはなりません。なので、ここで「Auto Post Thumbnail」というプラグインをインストールして使います。このプラグインは何かというと、記事中にある一番上に画像を自動的にアイキャッチとして設定してくれるという優れものです!
160記事も手動でやりたくない!と思う僕にうってつけ。

*注意*
このAuto Post Thumbnailなのですが、最新バージョン(3.4.1)ではjpgファイルが非対応というバグがあるので、一つ前のバージョンをブラウザ経由で落としてきてダウンロードする必要があります。

ダウンロード方法
旧バージョンダウンロード:https://downloads.wordpress.org/plugin/auto-post-thumbnail.3.4.0.zip
ダウンロードが済んだら、WordPress管理画面から「プラグイン」→「新規追加」→「プラグインのアップロード」でzipファイルのままアップロードします
プラグイン一覧の画面からか「有効化をします」

使い方
1. WordPress管理画面→「設定」→「Auto Post Thumbnail」
2.「Generate Thumbnail」をクリック
以上!簡単!
これで各記事の一番上にある画像が自動的にアイキャッチとして設定されるはずです。確認してみてください。違う画像を使いたいときは、それぞれ手動で手直ししていきましょう。

単純ですが、結構便利なプラグインなので持っていて損はないですね!

 

デザインなどの調整をする

後はもうそれぞれの記事を確認して、目次や、画像の表示、崩れている表示などを探してひとつずつ地道に手直しして行くしかありません。地道に頑張りましょう…。出来るだけ読んで欲しかったり、アクセスが多かったり、優先度が高い記事から編集していきましょう!

 

実際に移行を経験してみた感想

さて、ここまで本当にお疲れ様でした。
導入にも書いたのですが、実際に移行してみて思ったのは

自動化できる部分が多くて、思っていたよりは楽だった。

ということです。プラグインをはじめとする様々なツールがあって、それらを使ってなんとか手動でやることを極限まで減らすことができました。初めて扱うツールの導入と操作が苦でなければ、比較的楽な作業になっているのかな?とすら思いました。

また、多くのブロガーさんが移行方法をまとめてくださっているからこそ、道しるべがあって作業できたというのもありますね。感謝です…!!そして僕のこの記事もだれかの役に立って入ればいいなあ、と思っています。

なので実際、
巷で噂されているほど、はてなブログからWordPressの移行はめんどくさくないよ!
っていう自分なりの結論です。サーバーとドメインのことをイマイチ理解できていない人はややこしくて頭がこんがらがるかもしれませんが…

 

改めて今回の移行作業で紹介したおすすめサーバーとツール

<必須>
◯サーバー
→ エックスサーバー


→ ロリポップ!

◯ドメイン
お名前.com


<おすすめ>
◯プラグイン
Auto Post Thumbnail

◯ソフト
Atom

先にまとめてインストールしてしまった方が効率的かもしれませんね!少なくともサーバーとドメインはどのみち必要になってくるので必ず契約しましょう。

 

まとめ

さて今回は、はてなブログからWordPressの移行方法を全部まとめて紹介しました。
ずっと恐れていてやらなかったWordPressへの移行ですが、実際にやってみると結構普通にできたので、何事もやってみるものだなぁ…としみじみ感じています。

実際移行してみて使っている感じとしては、WordPressめっちゃおしゃれでかっこいい!!!!!全然使いこなせないけど!それでもサイトがおしゃれになった!
なので移行を迷っている人には本当におすすめできます

 

ブログ関係
この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
あつきをフォローする
ぽんでらいふ
タイトルとURLをコピーしました