祝(?)ブログを移転しました【はてなブログ→WordPress/移転作業備忘録】

Web制作

みなさんこんにちは、いっちゃんです。

 

タイトルの通り、この度ブログをはてなブログからWordpressに移転しました。その経緯と移転作業について備忘録としてやったことを書き留めておきたいと思います。ちなみに、前回のはてなブログから持ってくる記事は30日間カップ麺生活の企画記事のみの予定で、一応全記事確認しながら移行しようと思いますので後ほどちょっとずつ更新してアップしていきます。

ブログを移転した理由

 

なぜはてなブログをやめたのか、Wordpressにしたのかという点ですが、主に以下2点。

 

複数サイトを運営が、しんどくなった

 

実は複数のメディアを持っていてひっそりと運営していたのですが、あちこちを管理するのがしんどくなってしまったのが一番の理由。そもそもそういった他メディアの中で自分のことを好き勝手に書けないという理由で2年前にはてなブログで始めたのがいちぶろ。結局好きな時に好きなことしか書いていませんでしたので更新頻度は高くありませんでしたが、それくらいがちょうど良い。書きたいことはここ「いちぶろ」にまとめて書く!

 

というわけでもともとメールアドレスくらいでしか使っていないドメイン引っ張り出してサブドメインを切って、こちらにお引越ししてきました。

 

カスタマイズや拡張性の良さ…etc

 

はてなブログは投稿や記事の管理がしやすいです。「はてなブログ」というくらいですから、ブログに特化したサービスなので当たり前といえば当たり前なのですが、投稿もスマートフォンでちゃちゃっと行えるしコンスタントに投稿する方にはもってこいのツールです。

 

しかし、私はコンスタントに投稿するわけではないですし、仕事柄……Web制作者なのでHTMLをいじったりPHPをいじったり、なんてことは苦になりませんし、呼吸をするかの如く触れることができます。むしろWordoressを触るほうが便利だったようです。最近動画の投稿を始めたこともあり今後カスタマイズをすることが増えそうですし、「あれしたいなー」「これしたいなー」と考えても、はてなブログではできないけどWordpressではできる。ということがたくさん出てきたので、移行に踏み切りました。

 

なんだかんだ、慣れてしまえばWordPress最強

 

WordPress移行手順(備忘録)

 

私が行ったことであり、これが正解というわけではないです。また、ある程度知識があることをベースに書いていますので質問がある人はラーメン奢ってください。

 

WordPressのインストール

 

まず、適当なサーバーにWordPressをインストールし、テーマを変えたり作ったり、必要そうなプラグインを入れるなど基本的な設定をします。固定ページは先に作ってしまってもOK。また、移行前のブログをエクスポートしてカテゴリごと引き継げるのでそのへんの設定は最後でもOK。好きにやればいいと思います(適当)。2年前とはいろいろと勝手も変わりましたので、SSL認証もくっつける。ちなみにこの作業中、サイトにはBasic認証かけていました。

 

はてなブログ記事のエクスポート

 

まず、はてなブログ側の記事をエクスポートします。Movable Typeの形式で、.txtで吐き出されるので必要に応じて整形したものをWordpress側にインポートします。html形式で記載されているので、はてなで「見たまま編集」を使用して投稿していた場合は空のpタグが多数入っていたりするので不要だったらこのへんを調整。また、キーワードリンクも設定していると引き継ぐので不要であれば正規表現とかで消しておきます。また、画像のパスが変わるので画像も移行する場合はこちらも置換しておきます。

 

画像の移行

 

 

画像ファイルについては、はてなブログのエクスポートファイルから良い感じにURLを抜き出します。コーダーとかプログラマとかに「正規表現って何?ちょっとこれやって?」ってラーメンという名の賄賂を渡すとやってくれるんじゃないかと思います。この画像のやり方は正解かどうかわかりませんが、できたので細かいことは気にしない。

 

URLを抜き出したら、画像ファイルをダウンロードします。私はMacなので、URLcollectorを使用しましたが、Windowsの方はDSダウンローダーっていうのがいいっぽいです。

 

階層もそのまま保存できたら/wp-content/uploads/内にそのまま入れますよ。

 

入れ終わりましたら、Wordpress側でメディアに読み込ませます。何かしらプラグインを使うといいようです。私はMedia from FTPというプラグインを使いました。ブログ記事インポート前に、画像を読み込ませておいてしまうと良いですね。

 

はてなブログ記事をWordpressでインポート

 

WordPressメニューで[ツール]>[インポート]で整形したファイルをインポートします。

 

 

念の為おさらいですが、こちらのファイル

 

  • 画像のパス変更(画像移行部分)
  • 不要なタグ(ゴミ記述)の削除
  • 必要に応じてリンク先の変更(これもブログ内の遷移等があれば)

 

の、3点は整形しておくと楽チンですね。また、URLについても事前にWordpress側でパーマリンクの設定をいじっておけばドメイン〜ユーザ名までの置換で済むのでこれも楽チン。

 

※今回私は面倒だけれど1記事ずつ確認しながらゆっくりアップしていきたいと思っているので、ここはあえてURLをイコールにしませんでした。

 

はてなブログにリダイレクトを設定

 

念の為旧ブログにアクセスしてくれた方を新ブログへ誘導しようと思います。記事を移行した分のみ。.htaccessをおいて301リダイレクトかけるのが超絶楽チンなのだけれど、はてなブログにはそんな便利な機能は無いのでこれはJavascriptでせっせと1ページずつ設定する他ない……

location.href="新URL";

ドメイン部分とディレクトリの一部の置換のみで良いように設定するのも良かったのですが、カテゴリを再度設定しなおしたりしたこともあり、上記のようなシンプルなJSを全記事に設定。

記事単位のページを開いたときだけではなく、トップページやカテゴリページなど複数の記事が並ぶ場合でも、記事エリアのJSは読み込まれてしまうため、記事はいいところで「続きを読む」の設定をし、それよりも後ろ(本文の最後)にJSの記述をつけるようにしました。

そうすることで、複数の記事が並ぶ場合は「続きを読む」より前しか読み込まれないため当たり前ですがJSも読みません。また、本文の最後に記載したことで多少はてなのページも表示されてしまい、訪れた人が「飛ばされた」と感じる瞬間が生じるため、ロード中は読み込み中のアイコンと白背景が表示するよう下記2箇所にブログ全体の設定を行いました。

  1. デザイン>カスタマイズ>[ヘッダ]・[共通CSS]でloadingの要素を設定
  2. 設定>詳細設定>[検索エンジン最適化]・[headに要素を追加]の部分で読み込み完了までloadingの要素を表示する設定

漏れがあったときのために念の為共通ヘッダー部分にはお知らせも記載。

.htaccessの301リダイレクト設定であればSEO的にも問題なく、最も安心と言われているが、シンプルなJSのリダイレクトであってもクローラーはJSを読めるため問題ないようです。

おわりに

 

これからは今までのように日常であったことや身体を張った企画やラーメンのことの投稿だけではなく、これまでブログに書いてこなかった技術ブログや趣味のアウトドアのことなども含めて幅広く、いっちゃんが発信できること全てを発信していきたいと思います。

 

一応断りを入れておきますが……今も昔も、いちぶろはラーメンブログではありません。

 

それでは今後とも、どうぞよろしくお願いいたします!

コメント

タイトルとURLをコピーしました