はてなブログからWordPressへ移行!手順・方法まとめ

このブログ「ネットタイガー」を3年ちょっと「はてなブログ」で運営していましたが、2016年11月にレンタルサーバー+Wordpressへ移行しました。

理由をかんたんに書くと「はてなブログでブログを書き続ける必要性がなくなった」から(戦略上のミスもあり)。はてなブログPRO(有料プラン)の更新日を前にエックスサーバとWordpressに引っ越しをしました。以下、移転の方法、やったことをまとめておきます。

なお、今まで「はてなブログ」で交流いただいた皆様へ。本当にありがとうございました。はてなのIDは消したわけではないので、またどこかでお目にかかることがあるやもしれません。その時はよろしくお願いいたします。

スポンサーリンク
スポンサーリンク

移転した状況

それでははてなブログからWordpressへの具体的な移転手順です。

まずは私の状況・環境。

  • はてなブログは有料プランで独自ドメイン運営
  • ドメインはバリュードメインで運用
  • レンタルサーバはエックスサーバー(X10プラン)
  • ブログのページ数は300強。

です。

またこれまでに検索エンジンにインデックスされたURLを飛ばさないよう、はてなブログとWordpressでURL構造を変えないようにします。

注意事項

はてなブログから別サービスへ移行すると、今までに付いた「はてなブックマーク」が無くなります。ドメインの変更がなくても無くなります。ブックマーク大事!な方はよく考えて移行することをオススメします。なおFacebookのシェアやPocketの数などは維持されるようです。

記事のエクスポート

はてなブログから記事をエクスポートします。管理画面の左メニュー「設定」→から「詳細設定」(上に3つならんでいるリンクの真ん中)をクリック。下の方にある「エクスポート」項目内にある「記事のバックアップと製本サービス」をクリック。エクスポートしたデータをPCの任意の場所に保存します。

レンタルサーバと契約

移転先のレンタルサーバと契約します。私は以前に使ったことのある「エックスサーバー」のX10プランを契約しています。1年払いならば月額1,080円で運用できるので、はてなブログProとそこまで金額に差がありません。

月額900円(税抜)から、高速・多機能・高安定レンタルサーバー『エックスサーバー』

実は以前にも別ブログでエックスサーバーを利用したことがあるのですが、お値段以上の安定感・安心感があります。お試しでもう少しランクの落ちるレンタルサーバを使ったこともあるのですが、ページの読み込みに若干引っかかりを感じました。エックスサーバーではそんな問題もなく、安心して使えています。Wordpressの自動インストールができるのも便利。

なおエックスサーバーの運営はGMOですが、他にもより高機能なエックスサーバーの上位サービス「X2」、Wordpressの運用に特化した「wpX」も同社からサービス提供されています。

大容量無制限レンタルサーバー【X2】利用者のみドメインが激安

WordPressの運用に特化したレンタルサーバー『wpXレンタルサーバー』

また、GMOペパボからは「ヘテムル」という、これまたWordpressが簡単にインストールできるレンタルサーバーサービスが提供されています。

・WordPressが簡単・すぐに使える『レンタルサーバーheteml(ヘテムル)

個人的にはレンタルサーバ・Wordpress初心者だったり、ブログへのアクセスがそこそこという方はエックスサーバーで必要十分だと思います。レンタルサーバをWordpress利用でしか使わない!という方はwpXでもいいかもしれませんね。ブログ運営でやりたいことに合わせて選ぶと良いでしょう。

ドメインの設定

エックスサーバーにドメインを登録します。サーバーパネルへログインし、「ドメイン設定」から「ドメインの追加設定」へ移動。このブログのドメイン「net-tiger.net」を追加します。

バリュードメインの管理画面からドメイン「net-tiger.net」のネームサーバを変更します。「net-tiger.net」にアクセスがあった時の移動先をはてなブログからエックスサーバーにする作業です。「net-tiger.net」のネームサーバ設定を「ネームサーバーの設定」を参考に設定します。

WordPressのインストール

