livedoor BlogからのWordPress移行手順。ロリポップとお名前.com取得の独自ドメイン使用

こんにちは、社畜ブロガーのはっしーです。

livedoor Blogでスタートしたこのブログですが、約一年半ほど運営したので、WordPressに引っ越ししました。Macで引越し作業をした内容について、一連の流れをメモがてら残しておきたいと思います。

特に、Macユーザーにとっては画像データの引っ越しが大変すぎると言われていますが、SiteSuckerというアプリでこの問題をうまく解決できているので、特にMacユーザーにはかなり参考になる内容になっています。

とりあえずこの記事の通りに作業をすれば、livedoor BlogからWordPressへの移行はサクッと一日で終わっちゃいますよ！

livedoor Blogからデータのバックアップを取る

「バックアップ」と聞くとあまりよくイメージできないかもしれないですが、要するに、これまでlivedoor Blogにアップしてきた記事や画像などのデータをすべてダウンロードするっていうことです。

一言でいうと、「引越し作業」というのはlivedoor Blogから文字データと画像データをダウンロードして、それをWordPressの方にアップロードし直すっていう内容になるんですね。

文字データ（記事）のバックアップを取る

livedoor Blogの管理画面を開いて、次の手順に従います。

1. 「ブログ設定」＞「バックアップ（エクスポート）」を開きます。
2. 以下のように設定し、ブログのデータを書き出します。
   
   • フォーマット：MT形式
   • カテゴリ：すべてのカテゴリ
   • 期間：すべての期間
   • コメント/TB：任意
   • 記事：任意
   • 改行：改行をそのまま出力
3. 「backup.txt」というファイルがダウンロードできるので、それをデスクトップなどどこか適当な場所に保存しておきます。「backup.txt」には記事に関する画像以外のテキストデータがすべて入っています。

画像データのバックアップを取る

画像データは「backup.txt」に一切含まれていないため、別途画像データをダウンロードするための作業が必要になります。

画像データの一括ダウンロードのツールは「GetHTMLW」というアプリケーションを使用するのが王道なのですが、これ実はWindows専用です。

Windowsの方は「GetHTMLW」をダウンロードしましょう。手順はこちらのサイトなど参考になります。

Macの方はSiteSuckerというMacアプリを使用します。

ただ、この「SiteSucker」、ネット上での評判がかなり悪く、「全然画像データがダウンロードできない」みたいな情報ばかり。逆に「SiteSucker」で画像データの一括ダウンロードが成功したみたいな記事が全然ないんです。

実はこのSiteSuckerというアプリは世界中で使われているもので、海外サイトには普通に情報たくさんあります。ということで、今回は以下の記事に従ってみました。そして、無事Macで画像データの一括ダウンロードに成功したのです。

とりあえずSiteSuckerのアプリをダウンロードします。普通にMac AppStoreで買ってもいいのですが600円かかるので、最新版ではないひとつ古いバージョン（無料）を専用サイトからダウンロードします。

というわけで、SiteSucker専用サイトにアクセスして、以下手順でアプリをダウンロード、起動します。

1. SiteSucker for macOSをクリックする。
2. 見出し「Getting SiteSucker」からひとつ前のバージョンをダウンロードする。
   
3. Finderの「ダウンロード」で「SiteSucker_2.4.6.dmg」をクリックする。
4. SiteSuckerのアイコンをクリックする。

SiteSuckerが起動できたら、次はいよいよ画像データを一括ダウンロードします。手順は以下の通り。

1. Web URLのところに自分のブログURLを入力する。
2. Settingsアイコンをクリックする。
3. Generalタブで、Path Constraintを「Paths Settings」に変更する。
4. File Typesタブで、フィルターを「Allow Specified File Types」に変更。Imagesのみにチェックを入れる。
5. Pathsタブで、テキストボックス内にブログURLと、livedoor Blogの画像パスを入力する。画像パスは必ず「http://livedoor.blogimg.jp/アカウント名/imgs」の形式になっています。
   
6. OKボタンをクリックする。
7. Downloadアイコンをクリックして、画像を一括ダウンロードする。
8. livedoor.blogimg.jpというフォルダがダウンロードされたことを確認する。

ここでポイントになるのは、上記手順５で、PathsタブにURLを２つ入力するところです。livedoor Blogの画像パスだけ入れて自分のブログURLを入れ忘れると、なぜか画像が25枚くらいしかダウンロードできずに終わるので注意です。

画像の一括ダウンロードは意外と時間もかからず、数10分くらいで終わります。

実際必要になるのはlivedoor.blogimg.jpフォルダの中にあるimgsフォルダのみなので、ここにあるんだということをしっかり覚えておくようにしましょう。

