【WordPressに移行】はてなユーザー、“いつかのために”やっておくこと

ブログ運営

 

さめはだ舞子(@samehada_maiko2)です。この度、当ブログは「はてなブログ」から「Wordpress」に移行しました!

 

さめはだ

まだ記事数も多くないし、そこまで大変じゃないだろ~

 

とか思っていたのですが、これが大間違いでした…。結論から言うと、めちゃくちゃ大変でした!!!!!(泣)

 

はてなブログで運営しているときに、日ごろからちょっとした手間を惜しまずにやっていればこんなことには…と何度思ったことか。今回は、「いつかWordpressへの移行を考えている」「移行は考えていない」という方にお伝えしたいことをまとめました。

 

さめはだ

今は移行を考えていなくても「いつかは移行したい」という方にはぜひ読んでいただきたいです!

 

 

はてなブログからWordpressへの移行を決意したワケ

『はてなブログは「固定ページ」のCSSが変更できない』という不満

2017年の年末あたりに当ブログに「固定ページ」を設置しました。PC画面で確認すると見出しのデザインなど独自で追加したCSSが適応されていたんですが、スマホ版を確認すると、全く反映されていなかったんですね。見出しも反映されない、文字装飾もない…。ただ黒い文字がつらつらと並んでいるだけの状態。

 

いろいろと調べましたが、原因が分からず、はてなブログに問い合わせました。はてなブログからの回答はこちら。

 

お問い合わせいただきました件につきまして、スマホ版用のデザインCSSを設定する欄がないため、デザイン > カスタマイズ >「デザインCSS」に設定されても基本的にはPC版のみ反映されます。

デザインCSSに書いた内容をスマホ版にも反映させたい場合には、レスポンシブデザインにしていただければ反映がされますが、レスポンシブデザインにされますと今度はスマホ版のデフォルトテーマは反映されなくなるため、調整が必要となります。

 

つまり、PC版とスマホ版がレスポンシブデザインとして全く同じカスタマイズならCSSが反映されるが、PC版とスマホ版で別々のカスタマイズをしているとスマホ版は反映しないよ!ということです。

 

私はPC版をはてなブログのテーマ、スマホ版は個人でカスタマイズしたサイトデザインを使用していました。回答にあるように「スマホ版固定ページ用のCSS欄」がないため、これまでのスマホ版CSSが反映することができなかったのです。固定ページを活用していこうとしていた自分にとってはかなりの不満点となりました。



WordPress新テーマ『SWALLOW(スワロー)』のリリース情報


 

そんな不満を抱えているときにWordpressテーマ『STORK(ストーク)』で有名なOPENCAGE様から新たなテーマ『SWALLOW』がリリースされたという情報が入りました。

 

公式サイトで詳細を見て、かなり惹かれました。当ブログは「シンプルだけどポップ」な雰囲気を目指しておりブログの雰囲気にも合いそうでしたし、『STORK(ストーク)』より機能が減ったとはいえ、必要な機能はしっかりと兼ね備えてありました

さめはだ

もし“いつか”移行するなら『SWALLOW』が良いな~

 

はてなブログでデザイン崩れ事件発生

そして、事件が…。ある日突然、ブログのデザインがガタガタに崩れてしまいました。PCで全画面表示をしてもサイドバーは下に移動し、メニューバーも崩れ、全体のデザインもCSSがすべて反映しなくなりました。

 

