ひとりごと marronroy

初心者の私にもできた！はてなプロからワードプレスに移行した手順（2017年秋）

少し前からちょくちょく耳にしていた（というかネットで見ていた）サイトのSSL化。知っています？

なんでも、今年の10月からSSL化していない特定サイトに警告が出るんだとか・・・「へーそうなんだー」と、最初は完全に他人事だったんですよね。だって、このブログは特定サイトではないから（笑）。そもそもSSLのことすらよくわかっていなかったし（苦笑）。

SSL化されたサイトは、アドレスバーに表示されるサイトアドレスの頭に鍵マークがついているんですよね。銀行のサイトや大手ショッピングサイト（楽天・Amazonなど）には必ずついているやつです。

それが付いているサイトはセキュリテー面が安全ですよという証。なので、暗証番号などを打っても安心なのです。

ところが、長期的にはSSL化していないサイトの全てに警告を出すという計画らしく、このブログにもそのうち出るようになるらしい・・・。それなら早めに対応しておこうか、なんて軽い気持ちで始めてしまったのですよ・・・SSL化を。

まあこれが、大変な10日間を過ごすはめになった理由なのですが、途中で何度も後悔しつつなんとか頑張りましたよ・・・（苦笑）。

今日は、そんな超初心者の私が10日間で移行した手順をご紹介したいと思います。

いろいろ調べても「その先が知りたいのに！」とか「ええー情報が古いよ！」とか、「いやいや、そこをはしょらないでよ！」などとかなり困ったので、同じように困っている人の参考になればな・・・と備忘録的に残すことにしました。

基本情報
  • はてなプロで独自ドメイン（お名前com）を使っていた。
  • 独自ドメインを変更せずにSSL化したい。
  • エックスサーバーを利用し、カスタマイズが自由なワードプレスを使いたい。

やりたかったことは、これだけなのです。

ところが、これだけのことをするのに問題は山積みで・・・（泣）。壁に打ち当たりながらの移行となりました。とにかく、私の苦労話よりも実際にどうやったのかが重要なので、細かい部分（苦労）は私もはしょります（笑）。詳細に書いているサイトがたくさんあるので、必要な部分はググって探してください。きっと私が文章で書くよりはるかにわかりやすいと思うので。

実際にやったことは以下になります。

  1. サーバー契約
  2. はてなの記事を修正
  3. 公開せずに作業ができるワードプレスを準備
  4. はてなの記事のエクスポート＆インポート
  5. ドメインの移行
  6. はてなブログ削除
  7. サーバー内でのSSL化実行

１.サーバー契約

まずは、ワードプレスを利用するために必要なサーバーの契約をしました。

独自ドメインで利用しているお名前comでもサーバー利用はできるのですが、初心者でも使いやすいと評判で、SSL化を無料でしてくれるエックスサーバーを選びました。実はこの選択が後に功を奏したのですよ（笑）。

２.はてな記事を修正

これが、調べても調べても誰もが大変！！と言っていることで、本当にその通りでした。なぜかというと、はてなからワードプレスに移行するにはどうしても修正が必要だからです。ただ、私の場合は記事アドレスをカスタマイズしていたため、それに関する超面倒な作業は省くことができました。

なので、実際にやった作業は、記事内に貼付けていたはてなオリジナルの『過去記事カード』（囲いの中に画像付きの過去記事が載っているやつです）を全て通常のテキストリンクに変更するというものでした。

果てしない・・・この言葉がピッタリな作業でしたよ（笑）。

３.公開せずに作業ができるワードプレスを準備

こんなことができるの？ということに気付くまでが長かったのですが・・・（苦笑）、ありとあらゆるサイトで情報を集めてやりました。

ところが後でわかったことですが、エックスサーバーの管理画面にしっかりその方法が書いていたのです！まあ、初心者の私がそれを読んでも最初は理解できなかったと思いますけどね。