独自ドメインを準備する

WordPressでは必ず独自ドメインが必要になります。

独自ドメインとはブログURLの「http://」の後に続く部分のことで、うちのブログURLだと、「hashimototsutomu.com」にあたる部分のことを指します。

livedoor Blogですでに独自ドメインを使っている場合は、それをそのまま使います。

まだ独自ドメインを取得していない場合は、「blog.livedoor.jp/アカウント名/」みたいなlivedoor Blogで用意されたドメインになっているので、まずは適当なドメイン登録サービスを選んで独自ドメインを取得しましょう。

ちなみに、ぼくが独自ドメインを取得したときは国内最大手のお名前.comを使いました。初心者はとりあえずここ使っておけば間違いないです。

レンタルサーバーを契約する

独自ドメインと並んで、WordPressで必ず必要になるもうひとつのものがレンタルサーバーです。

ぼくはロリポップ！でレンタルサーバーを借りました。

プランは「スタンダードプラン」です。

最近は「エックスサーバー」が流行ってて、機能が抜群とか、安心とかってことで、いろんなサイトやブログでおすすめされています。

でも、エックスサーバー高いんだよなぁ……。ロリポップ！あたりでも大丈夫かなぁ……？

別にサイトがサクサク動いてくれればぼくとしてはOKなので、ロリポップ！のスタンダードプランにしたのですが、月間15,000PVくらいだと全然十分すぎますね。普通にサックサク！

ロリポップ！は国内最大手のひとつなので、普通に問題ないです。ネット上ではロリポップ！は微妙みたいな言われ方もときどきされてますが、全然大丈夫でした。ネット上の情報を何でも鵜呑みにしてはいけませんね。

ということで、初心者だけど大手の安心できるレンタルサーバーを使いたい。でも、料金はなるべくかけたくない。そんな人はロリポップ！にしとけば大丈夫。

ただし、安いエコノミープランとかライトプランとかではなくて、スタンダードプランくらいにしとくのがおすすめ。まずは半年くらいで借りてみるのが良いかと。

レンタルサーバーで独自ドメインを設定する

ドメイン登録サービス側（お名前.com）での設定とレンタルサーバー側（ロリポップ！）での設定があります。

お名前.comでの設定

1. お名前.comにログインする。
2. グローバルメニューの「ドメイン設定」＞「ネームサーバーの変更」をクリックする。
3. 表示された独自ドメインにチェックを入れる。
4. 「他のネームサーバーを利用」タブを開く。
5. プライマリネームサーバー：uns01.lolipop.jp
6. セカンダリネームサーバー：uns02.lolipop.jp
7. 確認、設定する。

ロリポップ！での設定

1. ロリポップ！のユーザー専用ページにログインする。
2. 「独自ドメインを設定する」をクリックする。
3. 「設定する独自ドメイン」にお名前.comで取得した独自ドメインを入力する。
4. 「公開（アップロード）フォルダ」もお名前.comで取得した独自ドメインの入力でOKです。

レンタルサーバーにWordPressをインストールする

ロリポップ！のユーザー専用ページにログインすると、「簡単インストール」という機能が用意されているので、こちらを活用すると簡単にWordPressがインストールできます。

1. トップページの「WordPressをインストール」またはサイドカラムの「サイト作成ツール」＞「WordPress簡単インストール」をクリックする。
2. 「WordPressの設定」で、サイト名、ユーザー名、パスワード、メールアドレスを任意で入力し、内容を確認する。
3. 内容確認画面でインストールボタンをクリックする。

これでWordPressの簡単インスールが完了し、いよいよWordPressの画面に入ることができます。

WordPress管理者ページURLはお気に入り、ブックマークなどしておくことをおすすめします。

パーマリンクの形式を設定する

WordPressの管理画面に入れたら、まずはパーマリンクの形式を設定します。ここでいう「パーマリンク」とは、要するに、自分の記事のURLのことを指しています。

【全国版】コールセンターの求人探しにおすすめな派遣会社まとめ

2017.08.13

例えば、こちらの記事のURLは

https://hashimototsutomu.com/archives/14497744.html

というような形式になっています。livedoor Blogのときはハイライト部分のようなURL形式になっていたんですね。

WordPressでも同じ形式に合わせたい場合は、以下の手順で設定すればバッチリです。

1. WordPress管理画面で「設定」 > 「パーマリンク設定」をクリックする。
2. カスタム構造のラジオボタンにチェックを入れる。
3. カスタム構造のところのテキストボックスに/archives/%postname%.htmlと入れる。
4. 変更を保存する

