はてなブログ

はてなブログ移行後にWordPressで行う修正マニュアル

WordPress修正マニュアル

はてなブログからWordpressへの引越し作業第2弾!前回の記事で、はてなブログの記事データをWordpressにインポートした所まで紹介しました。

今回はその後、WordPress側で行った設定を画像を使い1つずつ紹介したいと思います。移行作業の終盤戦ですが私が一番苦労した箇所です。正直ここからが本番ですよ!

移管の大まかな流れです(次は⑦からスタート)

  1. はてなブログの移管準備
  2. サーバー契約
  3. ドメイン設定
  4. WordPress設定
  5. hostsファイル書き換え
  6. WordPress修正
  7. エラー修正(←ココからスタート)
  8. サーバー切り替え作業

修正を始める前に

WordPressのバージョンが上がり修正画面が新しくなっています。正直使いづらいし慣れないので以前の修正画面に戻すプラグイン(Classic Editor)をインストールして利用します。

決して怪しくはないのでご安心を。WordPressを利用している人の多くが「Classic Editor」を使っていると思いますよ。

Classic Editor

WordPressの管理画面から「プラグイン」→「新規追加」→検索窓に「Classic Editor」と入力→「インストール」をして下さい。

※上の画像はインストール済みなので「有効」の文字になっています。

インストールして有効になったら修正作業をはじめましょう。

WordPressのエラー修正

はてなブログからWordpressへデータをインポートした後に起こったエラーの修正を行います。一括で変更出来る修正と、1記事ずつ変更していく修正がありますのでまとめて紹介していきます。

ちなみに、インポートしてすぐの画面が下の画像です。

Classic Editor

cssなどの設定もしていないので参考になるかは分かりませんが、ただデータをインポートしただけではまだ見れる状況ではないんですよね。

これを最適化させていく作業を行います。

[1] hタグ変更

まず最初の修正は「hタグ(見出しタグ)」の修正です。

はてなブログとWordpressの仕様が違うのでインポートしたデータを見るとhタグ(見出しで使っている文字コード)が1つずれるんです。

ちなみに、はてなブログのhタグ(見出しタグ)は下の画像の場所ね。

はてなブログのhタグ

h2タグがはてなには無いんですよね。

なぜh2が無いのか説明は省きますが、hタグが順番通り記載がないとSEO的に良くないのでタグの修正を最初に行います。プラグインを利用して一括で変更していくのでここからの作業は慎重に行いましょう。

見出しタグの設定
見出しタグの使い方を理解してブログに活かそう[初心者必見]ブログを書く時に一番初めにつまずく見出しタグ。どう使えばいいいのか分からない人向けに使いかを紹介します。 見出しタグがないとただ文...

変更箇所はこれです。<h2><h3><h4>タグの変更を行います。

[はてな]→[Wordpress]
<h3> → <h2>
<h4> → <h3>
<h5> → <h4>

Search Regexで一括変換

作業手順は簡単です。まずはWordpressの管理画面から「プラグインページ」へ行き検索窓に「Search Regex」と入力。

下の画像が出てきたらSearch Regexの「今すぐインストール」のボタンがあるので押してインストールして下さい。

Search Regex

ツール」の中にインストールされていますので立ち上げた画面がこれ!英語だけど使う機能は限られるのでご安心を。

Search Regex

主に使う機能はコチラ

  • Search pattern:現在の文字を入力する場所
  • Replace pattern:変更後の文字を入力する場所
  • Searchボタン:「Search pattern」で入力した文字を検索出来る
  • Replaceボタン:置換した場合どうなるかをプレビューしてくれます(まだ置換はされていません)
  • Replace&Saveボタン:これが置換されるボタンです(ボタンを押したら元に戻すことは出来ません)

上の選択できる項目「Source」「Limit to」「Order By」はこのままでいいです。

一応説明を下に書いておきます。

「Source」

  • Comment author:コメントの名前
  • Comment author email:コメントのメールアドレス
  • Comment author URL:コメントのURL
  • Comment content:コメント内容
  • Post content:記事本文
  • Post excerpt:記事抜粋
  • Post meta value:記事カスタムフィールド
  • Post title :記事タイトル
  • Post URL:記事パーマリンク(URL)

「Limit to」

  • 処理する上限を選べます:10、25、50、100

「Order By」

  • Ascending:昇順
  • Descending:降順

書き方はコチラ

h3タグをh2タグに変える方法です。

