とっちゃん@nyanco! です。
今回ははてなブログからWordPressへ移行した際の画像移行方法の覚書（Mac）です。
はてなブログからのエクスポートでは画像まではコピーされない
はてなブログの記事エクスポート機能では写真まではコピーされません。
▼エクスポート画面でちゃんとそう明記されてますね。
WordPressにインポートして、記事を確認するとちゃんと画像が表示されてるのでコピーできてるやん！と一見思ってしまうのですが、imgタグの画像パスを見てみると…
https://cdn-ak.f.st-hatena.com/images/fotolife/n/nyanco696/20200215/20200215130243.png
上記のように、「はてなフォトライフ」の画像を参照している状態となってます。
「はてなフォトライフ」のサービスを解約しない限りは画像はずっと残るのでこのままでも良いとも言えますが、何分他社サービスなので突然サービスが終了したり、有料サービスになったりする可能性はあります。
そのようなリスクを考えると、早めに自分のサーバーへ移動させておく方がベターですね。
ということで、早速その手順です。
「はてなフォトライフ」から画像を全てダウンロード
まずは「はてなフォトライフ」から一括で画像データをダウンロードします。
「はてなフォトライフ」には一括で全ての画像をダウンロードする機能がないので、別途アプリケーションを使って行います。
下記記事を参考に、Macで「SiteSucker for MacOS」という無料ソフトを使って行いました。
600ほど画像データがありましたが、数分でダウンロードできました！
ちなみにWindowsだと、下記記事が参考になりそうです。
Macよりひと手間多いですが…
ダウンロードした画像をリサイズ・フォルダ分け
次にダウンロードした画像データのリサイズとフォルダ分けの作業です。
ちなみにこちら、必須作業ではなく必要に応じてで良いかと。
特に画像リサイズはアップロードしてからでもプラグインで出来ます。
画像をリサイズする
ブログ始めたての良く分かってない頃の記事にアップした画像を見てみると、1MBを越えてる画像が結構ありまして…
このままアップするのは無駄にサーバー容量食うし、SEO的にも間違いなく良くないのでリサイズしておきました。
Macの無料ソフト「ImageOptim」を使うと設定してドラッグ&ドロップするだけなので楽ちんです。
Windowsなら、「Voralent Antelope」というソフトが使いやすそうです。
画像をフォルダ分け
「はてなフォトライフ」からダウンロードされた画像データは、「20200222」（＝2020年2月22日）のようにフォルダ名が画像をアップロードした「年月日」になってます。
このフォルダ構成を、下記のようにWordPress仕様に合わせるフォルダ分け作業をしました。
年フォルダ
├ 月フォルダ
├ 月フォルダ
…
この作業を自動化できるソフトは見当たらず、手作業でやったのですが、かなり時間がかかってしまいました…
いちいちフォルダ分けせずに「hatena-image」のようなフォルダに全部放り込むんでしまうのもアリだったかなと思ってます。
（後工程の画像パスの検索置換もシンプルになるし）
まぁでも後々の管理のことを考えたら、フォルダ分けしておいた方がダントツ分かりやすいので、画像の数が少ない人はササっとやってしまうのが良いかと。
画像をWordPressのあるサーバーにアップロード
次に、画像データをWordPressがインストールされているサーバーにFTPソフトを使って一気にアップロードします。
アップロードするディレクトリは以下です。
「wp-content」>「uploads」>「images」
画像パスを一括で検索置換
いよいよ大詰め作業です。
「Search Regex」という正規表現が使えるプラグインを使って全ての記事内にある画像パスを一括置換します。
こちらのプラグイン、最終更新が4年前とちょっと心配になりますが、今のところ問題なく使えております。
他に良さげな検索置換プラグインがないんですよね。。。
作業には下記記事を参考にさせていただきました。
「年」「月」というフォルダ構成でフォルダ分けした場合と、全ての画像を一つのフォルダにまとめた場合とでは検索文字列と置換文字列が違ってくるのでそれぞれ説明します。
「年」「月」というフォルダ構成でフォルダ分けした場合
https://cdn-ak.f.st-hatena.com/images/fotolife/はてなIDの頭文字/はてなID/(\d{4})(\d{2})\d{2}
全ての画像を一つのフォルダにまとめた場合
https://cdn-ak.f.st-hatena.com/images/fotolife/はてなIDの頭文字/はてなID/\d{4}\d{2}\d{2}
それぞれの欄に文字を入力したら「Search」をクリックします。
下に検索置換後のプレビューが表示されるので、確認して問題なければ「Replace & Save」をクリックして一括置換を実行します。
あとは記事を更新表示して問題なく画像が表示されていればOK！
htmlソースを見て画像パスが変わっていれば完璧です！
今回は以上となります。
最後まで読んでいただきましてありがとうございました！
それではまた〜✧٩(ˊωˋ*)و✧
コメント