OITA: Oika's Information Technological Activities

@oika 情報技術的活動日誌。

ブログをWordPressからはてなブログに移行

VPSで運用してたWordPressをやめたいなーと思ってました。

  • バージョンアップめんどくさい
  • SSL化しなきゃと思いつつ腰が重い
  • markdown使いたいだけなのにプラグインが競合したりする
  • カスタマイズ自由と言われてもデザインセンスがないからいじれない
  • バックアップ自分でやるの心配

といった意識の低い理由で。

で当初、GitHubとHugoとNetlifyで静的サイトだーとか息巻いてたんですが、これまた意識低く、はてなブログへのインポートが思いのほか簡単そうで、ちょうどProにしたところだったのでサブブログにすれば追加料金もかからないなーと思って、結局はてなにしました。

ただ、実際やったら思ったよりめんどくさかった。
かんたんに手順などをメモしておく。

ざっくり作業手順

  • WordPressのダッシュボードで ツール > エクスポート
  • はてなダッシュボードから「新しいブログを作成」
    • まずは自分のみに公開にしておくとよい
    • 独自ドメインは後から(完全に切り替えるタイミングで)設定する
  • メニューの「インポート」から「WordPress形式」を選んでインポート
    • コメントもふくめてインポートされる!
    • 下書きも下書きとしてインポートされる!
  • 続けて「これまでのインポート」から「画像データの移行」
    • 記事中の画像をとってきてはてなフォトライフに自動アップロード!

以上で終わり!すごい!かんたん!
と思ったんだけど、さすがにそううまくはいかなかった。
以下、追加でやったこと。

記事のURLを同じにする

移行前のURLは http://oita.oika.me/YYYY/MM/DD/hogehoge/ という感じだった。

https化するにしても、他は同じになるようにしたいところだが、そのままインポートすると https://oita.oika.me/entry/YYYY/MM/DD/hogehoge/ という感じになってしまう。

とてもわかりにくかったが実はこの entry の部分を好きな文字列にすることが可能(削除も可能)で、無事同じURLにすることができました。

設定は インポート > URLの引き継ぎ から、「URLのパス部分について、記事を配信するディレクトリをここで設定してください」の部分。

カテゴリの修正

もともとWordPressでは「カテゴリー」と「タグ」が区別されていたのだけど、はてなブログには「カテゴリー」しかなく、インポート時に「カテゴリー」も「タグ」もまとめて「カテゴリー」に変換される*1

それだけでなく、記事のタイトルに [hoge]ほげほげ という感じに [ ] でくくったプレフィックスがついていると、これも勝手にカテゴリー化されてしまう。

しかもガッサいことに、上記3種類(移行元のタグ/カテゴリー/タイトルプレフィクス)の中に重複があると、1記事に同じカテゴリーが2つついているような見え方になる(一度記事の編集画面にいけば重複の片方が削除されるようだった)。

というわけでこのあたりを考慮してカテゴリーを見直す。手作業で修正…。

ついでに、タグ感覚でつけたカテゴリーリストをサイドバーにずらっと一覧表示すると長くなりすぎるので、タグクラウド風の表示になるようスタイルをいじる。

デザインのカスタマイズから、デザインCSSを編集。
div.hatena-module-category div.hatena-module-body ul li あたりのセレクタを使ってデザインを上書きする。

本文の書式を修正

WordPressで書いてたときに、時期によってWYSIWYGのエディタで書いたりMarkdownで書いたりしたもんだから、インポートしたときに改行とかが狂ってしまっているものがあって、個別に修正。

それと、ソースコードを載せるためのプラグイン「SyntaxHighlighter Evolved」使ってたところも、Markdown用の書式に置換してやらなければならなかった。行番号指定でのハイライトは仕方ないので削除してしまう。

そんでもって、ソースコードを書くときにSyntaxHighlighter Evolvedを使ったりMarkdownを使ったりしてたせいで、競合してhtml特殊文字の < とかがそのまま表示されちゃってたのがあったのでそれも修正。

かんたんな変換スクリプト作ったりはしたものの、細部は結局手作業が必要だった。

画像をGoogleフォトに移行

はてなブログの「画像データの移行」機能で、記事中の画像をすべて自動ではてなフォトライフに移してくれたかと思いきや、移してくれたのはサムネイルだけで、実体はWordPressでアップロードしたメディアのURLを参照したままだった。これじゃ全然ダメだ…。

はてなフォトライフはとても積極的に使いたいようなサービスではないので、そうなるとついでに全部Googleフォト管理に変えてしまおうという気になる*2

というわけで結局WordPressから全部画像落としてきて、Googleフォトにまとめてアップロード。すべての記事の画像参照先を手作業で直していく…。

はてなブログではGoogleフォト貼り付けにも対応しているものの、そのまま貼り付けると横幅いっぱいの表示になってしまうので、一応CSSでheightのmaxだけ指定しておくことにする。

.entry-content img {
    max-height: 380px;
}

残件:はてなブックマークページの統合

はてなブックマークで先日から httpページとhttpsページのブックマークが統合されるようになった、はず。

ヘルプを読むかぎり、301リダイレクトされるようになっていれば、ほかに特に設定する必要はなさそうなんだけど、現時点では統合されているように見えない。

お急ぎの場合は「情報を更新する」を実行せよと書いているけど、どうやらこれはリダイレクト元(http)のページでやらないと意味ないようだ。が、リダイレクトしちゃってるんだからページオーナーの設定なんてできなくない??

とりあえずしばし様子見とする。

以上。

*1:※2021.12 追記:現在ははてなブログにも「タグ」があるので、このへんの挙動は変わっているかもしれません

*2:※2021.12 追記:現在ははてなブログでGoogleフォトの画像を直接参照するということができなくなったので、はてなフォトライフに上げる必要あり