ドメイン設定が完了したらエックスサーバーにWordpressをインストールしておきます。エックスサーバーはWordpressを管理画面から自動インストールできるので、「www.net-tiger.net」を設定してインストール。移転前はドメインの前が「www」だったので、それを継続して使用します。

インストールが完了したら管理画面へ!と言いたいところですが、ネームサーバの変更がネットに浸透していないうちははてなブログへ移動してしまいます。何度かアクセスしてWordpressの管理画面に変わったらOK。私の場合は1時間ほどで管理画面が表示されました。なおこれでこれまで見えていたブログが「Not Found」状態に。せっかくのアクセスを無駄にしないためにも、最低限の移行を手早く終える必要があります。

パーマリンク形式を設定

私の場合、はてなブログでのパーマリンク形式はデフォルトの

/entry/2016/11/03/133641

といった形だったため、これを移転先でも維持できるように設定します。

WordPress左メニューの「設定」から「パーマリンク設定」を選択。「カスタム構造」に

/entry/%year%/%monthnum%/%day%/%postname%

と入力し、設定を保存。

ブログデータをインポート

エクスポートしておいたデータをインポートします。

WordPress管理画面の左メニュー「ツール」から「インポート」を選択。「Movable TypeとType pad」をクリックすると移行ツールのインストールが始まるのでしばらく待機。完了したら保存しておいたブログデータを選択してインポート。

これでブログデータの移行は完了!とは残念ながらなりません。むしろ地獄の釜を開いてしまったと言えましょう(笑)。インポートしたデータのURLは下記のようになるはずです。

/entry/2016/11/03/20161103133641

正しくは

/entry/2016/11/03/133641

のようにしたいので、赤字の部分8文字が余計ですね。これをブログ記事を一つひとつ開いて、最後のスラッシュの直後にある8文字分を削除していきます。

こういうのってひょっとしたらデータベースを操作したら簡単にできるのかもしれませんが、私は知識が無いので手作業で行いました…。まあついでに不要記事の整理もできる、と思って前向きに捉えましょう。

はてなブログをクローズ

念のため、はてなブログの設定画面から独自ドメインの設定を解除しておきます。そうするとはてなブログのURLが基本形式「○○○.hatenablog.jp」に戻ります。このままではWordpressの独自ドメインとはてなドメインの2つで同じ内容が公開されていることになるので、はてなブログの公開設定を「自分のみ」に変更して限定公開にします。

基本は完了

以上で「ページが表示される最低限の作業」は完了です。既存のURLにアクセスすると、Wordpressのページが表示されているでしょう。URLの変更は手間ですが、終わってみるとなんてことはない(はず)。別サービス上でこれまで作り上げたブログが稼働していると思うと少しうれしいものがあります。

体裁を整える

とはいえ見苦しい部分もたくさん残っているので、ユーザーの利便性を損なわないように体裁を整えていきます。

ヨメレバ・カエレバのCSSを設定

Amazonアソシエイトなどでヨメレバカエレバを利用している方も多いかと思います。Wordpress上でレイアウトがくずれる場合はCSSを修正しましょう。

STINGER5や他のテーマでヨメレバ・カエレバを綺麗に貼るCSSカスタマイズはありましたが、Simplicityは中々見当たらなかったので、記事にまとめようと思います。CSSを読める人は自分でガリガリ書いて貰えば良いと思いますが、書けない

私はこちらのブログを参考にCSSを修正しました。もともと「amazlet風-2(cssカスタマイズ用)」を選択していたのでコピペのみで修正完了!

ただヨメレバに最近追加された「楽天kobo」用の設定は無いようだったので、それ用のスタイル「.shoplinkrakukobo」をPC・モバイルとも追加しました。

はてな独自のAmazonリンクを修正

はてなブログで記事作成時にツールから挿入できるAmazonアソシエイトのリンクは

hatena-amazon

こんな感じで表示されてしまいます。これは手動で置き換えるしかないですね。私はプラグイン「AmazonJS」を導入してリンクを置き換えました。はてなブログで設置したAmazonアソシエイトを削除し、AmazonJSで新たに設置します。