Search Regex
  1. Search patternに入力 → |<h3>(.+)</h3>|
  2. チェックボックスの「Regex:」にチェック
  3. Searchボタンで検索(h3タグがズラーッと出てくるはずです)
  4. 続けてReplace patternに入力 → <h2>$1</h2>
  5. Replaceボタンで検索(下の画像のように置換後の文字が出てくるはずです)
  6. これでOKであればReplace&Saveボタンをクリック。
  7. 完了
Search Regex

最後の「Replace&Save」ボタンを押したら元に戻せないので慎重に作業してみてね。

私はこの作業で1回失敗しました。何度か書き換えたらタグがごちゃごちゃになったので記事を消してインポートし直したよ。

失敗したら記事を全部消してもう一度インポートしなおすのが一番いいですよ。

ゴミ箱に記事が入っていたら上書きされてややこしくなるのでゴミ箱からも完全に削除してもう1度トライしましょう。

インポートした時の記事はこちら

タグの変更順はこの通り!h2に変更するのが最初です。

  1. <h3> → <h2>
  2. <h4> → <h3>
  3. <h5> → <h4>

一括変換で修正する内容はこの1つだけです。

 

後は1つずつ手動で作業します。プラグインを使って一括変換出来る方法をテストしましたがどれも不完全だった為、私は手作業で1つ1つ修正をしました。

記事数が多いと気の遠くなるような作業ですが、、、頑張りましょう。この手作業が一番大変だった作業です。

手作業の内容は3つ項目がありますので全部読んでからまとめて作業しましょうね。

[2]アイキャッチ画像変更

手作業で行う修正の1つ目は、ページの最初に出てくるアイキャッチ画像。

はてなブログからWordpressへ移行した時は記事内の写真は表示されていますが、アイキャッチ画像は選択されていないんです。(一覧で出てくる画像の事です)

アイキャッチ画像変更

アイキャッチ画像は画面の右側に設定できる場所がありますよ。

アイキャッチ画像

プラグインを使って一括変換する「Auto Post Thumbnail」もありましたが、最新のバージョンだと表示が出来なくなりました。以前のバージョンのまま利用するのであればアイキャッチ画像を一括で登録が出来ます。

ただ今後使えなくなりそうな予感がしたので私は手作業で行いましたが。。。

[3]パーマリンク修正

次はパーマリンクの修正を行います。前回はてなブログから記事データをインストールした時に少し書いていますが、2種類のURLを使っていたので未設定のURL(カスタムURLのページ)を1つ1つ変更作業を行います。

前回の記事はコチラ

※はてなブログのURL設定が1つだけの方はこの作業は飛ばして下さい

私の場合はインポートする時に「標準フォーマット」を採用しました。

インポートした時に全てのページが標準フォーマットのURL(数字のURL)に変わっているので、「カスタムURL」を利用していたページを変更します。

修正方法は下記画像のエリアにカスタムURLを貼り付けて更新ボタンを押します。

パーマリンク修正

カスタムURL→ ドメイン名/entry/◯◯◯◯

これの繰り返し!私はこれで約60記事を1時間くらいかけて修正しました。

はてなブログのURLと照らし合わせて作業するので手間だけど、これが合ってないとSEOに影響が出るので手を抜かずに頑張りましょう!

標準フォーマットを変更する作業を行う時はEnhanced Custom Permalinksをインストールして下さい。

WordPressでは「/」が入力出来ないのでEnhanced Custom Permalinksをインストールすれば入力が出来ますよ。

[4]目次修正

次は目次の修正です。はてなブログで利用していた目次タグ[:contents]はWordpressへ移管すると全てのリンクが表示されます。この修正も1記事ずつ修正していきます。

はてなブログで目次を作ると[:contents]だけが表示されますよね。

目次修正

このままWordpressへ移行するとhtmlでは全てのタグが反映されてしまいます。

目次修正

cssで対応も出来るのですがWordpressの場合プラグインで目次を作った方が今後楽なのではてなブログの目次は全て消していきます。

プラグインの「Search Regex」で一括変換出来るタグでチャレンジしましたが、どれも中途半端な変換しか出来なかったんです。

目次の途中まで消えるんだけど全部は消えないんだよね。下の画像の赤枠の場所もまだ目次のタグなんだけど消えない。誰か消し方を知っている人が教えて欲しいです。。。

目次修正

なので諦めてこちらも1記事ずつ削除していきました。

私の場合は360記事。。。パーマリンク修正と合わせて修正をしていきました。

 

以上が私が行ったWordpress移行後の修正です。手作業で行った修正は本当に辛かったんだけど、過去の記事を見直す事が出来てリライトすれば伸びる記事も見つけたのは収穫でした。悪いことだけではなかったね。