これでパーマリンクの形式がこれまでのlivedoor Blogのものと共通になりました。

ちなみに、%postname%というのは記事タイトルのことです。

このように、記事タイトルに設定したものがそのままURLの%postname%のところに自動挿入されるようになります。

livedoor BlogからWordPressに引っ越すときには、なぜかlivedoor Blogでの記事IDが%postname%として引き継がれるようになっているので、このようなやり方が通ってるってわけです。

ただし、このやり方でパーマリンク設定した場合は、今後新規記事を書くときに毎回記事タイトルがそのままURLに入ってしまうので、それが嫌な場合はすぐ隣にある編集ボタンを押して、記事URLを手作業で修正しなければいけません。

一意の英数字にする必要があるので、イチイチ考えるのが面倒だったら「20171002」みたいに、記事を書いた年月日にするのがおすすめ。

デザインを変更する

これがブログをWordPressにすることの醍醐味。WordPressには有料、無料の「テーマ」が豊富に用意されていて、選んだテーマによってブログデザインを好みに変更することができます。

livedoor Blogで何が一番不満だったかというと、ぼく的には、スマホサイトが全くカスタマイズできないことでした。

アクセスの７割くらいはスマホからなのに、スマホサイトがカスタマイズできないなんて……最低ですよね。

なので、WordPressに引っ越すことによって、スマホサイトの見やすさ、デザインをもっと良くしたいっていうのがぼくの一番のねらいでした。

でも、そうは言ってもぶっちゃけスマホサイトのカスタマイズをするためにコードをいろいろ打っていくという面倒はかけたくありません。そんなセンスも技術もないしね。

というわけで、ぼくが選んだのはWordPressテーマ「ストーク」です。

この「ストーク」の一番の売り文句は「モバイルファースト」。スマホサイトの見やすさに徹底的にこだわって作られています。

実際、カスタマイズしなくてもそのまま使って全然問題ないレベルにデザインが仕上がっています。

有名どころのブロガーも結構な確率で使用しているテーマなので、安心感がありますね。

livedoor BlogからのバックアップファイルをWordPressにインポートする

これまでの手順でlivedoor Blogの管理画面からエクスポートした記事データや、SiteSuckerで一括ダウンロードした画像データをWordPressにインポートします。

記事をWordPressにインポートする

ここでいう記事データは、livedoor Blogの管理画面からエクスポートしたファイル（backup.txt）のことを指しています。

ただし、ここで注意しなければならない点は、記事データ内に含まれている画像URLをすべてWordPress仕様に変更しなければなりません。

livedoor Blogの画像URLは「http://livedoor.blogimg.jp/アカウント名/imgs/x/x/xxxxxxxx」という形式になっていました。

「imgs」以下は共通となっているので、画像URLをWordPress仕様に変えるということは、「imgs」より前の部分を全部入れ替える（置換）必要があるということになります。

WordPressの画像URLは「http://独自ドメイン名/wp-content/uploads/imgs/x/x/xxxxxxxxx」が基本となるため、下記の通りに一括置換して、ファイルを上書き保存します。

置換前：http://livedoor.blogimg.jp/アカウント名/imgs

置換後：http://独自ドメイン名/wp-content/uploads/imgs

なお、Macの場合の一括置換ですが、backup.txtはMacにデフォルトで入っているテキストエディット（Windowsでいうメモ帳）で開かさります。Ctrl+Fを押して、ウィンドウ右端にある「置き換え」にチェックをしてください。置換ができるようになっています。

ここまで来たら、いよいよ、記事データをWordPressにインポートします。

1. WordPress管理画面で「ツール」＞「インポート」をクリックする。
2. 「Movable Type と TypePad」にある「インポーターの実行」をクリックする。
3. 「ファイルを選択」から先ほど保存した「backup.txt」を選択する。
4. ファイルをアップロードしてインポートする。

画像をWordPressにインポートする

SiteSuckerで一括ダウンロードした画像を、今度はレンタルサーバーにまとめてアップロードします。

画像の一括アップロードはFTPソフトというものを使う必要があります。MacならFileZillaという無料のFTPソフトが王道です。 WindowsならFFFTPですかね。

FTPソフトをインストールしたらアプリケーションを起動します。画面上部のホスト、ユーザー名、パスワード欄を入力して「クイック接続」します。

ホスト、ユーザー名、パスワードには借りてるレンタルサーバーの情報を入力。

ロリポップ！の場合は、アカウント情報の画面にアクセスし、サーバー情報のエリアにある下記情報を使って、FileZillaの設定をしていきます。

クイック接続できたら、画面の中段あたりを操作して、画像ファイルをアップロードします。

