はてなブログpro(独自ドメインなし)を開設して3年が経過。4年目以降はどうするか悩んだ結果、はてなブログを卒業して、WordPressに挑戦してみることにしました。
今回は、はてなブログからWordPressに引っ越しするときの注意点やポイント、便利なツール&プラグインについて、自分なりに調べて行ったことを記事にしてまとめています。
はてなブログ→WordPressに引っ越しをしようとしているけど、手順がわからなくて困っている、という方に少しでもお役に立てれば幸いです。
引っ越し前後の環境はこんな感じです
はてなブログPro契約/独自ドメインなし
移行後:WordPressの環境
レンタルサーバー Xserver(エックスサーバー)
WordPressテーマ CoCoon
この記事では以下のポイントについて説明しています。
- レンタルサーバー契約とドメイン取得
- はてなブログから引っ越しするときの注意点
- はてなブログの記事の引っ越し
- はてなブログで使用していた画像の引っ越し
- はてなブログ記事のリダイレクト(重複コンテンツ防止)
- WordPress&Cocoonの設定
引っ越しって結構やることがあって大変そう
自分で出来るのか不安だなぁ・・・
それなら、この記事を参考にしてみるといいですよ!
レンタルサーバーと独自ドメイン
はてなブログと違ってWordPressを始めるには、まずレンタルサーバーの契約と独自ドメインを取得する必要があります。
レンタルサーバーはXserver、シン・レンタルサーバー、ConoHa WING、ロリポップなど会社が数多くありますので、人気、速度、料金、安定度、レビューを比較して決めるとよいでしょう。
当ブログは、その中でも初期費用無料と独自ドメイン永久無料の特典(契約時)に加えて、WordPressと人気テーマのCocoonのインストールが簡単に出来るXserverを選びました。
Xserverは初心者にやさしいのでおすすめですよ
はてなブログProから引っ越しするときの注意点
まずは、最低限やっておきたい注意点を挙げてみましたので、これを参考に進めていきましょう。
はてなブログPro契約:WordPressの設定作業中、運用が軌道に乗るまでは契約したままがよい
SNS・キーワードリンク解除:全ての記事をバックアップする前に解除しておく
パーマリンク修正:標準フォーマット(日付URL)の記事はパーマリンクを修正する
※検索流入がある記事、ブックマークされている記事は注意が必要
目次タグの削除:目次[contents:]はWordPressで上手く認識しないので削除する
記事のエクスポート:全ての記事バックアップします
全記事の見出しをh2に変更:はてなブログは見出しがh3のためh2に変更する
画像の一括抽出:記事画像を抽出する
記事のリダイレクト:記事の重複を避けるため、リダイレクト(転送)処理をする
※WordPress側の準備が整ったあとに実施
記事の取り込み:ダウンロードしたはてなブログの記事をWordPressに取り込む
画像の取り込み:抽出した画像をWordPressに取り込む
パーマリンク設定:新旧ブログのアドレス構造を合わせるため、パーマリンク設定を修正する
アフェリエイト解除/設定:各記事の旧アフェリエイトリンクを解除→新しいリンクに変更
内部リンクの解除/設定:はてなブログの過去記事など内部リンクがあれば解除→再設定
アイキャッチの修正:はてなブログの過去記事など内部リンクがあれば解除→再設定
Cocoon設定:最低限設定したい4項目の設定
開設までにやっておきたいポイントです
それでは、それぞれの手順について説明しますね
はてなブログProは契約解除? or 継続?
はてなブログProで独自ドメインを持っていなかった場合は、WordPressに引っ越しをしても、直接のアクセス(オーガニック検索)はほとんどないと思います。 当面のアクセス経路ははてなブログの記事が検索エンジンでページランクされたものになるでしょう。
しばらくははてなブログProの契約を継続したままにして、WordPressのオーガニック検索率が高くなってきたときに解約を検討した方がよいと思います。
Pro解約はせずに連携して運用するのもありかも?
じっくりと判断して解約か継続かを決めるとよいでしょう
SNS・キーワードリンク解除
はてなブログPro契約のみ出来る方法になります。
SNS連携解除
TwitterやFacebookなどのSNSと連携をしている場合は
設定 → アカウント設定 を開き、外部サービス連携 を選択
すべてのSNS連携を無効にしましょう。
キーワードリンク解除
- 設定 → 詳細設定 を選択
- はてなブログ タグのリンク 『□ 記事にキーワードリンクを付与しない』にチェックをする
- キーワードリンクがある記事すべてに対して編集 → 更新 を繰り返し実行する
面倒な作業ですが、WordPressに引っ越し後に修正をするよりは簡単ですので、忘れずに実施しましょう。
無料版は残念ながらこの方法が使えません・・・
パーマリンクの修正(はてなブログ)
WordPressに記事を取り込む場合、パーマリンクの設定に注意が必要です。
ただし、すでに検索流入がある記事はパーマリンクを変更すると検索エンジンでページランク外になってしまいますので、変更は慎重に行いましょう。
OK 〜/entry/life-blog 〜/entry/2023-01-01
NG 〜/entry/2023/01/01/140120※標準では 2023/01/01/140120 のようにURLが設定されます。
可能であれば、何の記事かわかるようにURLは「小文字英数字」と「 – (ハイフン)」のみの構成に変更しておくと、あとあと困らないかもしれません。
目次タグの削除
WordPressのプラグインをインストールすれば、目次の自動生成が出来るようになりますので、はてなブログの記事の目次タグ [contents:] はあらかじめ削除しておきます。
WordPressに記事を取り込んだ後に目次タグ [contents:]を削除することも可能ですが、はてなブログ側で先に削除をしておいたほうが作業は楽だと思います。
[contents:] 削除方法
各記事の編集画面で[contents:]を削除します。
記事のエクスポート
ダウンロードしたファイルをWordPressに記事を取り込みます
全記事の見出しをh2に変更
- エクスポートしたテキストデータをテキストエディタで開き編集する
- command+F で検索窓を開く
- 置き換えにチェックを入れる
- 見出しタグの値を必ず上から順番に変更
h3 → h2
h4 → h3
h5 → h4 - 保存して閉じる
画像の一括抽出
はてなブログの記事に使用した画像ははてなフォトライフに保存されています。ここに保存されている画像ファイルはMacで簡単にダウンロードする方法はないみたいです。
画像の一括抽出は、やってみたログ とーんさんの記事を参考にダウンロードすることが出来ました。
※画像ファイル数によってはダウンロード完了まで数時間かかるかもしれません
アプリを使用せずにターミナルでコマンドを入力する方法です
記事の取り込み
WordPress プラグイン「Movable Type・TypePad インポートツール」をインストールが必要です
WordPress プラグインのインストール方法
- メニューから プラグイン → 新規追加
- キーワード「Movable Type・TypePad インポートツール」を検索してインストール
- プラグインを有効化
- メニューから ツール → インポートをクリック
- Movable TypeとTypePad のインポーターの実行をクリック
- はてなブログからエクスポートした.txtファイルデータを読み込ませる
- ユーザー名は特にルールはないので好きな名前を入力する
- 完了後、メニューの 投稿一覧 にて記事が正しくインポート出来ていることを確認する
アドセンス申請を考えている方は記事を絞ることも検討しましょう
画像の取り込み
はてなブログもそのまま継続して運営していくのであれば問題はありませんが、もしブログを削除してしまった場合はWordPressの記事で画像が表示されなくなります。もしもの時に困らないように、画像はWordPressの方にアップロードしておきましょう。
画像をWordPressにアップロードする方法
- 管理メニュー →メディアを開く
- 上段 メディアライブラリ → 横の新規追加 を選択
- ダウンロードしたファイルをWordPress上にドラッグ&ドロップする
- ファイル数によっては完了まで数時間かかる場合があります
画像リンクのURLを書き換える
WordPress プラグインのインストール方法
- メニューから プラグイン → 新規追加
- キーワード「Search Regex」を検索してインストール
- プラグインを有効化
- メニューから ツール → Search Regexをクリック
検索欄に入力
#https://cdn-ak.f.st-hatena.com/images/fotolife/ID頭文字/はてなID/[0-9]{8}/#
※置換の赤色部分 はてなID はURLの青色の部分になります
https://coffeebreak424.hatenablog.com/
※この場合の ID頭文字 は c になります
置換欄に入力
https://ドメイン/wp-content/uploads/2023/07/
※置換の赤色部分 2023/07 は画像をアップロードした年月を入力します。
検索欄と置換欄に入力後に上図の左下にある 検索 ボタンをクリックすると、検索結果に一致する箇所が一覧で表示されますので、誤りがないか確認をします。
すべて置換 ボタンをクリックすると置換を実行します。
パーマリンクの設定(WordPress)
WordPressの記事URLをどのように生成するのかを定める設定です。はてなブログから記事を取り込むときは、はてなブログのURL形式に合わせて、パーマリンク設定の「カスタム構造」を設定します。
WordPress管理画面の「設定 > パーマリンク設定」から設定することができます。
- 設定 → パーマリンク を選択
- パーマリンク構造がカスタム構造にチェックが付いており
かつ「/entry/%postname%」になっていることを確認する
アフェリエイト解除/設定
はてなブログでは「もしもアフェリエイト」のリンクを貼っていました。WordPressではそのリンクIDは使用することが出来ませんので、「もしもアフェリエイト」で新規利用申請が必要になります。
申請承認後、記事に貼ってあるアフェリエイトリンクを修正を行いましょう。
広告はサイト毎に申請して承認をもらっているので、新規申請とリンク修正が必要ですね
内部リンクの解除/設定
はてなブログでブログ内の記事を内部リンクしていた場合、WordPressに取り込んでもリンク先ははてなブログのURLになっています。リンク先の修正は大変ですが、記事毎に修正を行いましょう。
管理メニュー → Cocoon設定 → ブログカード
内部、外部ともにブログカード表示の「□ブログカード表示を有効にする」をチェックします。記事を作成しているときに「リンクの挿入/編集」でURLを貼り付ければブログカードが表示されます。
アイキャッチの修正
はてなブログの記事を取り込んでも、アイキャッチの設定は引き継がれないので表示されません。記事毎にアイキャッチの修正を手動で行うことも出来ますが、こちらはWordPressのプラグインをインストールして、自動生成出来るようにする方法があります。
- メニューから プラグイン → 新規追加
- キーワード「XO Featured Image Tools」を検索してインストール
- プラグインを有効化
- ツール → 設定 → XO Featured Image ツール にて設定内容を確認する
※初期設定のままで特に変更する箇所はありません
- ツール → アイキャッチ画像 から「アイキャッチ画像の生成」をクリックして実行する
上手くいけば、投稿記事にアイキャッチ画像が設置されていますよ
Cocoon設定・プラグインのインストール
WordPressのテーマはCocoonを使用しています。
設定項目は沢山ありますので、すべての項目について説明は出来ませんが、WordPressの開設前に設定をしていくべき項目について挙げてみます。
管理メニュー → Cocoon設定 から各項目のタブを選択して設定する。
- スキン:沢山のスキンがありますので、お気に入りのスキンを探して設定します
- ヘッダー:サイトのロゴを作成、ロゴ画像のリンクを設定します
- タイトル:フロントページタイトルの表示方法設定、サイトの説明を入力
- 投稿:一番下にあるパンくずリスト設定で以下の2つにチェクする
・パンくずリストの配置 ◯メインカラムトップ
・記事タイトル □パンくずリストに記事タイトルを含める
他にも項目が沢山ありますが、最低限この4項目の設定は済ませておきましょう
記事のリダイレクト
記事の修正が終わって移行がほぼ完了しましたら、記事の重複を避けるため、はてなブログ側の方で記事のリダイレクト(転送)処理をします。
下の青色部分をすべてコピーして、リダイレクトをかけたい記事の編集でHTML編集タブを開き、一番上から貼り付けて下さい。
※ ***** の部分はWordPressのURLを入力してください
<p>この記事は移転しました。</p>
<p>
<script type=”text/javascript” language=”javascript”>
<!–
// 新urlの作成
var domain = “https://*****/“; // 移転先URL
var path = location.pathname;
var url = domain + path;
// リンクhtmlの書き出し
document.write(“<a href=\”” + url + “\”>” + url + “</a></p>”);
// リダイレクト
setTimeout(“redirect()”, 2000); // 2 sec
function redirect(){
location.href = url;
}
// canonical の書き換え
let canonicalTag = document.querySelector(“link[rel=’canonical’]”);
canonicalTag.href = url + ‘/’;
–>
</script>
</p>
正常に動作したら、2秒後にWordPressのURLにリダイレクトされます
まとめ
はてなブログからWordPressに引っ越しするときにわからなかった部分について、最低限やっておきたいことと方法についてまとめてみました。
今回はここまでですが、まだまだやるべきことがあります。また、移行がすべて完了してもアクセス数が戻ってくるまで時間がかかるかもしれませんので、焦らずに作業を進めてていきましょう。
最後まで読んで頂きありがとうございました
コメント