ではいきますよー。まずはエックスサーバーに自分のドメイン（はてなで使っている同じドメイン）を追加してワードプレスを自動ダウンロードしておきます。

次にダウンロードしたワードプレスを公開せずに作業をするために、自分のPCのhosts設定をします。エックスサーバーには動作確認urlというものがあるのですが、こちらはどんな風にサイトが仕上がっているのかを確認することはできますが、作業はできません。なので、私がやりたかったこと（公開しない状態でサイトを調整すること）をするためには、hosts設定をしなければいけないのです。

このhosts設定をしないと、いつまでもはてなにしかアクセスできず、肝心のワードプレスの管理画面に入ることはできません。まあ、これもやり方がわからず探しまくりましたけどー。まずMacのhostsファイルがどこにあるかさえわかっていませんでしたから（苦笑）。

とりあえず、見つけたhostsファイルに自分のドメインとエックスサーバーのIPアドレスを入力して保存。これでやっとワードプレスにログインして新しいページを編集できるようになったのです。

ワードプレスの管理画面に入れたら、まずは設定→表示設定→検索エンジンの表示にチェックを入れて変更保存しました。万が一インデックスされるとはてなにも同じ記事が存在するので重複とみなされてしまいます。でもおそらくこの作業はサーバーをまだ切り替えていないので必要ないと思うのですが、念のためしておきました（笑）。

４.はてな記事のエクスポート＆インポート

さて、いよいよ記事の移動です。

はてなの記事修正が終わったことを確認したら、エクスポートします。これははてな管理画面の設定からバックアップを取るだけなので簡単でした。

ワードプレス側のインポートも簡単でした。ダッシュボード内のツールからインポートを選択し、Movable Type と TypePadというシステムをインストールして実行するだけです。完了すると、はてなにあった記事が全て移動されている状態になりました。

ここからが、もうひとつ果てしない作業がありまして・・・。それはワードプレスにあるアイキャッチ画像の設定です。はてなで選んでいたアイキャッチ画像はそのまま移行することができません。なので、手作業でするしかないのです（泣）。記事内１番目の画像をアイキャッチ画像に自動でやってくれるプラグインはあるようですが、私のブログでは必ずしも１番目の画像を設定していたわけではないので使いませんでした。

というわけで、またまた果てしない作業をコツコツやったわけです。具体的には、はてなフォトライフに入っている画像をワードプレス側にアップロードし直すという作業で。これを一括でできないものかと探してみましたが、完璧にうまくできそうだなと思えるものがなかったため諦めて地道にやりました。

５.ドメインの移行

やっとの思いで作業が終わり、といっても完全じゃないですよー！まだまだ残ってはいるのですが引越しはできる状態になったので、いよいよドメインの移行です。もちろん移行するときは、はてな側の独自ドメイン設定を先に解除しています。

ところが！この移行作業でひとつミスをしてしまったので、不安な一夜を過ごすはめになりました。

そのミスとは？

ネームサーバー登録をしたのに、はてな側の設定を外すときに余計なチェックを入れてしまい、何時間か経ってからネームサーバーがお名前comになってしまって、ワードプレスのサイトが存在しなくなってしまったのです（泣）最初は原因がわからずアタフタ。なにをやらかした？と作業を順番にたどることになりました。で、結局ミスを見つけて再びネームサーバーの設定をやり直したのです。

ここで気になったのがはてな側の設定のこと。いろいろ調べるとしっかりと外しておかないといけないと書かれたサイトもあり、外すためには失敗した作業を再度しなければならず、同じ過ちを犯したくないので、ここはプロに聞こうと、次の日にお名前comのカスタマーセンターに問い合わせてみました。

すると、ネームサーバーが変更されているので、はてな側の設定は放置していても問題ないとのことでした。あくまでも繋がっている方を優先するので他に何が書いてあっても関係ないらしいです。ああ、すっきりした（笑）！！