ここで必要になるのが、序盤の「画像データのバックアップを取る」のステップでゲットした画像フォルダ。

SiteSuckerを使ってダウンロードした「livedoor.blogimg.jp」フォルダの中にある、「imgs」フォルダでしたね。

画像の通り、左半分はローカル環境（自分のパソコンの中）を、右半分はレンタルサーバー（ロリポップ！）側の状況が反映されています。

1. 画面の左半分で「livedoor.blogimg.jp」フォルダ > 「アカウント名」フォルダを選択する。すると、画面下に「アカウント名」フォルダの中に入っているコンテンツが一覧で表示される。「imgs」フォルダもここに入っている。
2. 画面の右半分で「wp-content」フォルダ > 「uploads」フォルダを選択する。WordPressで画像の格納場所といえばここ。
3. 画面左の「imgs」フォルダを画面右側の「uploads」フォルダ直下にドラッグ＆ドロップする。

これで、すべての画像ファイルをlivedoor BlogからWordPress用に契約したレンタルサーバー（ロリポップ！）に引っ越しができました。

アイキャッチ画像を設定する

晴れて記事の引っ越しはできたものの、よく見てみると、アイキャッチ画像の設定まではうまく移行できていないんですね。

アイキャッチ画像は大切だけど、全記事をひとつひとつアナログ的に見ていくのも面倒なので、何かいいプラグインでもないかなぁと思っていたところで見つけたのがAuto Post Thumbnailというプラグイン。

記事の一番上にある画像をアイキャッチ画像として自動生成してくれる便利機能です。

ただ、問題があることに気づいて、結局自分の手でひとつひとつアイキャッチ画像を設定していくハメになりました。

たしかに記事の一番上にある画像をアイキャッチ画像として自動生成してくれるのですが、個別記事ページを見てみると同じ画像が２つ縦に並んでいてとてもウザい！

アイキャッチ画像が生成されたなら、一番上の画像は削除してほしかったのだけど……。

あと、自動生成も１００％成功するわけでもないようで、普通にうまくいってない記事も結構ありました。

なので、こればかりは手作業でコツコツ設定し直しになってしまいました。

記事編集中にプレビューをリアルタイムで反映させる

さて、ここからは、WordPressを便利に使うためのちょっとしたTipsを紹介します。

デフォルトでは、記事を作成する際に、編集画面とプレビュー画面は別々になっています。

書きながら「PCやスマホではどんな感じで見れてるんだろう？」と思うことは多々あると思いますが、その都度プレビューボタンを押して、別画面でプレビューを確認するのは面倒。

そこで便利なのが、Inline Previewというプラグイン。

このプラグインを有効化した上で記事編集画面のプレビューボタンを押すと、左側にテキストエディター、右側にプレビューが表示されます。

テキストエディターで記事を編集すると、勝手にリアルタイムでプレビューに反映していくので、見え方チェックをするのが格段に楽チンになります。

テキストエディターとプレビューの画面の幅を自由に変えることができるので、PCやスマホ、タブレットなど、それぞれに応じたチェックができるようになっています。

プレビューの幅を小さくすると、スマホを想定したプレビューに。

プレビューの幅を大きくすると、PC画面を想定したプレビューに。一定以上に幅を広げると、PC画面と同じようにサイドカラムも表示されます。

目次を作る

最近は記事の書き始めのところに、目次をつけているブログが増えてますよね。

ぼくもWordPressにしてからは目次を付けるようにしています。

これはどうすれば付けることができるのかというと、実はTable of Contents Plusというプラグインを使うことで簡単に設置することができます。

最初に設定さえしてしまえば、あとは記事を書くたびに何かをする必要はまったくなくて、H2タグとかH3タグとかの見出しを勝手に識別して目次を自動生成してくれるので、すごく便利。

livedoor Blogにはなかった機能だし、目次があるだけで多少はブログがしっかり見えるので、非常におすすめ。

ショートコードを設定する

テキストエディターで記事を書いているときに、いろいろな文字の装飾をすることができます。

文字を太字にしたり

色を変えたり

蛍光ペン風にしたり

サイズを変えたり

文字を装飾したいときって多々あるけれど、デフォルトのテキストエディターではイチイチ操作が面倒。

でも、一瞬で簡単に上記のような装飾ができてしまうやり方があります。

こちらのサイトに詳しく説明が載っているので、気になる方は参考にすると良いです。

まとめ

というわけで、livedoor BlogからのWordPress移行手順をまとめました。

Macユーザーにとって画像の引っ越しは鬼門なので、Sitesuckerの使い方が一番参考になるのかなと。

livedoor BlogでWordPress移行を考えている方の参考になれば嬉しいです！