原因を探したものの、なかなか分からず…。修正にかなり時間がかかることを察しました(バックアップをとっていなかった

 

さめはだ

どうせいつかのタイミングでWordpressへの移行を考えていたし、はてなブログは固定ページデザインができないし、新しいテーマ気になったし、デザイン崩れたし…良いタイミングなのかな…移行すっか!(完全勢い)

 

記事数は少なかったものの…移行にはめちゃくちゃ時間がかかった

移行時のブログの状態はこんな感じ。

  • 記事数:24記事
  • 画像:150枚
  • 運営歴:2ヶ月半(はてなPro歴:2ヶ月)
  • 独自ドメイン設定
  • 初期記事を除いてパーマリンク設定(http://〇〇.com/entry/〇〇)
  • はてなブログのためSSL化未対応

記事数が多いと移行が大変だということは分かっていたのですが、まだ20記事程度でしたのでそんなに難しくないかな~と思っていました。しかし実際はめちゃくちゃ時間がかかりました!!!!

 

20記事でこんなに時間がかかるんだ…記事数がもっと多かったらきっと私は挫折していたに違いありません…。ちなみに、はてなブログ→Wordpressへの移行はこちらの記事を参考にさせていただきました。

 

[画像153枚で図解] WordPress(ワードプレス)ブログの始め方完全マニュアル

 

移行に伴い行った作業

  1. Xserver契約
  2. WordPressテーマ『SWALLOW』購入
  3. ブログのSSL化
  4. WordPress初期設定・カスタマイズ
  5. 記事修正(リンク/画像/見出し/改行)
  6. 画像の移行・編集
  7. Google Analytics、Search Console設定

 

移行に伴って行った作業はざっとこんな感じです。この中でより作業時間がかかった部分をピックアップしてみます。

 

ブログのSSL化

はてなブログではサイトのSSL化に対応していませんでした(※2018年から対応開始されました)。そのため、移行のタイミングでSSL化することに。SSL化をすると、ブログのURLが「http://~」から「https://~」に変更となります。

 

先ほどご紹介した参考記事を見ながら、そのまま手順を踏んでいくだけなのですが、URLが変更されるため、一つひとつ確認しながら慎重に進めなければなりません。また、変更後にはGoogle Analytics、Search Consoleに新しいURL(https://~)の登録作業もあります

 

こうなると何気に作業量が多く、またそれぞれ反映されるまで数日かかるため、全体として割かれた時間は大きかったです。

 

はてなブログから持ってきた記事の修正

はてなブログ内で記事のバックアップを取り、そのデータをWordpressにインポートすることで今までの記事をそのまま移行させることができます。

 

この作業はとても簡単なのですが、はてなブログとWordpressで記事作成の仕様に違いがあったり、はてなで出来ていたことがWordpressでは出来なかったりする部分があるので、一つひとつ記事を確認し、手直しをする必要があります。

 

見出しの違い

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

はてなブログでの「大見出し」はWordpressのタグで言う<h2>となります。つまり、はてなブログとWordpressでは見出しのタグ数値が1つずつズレていることになります。そのため、記事の移行後には、各見出しを正しいタグに修正してあげなければなりません。

 

『ブログカード』は使えない

引用:『30代からはじめるグッジョ部』

はてなブログでは『ブログカード』と呼ばれる、自分の過去記事を簡単に記事内に挿入できる機能があります。とても便利な機能なので私もよく使用していました。しかし、この『ブログカード』の機能はWordpressでは使用できません

 

移行後、『ブログカード』を使用していた部分は空白状態となるため(HTMLは残っている)、テキスト欄で『ブログカード』部分のHTMLを削除→内部リンク張り直し(『SWALLOW』の場合は過去記事をリンクできるショートコードがあるのでそれを適応)します。過去記事をたくさん貼っていた方は結構時間がかかるポイントだと思います。

 

画像の移行・修正

一番しんどい作業でした。はてなブログでは記事のバックアップはとれるものの、「画像のバックアップ」はとれません。ですので、移行時には画像はすべて手動でダウンロードし、Wordpressへ再アップロードする必要があります。これは枚数が多いとかなりキツイです。

 

色々調べると一括でダウンロードができる方法が何パターンかありました。そのうちの一つはこちら。

Windowsではてなフォトライフの画像を全てダウンロードする簡単な方法
https://www.d-3.site/entry/2017/10/25/183000

 

とても分かりやすく日付も新しかったため、この方法でトライしてみました。…しかし!上手くいかず…。まずRSSのURLのコピペができません。ここは該当部分を選択→検索画面で開くなどかなり遠回りした方法でできましたが、ダウンローダーでDLを開始してもPC内に保存されず…。

 

これ以外の方法でも試してみましたが、どうやらはてなブログの方で仕様が変わったのか、すべての方法でうまくいきませんでした…。(同じ方法で最近成功した方いたら教えてください…)結局、PC内に残っている画像はそれを使い、残っていない画像についてはブログ記事から保存してダウンロードしました。

 

 

また、これまでブログにpng形式で画像をあげていましたが、長期的なことを考え、すべての画像を「png形式→jpg形式→jpg圧縮」の作業を行いました。ブログ始めた頃は画像の容量まで気が回っていなかったため、かなり大きなサイズでアップロードしてしまっていました。枚数が多くなるとサーバーへの負荷にもなるため、移行のタイミングですべての画像を圧縮

 

また再度アップロードするため、画像URLがはてなフォトライフのURLからWPライブラリのURLと変更となります。それに伴い、記事内の画像URLを変更します。

 

かなり時間がかかりましたが、枚数が増えてからではもっと大変であったため意を決して行いました。日頃からやっておけば、こんな苦労はなかったはずなんですが…(笑)



なんとか移行が完了!はてなユーザーに伝えたいこと

記事のバックアップ

さめはだ

ブログのバックアップはきちんと取っておこう!

そもそもデザイン崩れが起きても、きちんとバックアップさえ取っていれば修復できる可能性は大きかったはずなんです。

 

初心者だとバックアップなにそれ!状態でほとんど頭にないかもしれませんが、事件が起きてからでは遅い。

 

CSSなどに慣れていない状態だからこそ、きちんとバックアップは取っておきましょう

 

パーマリンクの設定

さめはだ
パーマリンクは早めに設定しておこう!

はてなブログではパーマリンクの設定をしておかないと記事のURLは

http://●●.com/entry/2018/02/01/093827

というように、投稿日と記事番号で構成されたURLになっています。

 

しかしこのURLはWordpress移行時に使用できなくなります。なぜなら、Wordpressでは「/(スラッシュ)」が使用できないため、すべて手動で変更しなければならないからです。しかし、それを回避できる方法が「パーマリンク」の設定です。

 

パーマリンクを設定すると

http://●●.com/entry/任意の記事名

というようなURLにすることができ、WordPressへの移行後もそのまま使用できるようになります。

 

また、記事の見栄えという観点からも、数字が並んだだけのURLより記事の中身が分かるような名前にしていた方が良いですし、SEO効果もあるようですので、移行を考えていない方も設定して損はないかと思います。

 

はてなブログここから設定できます
ダッシュボードの設定>詳細設定の記事URL

参考記事:『失敗したッ!はてなブログでは絶対にカスタムURLを使うべき

 

独自ドメイン

さめはだ
独自ドメイン取得していると移行後の設定がちょっと楽になるよ!

はてなブログで独自ドメインを取得している方は、Wordpressの移行後の各設定がちょっと楽になると感じました。独自ドメインを設定していない状態だとブログのURLは「http://〇〇.hatenablog.com」など、“はてなブログ独自”のURLになっているはずです。

 

もちろんこれはWordpressにそのまま引き継げないため、移行時には独自ドメイン(当ブログでいう「samemai.com」)を取得し、適応させる必要があります。

 

そうすると、今まで外部サイトに貼られていたはてなでのブログURLはアクセスできなくなりますし、内部リンクもすべて新しいURLに差し替え、アナリティクスやその他のツールの設定も変更しなければなりません。また、URLが変わるのでそれまで培ってきたドメインパワーも無くなってしまいます。

 

独自ドメインを取得して運用していれば、移行後も同じURLを使用することができ、この手間が省くことができます。初期段階での設定をおススメします。



画像の編集と管理

さめはだ
画像の管理は日頃からやっておくべし!!!

記事に画像をあげるときは最初からできるだけ容量の軽い形にしてアップロードしておくと、長期的に見たときにサーバーへの負荷がかかりにくくなります。また、どの画像をどの記事で使ったのかが分かるようにフォルダで管理しておくと移行の際にとても楽になります。

 

私の場合は、記事をあげた日ごとにフォルダを作り、そこにその日公開した記事に使った画像をすべて入れています。すべてローカルで保管しておけば、移行の際にはてなフォトライフからダウンロードする必要はそもそも無くなるんですよね。今回は、8割の画像をローカルで分かりやすく管理していたので、一括ダウンロードに失敗しても何とかすることができました

 

将来、移行を考えているなら早めに!そうでなければ、少しずつ備えよう

  1. バックアップはきちんと取っておこう!
  2. パーマリンクは早めに設定しておこう!
  3. 独自ドメイン取得していると移行がちょっと楽になる!
  4. 画像の管理は日頃からやっておこう!
  5. 移行するなら「早めに」

移行経験者なら多くの方が「早めに移行した方が良い」と言うと思います。記事が多くなると本当に大変だからです。また、たとえ移行をしなくても①~④のポイントはやっておいて損はない部分です。『いつかのために』備えましょう。

 

今回わたしはWordpressへ移行しましたが、はてなブログのことは変わらず好きです。はてなブログ、Wordpressそれぞれメリットがありますので、自分のスタイルに合わせた選択をし、なおかつ途中で変更できる準備をしておくと良いかもしれませんね

 

みなさんからいただいた感想

さめはだ

android版Chromeのおススメ記事に掲載されたようです!ありがとうございます



移行お疲れ様でした!私もいつかは…と思いつつぬるま湯から抜け出せない。大変さがよく伝わった…画像の軽量化だけでもやっておこうと思った(@8_sumica_8さん)


すごいおしゃれですね(´∀`*)自分も変えたくなる…(@sekibiyou1984さん)


そんなに大変なの!?移行するのはやめよう(@fulogabcさん)


わたしもはてなブログからWordPressに移行したので、すごく共感しました!シンプルに全体の流れがあって、作業のイメージができて読みやすかったです。わたしは詳しい手順を見ながら移行したんですが……専門的?な言葉とか難しかったので(@haruyasai_1881さん)


私はとりあえず200記事移動しましたが、画像はシーサーに置いたまま・・画像urlもシーサーのままです。1記事に10枚は画像あるのでもう手に負えません(@meneki_upさん)


サムネのイラストが本当に可愛いしデザインも可愛いし、なんだろうな。やっぱり、画像にも手をかけるって大事なんだなって改めて!ほんとかわいいサメのぬいぐるみほしい(@umi_ppp51さん)


 

以上、「【はてな→Wordpress】はてなユーザー、“いつかのために”やっておくこと」でした。