修正と同時にいらない記事を100記事くらい削除したので残ったのは260記事になったのですが、サーバー移管とページの削除を一緒にやるとエラーが出たりしてかなり大変なので移行中は削除しない事をオススメします。

消すページはメモを取っておいて移行後落ち着いたら削除しましょう

次はついに本番環境へ切り替える為のサーバー手順を紹介します。

デザインの修正等を行う場合はサーバー切り替え前に作業して下さい。

色味などの調整やヘッダー画像などテーマによって違うのでWordpressで設定しましょう。

 

サーバー切り替え

修正が完了したら新サーバーへ切り替え作業を行います。

[1]ネームサーバー切り替え

ドメインをお名前.comで管理しているのでお名前.comへログインしてネームサーバーを切り替えます。ドメインの向き先を新しいサーバー(エックスサーバー)にする作業です。

作業は簡単。お名前.comの管理画面で設定しますのでお名前.comへログイン!

ネームサーバー切り替え

ドメインのメニューの中の「ネームサーバー変更」をクリックして進んでください。

ネームサーバー切り替え
  1. ドメイン名にチェックを入れてください。
  2. ネームサーバの選択は「その他」をクリック
  3. ネームサーバの入力欄が出るので5つ入力します
  4. 「+」ボタンを押すと数が追加出来ます
  5. 確認ボタンを押す

[エックスサーバーのネームサーバー]

サーバー契約した時にメールが届いていると思うのでそのメールに記載があります。ちなみにコレです!メールに届いているものと一緒だと思います。

ネームサーバー1: ns1.xserver.jp
ネームサーバー2: ns2.xserver.jp
ネームサーバー3: ns3.xserver.jp
ネームサーバー4: ns4.xserver.jp
ネームサーバー5: ns5.xserver.jp

これでネームサーバーの切り替えは完了です。

[2]DNSレコード設定

次はDNSの設定です。

ドメイン設定の「DNS関連機能の設定」へ

DNS関連機能の設定

ドメインを選択して次へ進みます。

DNS関連機能の設定

真ん中の方にある「DNSレコード設定を利用する」の青い設定するボタンをクリックしてください。

DNS関連機能の設定

登録済みの場所に「hatenablog.com」の欄があると思います。これを削除するので右側の削除ボックスにチェックを入れて削除して下さい。

DNS関連機能の設定

確認して完了すればDNS設定の完了です。

この作業が完了したらインターネット上で新しいブログが表示されます。

世界中のサーバーの向き先を新サーバーへ変更していく作業なので全て反映されるまで最大72時間かかります。でも大体1日で反映されていました。後は待つのみです!

サーバーの反映を待つ間細かい設定をしっかり対策しておきましょう。

[3]hostsファイルの変更

サーバー切り替えが終わった後は前回行ったhostsファイルを元に戻す作業です。作業は簡単。

追加した文字を消すだけです。作業内容は前回と同じなので消したら上書きしましょう。

前回の作業内容はこちら

hostsファイル書き換え

hostsファイルを書き換えた後、ネームサーバーが切り替わっていなければWordpressの管理画面は表示されなくなります。ページが見つかりませんってなるはず。切り替わってから修正作業が出来るので気をつけましょう。

[4]はてなのリダイレクト

最後の作業です。ネームサーバーが切り替わり新サイトが表示されたらはてなブログからのリダイレクト(転送)作業を行います。

同じ記事が2つあるとSEOに影響があるのでリダイレクトするタグの設置をします。

設置するタグはこちら(新URLの場所は自分のURLに変更して下さい)

<script>
<!–
var newDomain = “https://www.chichibu-life.com”; // 新URL
var path = location.pathname;
var url = newDomain + path;
var link = document.getElementsByTagName(“link”)[0];
link.href = url;
// 0秒後にジャンプ
setTimeout(“redirect()”, 0);
function redirect(){
location.href = url;
}
–>
</script>

このタグをはてなブログにコピーします。

設置場所は「デザイン」→「ヘッダ」→「タイトル下」です。スマホの設定も忘れずにね。

はてなブログリダイレクト
はてなブログリダイレクト

リダイレクトされているか確認してみてね。

リダイレクト設定が終わったら管理画面の「設定」→「詳細設定」の中にある検索エンジンに登録させない(noindex, nofollow)をチェクして保存しましょう。

これではてなブログへのアクセスはなくなるはずです。

はてなブログ検索させない

 

これで引越しの修正が完了です。長い時間お疲れ様でした。

今回私が行った作業を1つずつ画像付きで紹介しました。この通り進めば移管は出来るはずです。手動の部分もあるので時間はかかりましたがリスクは少ないと思います。

ぜひチェレンジしてみてね。