MENU
マドの画像
マド
家ブロガー
おうち大好き!間取り大好き!
建売でも住みやすくて楽ちんおうちを目指すフルタイムワーママ

はてなブログからワードプレスへ | サイトお引越し手順や事前にしておくと良いこと

2020 4/09
はてなブログからワードプレスへ | サイトお引越し手順や事前にしておくと良いこと

はてなブログを始めて1年のタイミングでワードプレスへ引っ越しをしました。

マドのアイコン画像マド

このサイトはすでにワードプレスで、SWELLという有料テーマを利用して作成しています。

私はワードプレスへの引っ越しをする前、すでに別のサイトでワードプレスを利用していました。

なので、サーバーの契約は済んでいたし、ワードプレスの使い方などはある程度分かったところからスタートしています。

ただ、サイトの引っ越し自体は初めてなので、実際に移行してみて参考になったことや、『これは事前にやっておいた方がいい』と思ったことなどをまとめたいと思います。

この記事でわかるのはこんなこと
  • はてなブログ→ワードプレスへ引っ越しの手順
  • 事前にやっておくべきこと、やっておくと良いこと
  • すでにサーバーを契約している場合のサイトの追加方法
  • 当ブログのお引っ越しに際して参考にしたサイト一覧
  • はてな→ワードプレスお引越し経験者の体験記事
  • 当ブログも使っているワードプレステーマ『SWELL』の特徴
目次

はてなブログからワードプレスへのお引越し手順

まず、はてなブログからワードプレスへのお引越し手順についてですが、こちらのサイトを参考にしながら行いました。

画像がたくさんでとても分かりやすかったです。

ただし、こちらの記事はワードプレスを初めて利用する方向けに書かれているので、私のようにワードプレスで別サイトを持っている方は一部流れが異なるところもあります。

移行までの流れは下記のとおり。

はてなからワードプレスへの移行手順
  1. サーバーの契約(済の場合はサイトの追加)
  2. サーバーにワードプレスをインストール
  3. 使用するテーマのインストール
  4. はてなから記事データをエクスポート
  5. 記事データの修正
  6. はてなフォトライフから画像取り出し
  7. 独自ドメインのネームサーバー変更
  8. 記事データをワードプレスにインポート
  9. 記事のリライトで整える
  10. (外観のカスタマイズ)

けっこう大変そうにみえますが、実際に自分で移行してみて、本当に大変だったのはとにかく『9. 記事のリライト』です(笑)

マドのアイコン画像マド

移行してから半月以上経った今もまだ終わってません。

移行まではしっかり順を追って行えばそれほど難しいことはありませんでした。

詳しい移行手順は先程ご紹介したサイトに分かりやすく書いてあるので、ここではポイントだけ抜き出して詳しく説明していきたいと思います。

すでにサーバー契約済みの場合のサイト追加方法

すでにサーバーを契約して別サイトを運営している場合は、そのサーバーにサイトを追加します。

私が利用しているのはエックスサーバーなので、ここではエックスサーバーのサイト追加方法を説明します。

エックスサーバー

4/30までに新規にエックスサーバーを申し込むと独自ドメインが無料。さらに更新料もずっと無料のキャンペーンしています。(他社からの移管もOK)

エックスサーバーは1つの契約で、複数の独自ドメインを運用できます。

サイトの追加方法

追加方法はとても簡単。

STEP
Xserverアカウント(旧インフォパネル)にログイン
STEP
サーバー管理をクリック
STEP
ドメイン設定をクリック
STEP
独自ドメインを追加する

反映には少しかかると思います。

そのあとは、追加した独自ドメインを指定して、ワードプレスをインストールします。

ここまでの手順を踏んでも、独自ドメインのネームサーバーをエックスサーバーに切り替えるまでは、サイトは切り替わりません。

逆を言うと、ネームサーバーを切り替えるとワードプレスの方に切り替わってしまうので、ネームサーバーの設定は『切り替わってもいい!もうはてなとバイバイでいい!』と思えるタイミングで行いましょう(笑)

じゃないとはてなブログと突然のお別れになりますのでお気をつけて。

リライトを楽にする記事データの事前修正ポイント3つ

はてなブログから記事データをエクスポートしたあと、ワードプレスにインポートする前に修正しておいた方が良いことがいろいろあります。

その修正ポイントを3つご紹介します。

見出しをh3からh2へ

はてなブログではなぜか大見出しがh2ではなく『h3』になっていることは有名な話ですよね。

これをインポートする前に一括で置換しておくと後が楽なので、必ずしておくと良いと思います。

  • <h3>→<h2>, </h3>→</h2>
  • <h4>→<h3>, </h4>→</h3>
  • <h5>→<h4>, </h5>→</h4>

エクスポートした記事はテキスト形式で掃き出されるので、ヘッダーメニューの『編集』から『置換』をクリックして、一括で置き換えます。(Windowsの場合)

[:contents]を削除する

はてなブログでは[:contents]というコードを入れることで目次を挿入していますよね。

テーマにもよると思いますが、SWELLでは『h2』直前に自動で目次が挿入されるので、[:contents]を残しておくと目次が重複してしまうんです。

使用するテーマに目次の自動挿入機能がある場合は、[:contents]は事前に一括で削除しておくと楽です。

マドのアイコン画像マド

私はこれをやっていなかったので、記事リライト時にちまちまと削除し続けてます…笑