そして、長くて数日かかるのですが、しっかりとドメインが移行して自分のブログがワードプレスで完全に表示されるようになったことを確認してから次の作業にかかりました。

６.はてなブログの削除

はてなでは、独自ドメインを外すとサイトを訪れた人に自動でリダイレクトして無料アドレスのブログに案内してくれます。つまり、アドレスははてなの無料アドレスだけれど、中身は独自ドメインで作っていたサイトというわけ。

この状態では、中身は同じなのに新しく作ったワードプレスとはてなブログの両方存在することになります。なので、はてなを削除しないとワードプレス側がコピーブログと判断される危険もあるのです。

ここで、数年お世話になったはてなブログとさようならです。結構苦労してカスタマイズしていたので、なんとなく寂しい気持ちになりましたけど。ばっさり削除いたしました。

７.サーバー内でのSSL化実行

やっとここで、初期の目的SSL化への作業が始まります。ここでひとつ助かったことは、エックスサーバーを選んでいたこと！

エックスサーバーでは、FTPソフトを使わずとも.htaccessファイルの編集ができるのですよ！！すごい！今回いろいろ調べている中で、FTPソフトの作業がたくさん出て来たのですが、うまく使う自信がなくて困ったなーと思っていたのです。

ところが昨年、エックスサーバーが.htaccessファイル編集をサーバーパネル内でできるようにしてくれていたことを知りめちゃくちゃうれしかった（笑）！（これが先に書いた功を奏したことです）このファイルでなにをするかというと、httpのアドレスに来た人を自動でhttpsにリダイレクトするように設定するのです。

これが終わると、最初にワードプレスの設定→一般設定からアドレスをhttpsに変更します。次にブログ記事のアドレスを全てhttpsに変更する作業が必要です。これまた苦労したのですが・・・（苦笑）。本来あっという間にできる作業なのですが、その作業だけでは完全なSSL化はできない場合もあるのです。やって初めて知りました。

アドレスバーのアドレスはhttpsになっているのに、GoogleChromeだと緑の鍵マークアイコンが表示されないのです。それはサイト内にhttpsになっていないアドレスが含まれている場合が多く、私の場合もそうでした。いわゆる

混在するコンテンツ（Mixed Content）

というやつです。これは、httpで配信されているものが含まれているという警告なのです。

通常作業としては、ワードプレスにSearch Regexというプラグインを入れてhttpアドレスをhttpsに一括変換すればOKなはず・・・だったのですが、１回ではダメでした。あっという間に終わるはずだったのにーーという感じ（笑）。

次に、ブログ内でリンクを貼ったアフィリエイト関連をチェックしました。そこでhttpを見つけこれもSearch Regexで一括変換。これでようやくOKかと思いきやダメでした。

ここで行き詰まり、どうやってhttpアドレスを探せば良いのかわからず調べまくりました（苦笑）。そして見つけたのがGoogleChromeのセキュリティパネルというもの！！

これを使うとなにがhttpのままなのかが確認できるのです。私の場合は２枚の画像でした。（セキュリティパネル下部に赤で表示されます）なので、その画像を削除するとクリア！やっと鍵マークが表れましたーー！

やれやれです。やっと終了ですよーー！

 

いやーー、ざっと書き出しましたがこれだけの作業に10日かかっているのです。途中の作業や調査などは本当に大変でした。もう２度としたくないですよー（笑）。今は半分笑い話ですが、やっている最中は死ぬ思いでやっていました。

なので、同じようにどうすれば？と思っているひとのお役に立てればうれしいです。いろいろとはしょって書いていますが、はしょった部分はググるとすぐ出てきますのでそちらで確認くださいませ（笑）。

でもね、まだ画像がはてなフォトライフに残っているのですーー（苦笑）。画像の移動作業はまだまだ続きそうです。とほほ。

追記

1,400枚ほどあった画像の移動作業が、ようやく終わりました。やっとです（苦笑）。（2018.3）・・・長かったーーー。