hatena-amazon2

修正後はこんな感じ。キレイになりました。ただしこのプラグインを使うためにはAmazon Product Advertising API用のアカウントを取得しておく必要がありますのでご注意を。

アイキャッチ画像を設定

WordPressでは記事一覧などで記事毎に設定されたアイキャッチ画像が表示されますが、ブログデータをインポートしたての時点ではアイキャッチが設定されていません。アイキャッチ画像はメディアライブラリから選びますが、外部サービス上にある画像は指定できません。はてなフォトライフ上にある画像を自サーバに持ってくるのも少し時間がかかります。

というわけで取り急ぎの対策としてプラグイン「Auto Post Thumbnail」を利用することにしました。プラグインを設定して「Generate Thumbnails」をクリックすると、記事内にある画像から自動的にアイキャッチを設定してくれます。なお設定が途中で止まってしまうことがあるようですが、その場合はリロードすれば設定を再開できます。

見出しタグを修正

これがなかなかの苦行。見出しタグ(h○タグ)の修正です。はてなブログはユーザーが設定できる見出しのトップレベルは「h3」なのですが、Wordpressでは記事内の見出しトップレベルは「h2」になります。

現在このブログはブログテーマは「Simplicity」を利用させてもらっています。シンプルながら設定内容も豊富な素晴らしいデザインテンプレートです。

Wordpressテーマ「Simplicity(シンプリシティー)」を作成しました。 Simplicityには主に、以下の7つの特徴があります。 シンプル 内部SEO施策済み 拡散のための仕掛けが施されている 端末に合わせた4つの

このSimplicityでは「最初に出てくるh2タグの前にアドセンスを挿入できる」という便利な機能が備わっており、これを利用しない手はありません。そんなわけでブログ記事を一つ一つ開いてh4→h3、h3→h2へといった設定を行っていきます…。

これもDBが操作できれば一発でできるのかもしれませんけどね。まあ記事の見直しだと思って頑張りましょう。なおプラグイン「TinyMCE Advanced」を入れておくと見出しタグがセレクトメニューで操作できるので便利です。

その他課題

その他、積み残しになっている課題です。

記事内画像の保存場所

上でも少し触れましたが、インポートした記事内に貼り付けてある画像は、基本はてなフォトライフにアップされているものです。はてなのIDは削除していないので現状でも読み込み可能なのですが、万が一を考えて別の画像アップロードサービス、または自サーバー内に移動した方が良いのかもしれません。

画像のtitle・alt属性

はてなブログで記事作成時に設置した画像は、imgタグ内のtitle・alt属性に

title=”f:id:xxxxxx:20150413165553j:plain”
alt=”f:id:xxxxxx:20150413165553j:plain”

のような文字が独自に設定されています。不要な情報なので、画像に適した内容に変更した方がよいでしょう。

ブログカードのデザイン

はてなブログの機能で貼り付けたブログカードも今のところ表示されているようですが、正常な表示が保証されているわけではないので変更した方が無難かも。さいわいSimplicityではURLを貼り付けるだけでブログカードとして表示してくれる機能が付いているので(素晴らしい!)、順次置き換え予定です。

iTunesアソシエイトのデザイン

数は少ないのですが、はてなブログの機能でiTunesのアソシエイトリンクを貼り付けているものがあります。張り替えるのもめんどくさいので、もうはずしちゃおうかな…。

まとめ

以上、はてなブログからWordpressへ移行した際にやったことや、移行した後の諸々、でした。まだまだ完了にはほど遠いのですが、ぼちぼちと体裁を整えていきたいと思います。なお記事数にもよりますが、URLの手動変更や見出しタグの修正は本気でやると1日~2日は軽くつぶれますので、移行のタイミングは計画的に。

でもWordpressはさわってると楽しいですね!また新しいブログライフを満喫したいと思います。See You!

スポンサーリンク
スポンサーリンク
スポンサーリンク

シェアする

フォローする