有名なテーマならググれば出てくると思うので確認をおすすめします。

吹き出しのhtmlを削除する

はてなでは吹き出しをつける機能がないので、みなさんCSSとhtmlで挿入していたと思います。

ただ、ワードプレスでは大体のテーマに吹き出しを簡単に挿入する機能が備わっていると思います。

そちらで設定・挿入し直しをしたかったので、私は吹き出しのhtmlは事前に全て削除しました。

マドのアイコン画像マド

吹き出しにしていた部分が普通の文章に戻った状態で、リライト時に挿入しなおしました。

そのまま手直しをしたくないという場合は、おそらくですがはてなの吹き出しCSSをコピーして、ワードプレスのCSS書き込み箇所にペーストすればいけるかな?

記事に使っている画像だけをはてなフォトライフから取り出す方法

次に、はてなブログで使用していた画像を取り出す方法について。

下記の記事を参考にして、はてなフォトライフから記事に使用している画像のみ一括で取り出すことに成功しました。

エクスポートした記事データをインポートすれば、見かけ上は画像は問題なく表示されるのですが、それだと画像のURLがはてなフォトライフを参照したままなんです。

なので、一度はてなフォトライフから画像を取り出して、ワードプレスのメディアに落としてから貼り直す作業を行います。

マドのアイコン画像マド

はてなフォトライフでは一括ダウンロード機能がないので、画像が多い方はこの方法おすすめします。


成功・失敗は先人に聞け!はてな→ワードプレス引越し経験談まとめ

最近はてなブロガー仲間が続々とワードプレスへ移行していまして。

そのことを書いた記事がで、これから移行を考えている人に役立つと思いますのでここでご紹介したいと思います。

マドのアイコン画像マド

何で失敗したのか?どんなことをしておいてよかったのか?事前に知っているのと知らないのとでは大違い。

参考になるなぁと思ったお引越し体験談は、随時追加していきたいと思います。

たよらこさんの体験記事

たよらこさんは複数サイトを運営していて、すでにお引越しの経験者。もはやベテラン。

記事をインポートしたあとにするべきことをリストアップしてくれているので、チェックしてみて。

マドのアイコン画像マド

たよらこさんのサイトテーマはAffinger5

くうかさんの体験記事

くうかさんも当ブログとおなじテーマ、SWELLを使っています。シンプルで見やすい素敵なサイトです。

なんと270記事もあったのだとか…!

マドのアイコン画像マド

でも楽しんでリライト作業を進めているのだそう。私もがんばろう。

どんなつまづきポイントがあったのか、ぜひ読んでみてください。

当ブログで使用しているテーマ『SWELL』をおすすめする理由

最後に、当ブログでも使用しているワードプレステーマ『SWELL』についてご紹介したいと思います。

このテーマの凄いところはとにかくたくさんあるのですが、まずお伝えしたいのが開発者である了さんのこと。

テーマに対する熱意、フレンドリーなお人柄、そしてユーザーの声をくみ取り進化させていく姿勢が本当に素晴らしいのです。

それが『アップデート頻度の多さ』にも現れています。

新しい機能の実装、細かな修正、ワードプレスアップデートへの対応などで、常にユーザーにとって最高の環境を提供してくださいます。

また、利用者専用のフォーラムでは、バグや不具合の問い合わせに対する回答や、要望の受付などもしています。

マドのアイコン画像マド

私もまだまだワードプレス初心者なので、わからないことはフォーラムを通して質問させてもらっています

さらに、LINEオープンチャットの『SWELL研究会』では、なんとご本人がオプチャに参加されています。

開発者がこれほどユーザーと近い方って他にいないんじゃないかと思う。

そんな了さんから生み出されたテーマ自体ももちろん優秀!

SWELLの優れた特徴
  • グーテンベルク完全対応
  • カスタマイズのしやすさ
  • どんどん追加される新機能
  • サイトスピードの速さ
  • トップページのサイト化
  • アフィリエイトプログラム
  • ad.txtの簡単挿入
  • デモサイトのカスタマイズ簡単引き継ぎ

などなど、まさに痒いところに手が届くテーマです。

すこし機能を紹介すると、たとえばトップページのサイト化のための機能として、固定ページをトップページにできるのはもちろん

こんなこともできます

こんなフルワイドブロックに任意のウィジェットを埋め込んだりできます。背景・透過設定によっては、ヘッダーと一体化させることができます。

SWELLのトップページかっこいい…

さらに任意のカテゴリーやタグを指定して表示させる『記事スライダー』や『ピックアップバナー』といったエリアもあり、トップページはかなりカスタマイズしやすいです。

あとは、個人的にすごく嬉しかったのが、デモサイトのカスタマイズをほぼそのまま自分のサイトに着せ替えられること。

マドのアイコン画像マド

ちなみにこのブログは、SWELLで公開しているデモサイト01の着せ替えがベースです。

センスあるデモサイトは現在6種類

4/18まで、新年度応援セールで20%オフで購入できるそうです。

SWELLいい!という声が続々届いていて、いつか必ずランキング入りすると信じております。

気になった方はぜひ下記のサイトをチェックしてみてくださいね。

おすすめのワードプレステーマ『SWELL」

シンプル美と機能性を両立させた、国内最高峰のWordPressテーマ『SWELL』
目次
閉じる