先日、1年4か月ほど利用したはてなブログから断腸の思いでワードプレスへ移転しました。
正直な話で、ブログ移転は思ったより大変で、羽田空港サーバーさんの無料サービスを利用するほうがてっとり早いし確実だと思います。(笑)
ただ、ブログ移転は自分でやりたい!という方や、羽田空港サーバーさんの条件に一致しない方(すでにレンタルサーバー契約済みの方、有料テーマ購入済みの方は基本対象外のようです)もいらっしゃると思います。
私が実際にブログ移転した際に、自分の知りたい情報が全て網羅されている記事を見つけることは出来なかったので、これからブログ移転される方の参考になるように、私の実施したブログ移転内容について紹介していきます。
Contents
ブログ移転時の要件
まずは、私のブログ移転要件について簡単に紹介しておきます。
・はてなブログ→ワードプレスへの移転
・はてなブログでは独自ドメインで運用
・ワードプレス移転後も同一ドメインを利用
・レンタルサーバーはすでに契約済みのXServerを利用
・移転前後で同一ドメインを利用するが、移転時には極力影響を与えないようにしたい
・新しいサイトのデザイン等については、移転前に確認・設定しておきたい
・移転時の作業はWindowsのPCで行う
本記事では基本的にレンタルサーバーはXServer、Windowsでの作業を前提で記載していきますので、ご了承をお願いします。
事前準備
独自ドメインの取得
私ははてなブログで利用していた独自ドメインをそのまま利用としたため、今回新たにドメインの取得は行いませんでしたが、独自ドメインを取得していない方はまず運用するブログのドメインを取得する必要があります。必要に応じて独自ドメインを取得しておきましょう。
なお、私はいくつか独自ドメインを取得していますが、全てお名前ドットコムを利用しています。
これをチェックしないと登録した個人情報が掲載されてしまいます。
レンタルサーバーの契約
今回は新規でレンタルサーバーの契約を行いませんでしたが、レンタルサーバー未契約の方はレンタルサーバーも契約しておく必要があります。
ちなみに私はXServerを契約していますが、XServerは、月額900円(税抜き)〜でマルチドメイン無制限、SSL無料であり、動作も安定しているのでお勧めです。
ワードプレスのテーマ選定
続いて、ワードプレスのテーマ選定です。新しいサイトでのデザインは重要です。テーマを途中で変更すると、カスタマイズのやり直しが発生したりとけっこうめんどくさいので、最初に慎重にテーマ選定しましょう。私は前回の記事でも紹介しましたが、有料の「スワロー」というテーマを選択しました。
有料テーマを検討している場合は、デモサイトやそのテーマを利用しているブログなどで実際のデザインを確認するのがいいと思います。私はシンプルなデザインと、トップページタイトル下にあるカルーセルスライダーが決め手でスワローにしました!
作業に必要なソフトのダウンロード
続いて今回のブログ移転作業に使用したWindowsのフリーソフトのダウンロードです。どのようなツールを利用したかの紹介も含めてこの章でダウンロードとしていますが、もちろん実際に使用する際にダウンロードでも全く問題ありません。
Sakuraエディタ
非常に使いやすい定番の日本語のテキストエディタです。正規表現を利用してURLを一括置換するのと、修正漏れがないかを一括検索するために利用しました。
ファイル、Webサイト等の一括ダウンロードを行うツールです。はてなブログで使用している画像ファイルをダウンロードするのに利用しました。
定番のファイル転送ソフトです。ダウンロードしたはてなの画像ファイルをXServerにアップロードするのに利用しました。
はてなブログ記事のエクスポート
さて、ようやくここからブログ移転作業開始です。まずは、はてなブログから記事をエクスポートします。
管理画面から「設定」→「詳細設定」を選択します。
「記事のバックアップと製本サービス」を選択します。
すでに過去にバックアップ取得したことがある方は、「エクスポートしなおす」→「ダウンロードする」の順で選択し、ファイルを保存します。(初回は「エクスポートしなおす」ではなく、「~のブログをエクスポートする」で表示されると思います。)
なお、私は230記事くらいありましたが、ダウンロードしたファイルは6Mbくらいで、ダウンロードは一瞬で終わりました。
画像ファイルのダウンロード
はてなブログの記事のエクスポートではあくまで記事本文のみとなり、記事内で利用している画像ファイルはエクスポートされません。画像ファイルははてなフォトライフに保存されており、移転先のブログでもその画像ファイルを参照することができるため、こだわりがない場合は画像ファイルのダウンロードはしなくても問題ありません。
ただ、移転先のワードプレスで使用している画像ファイルがはてなフォトライフ参照というかたちになり、あまり好ましくはない状況となるため、私は以下のサイトを参考にさせていただきながら、DSダウンローダーというツールを利用して、画像ファイルをすべてダウンロードしました。
本当は本記事内で、手順を紹介しようと思いましたが、画面キャプチャを取り損ねたので割愛します。
XServer(レンタルサーバー)の設定
続いてXServerの設定です。事前準備で用意した独自ドメインを設定し、ワードプレスをインストールしていきます。
XServerにドメイン追加
XServerのサーバーパネルから、「ドメイン設定」を選択します。
利用するドメイン名の入力を行い、「ドメイン設定の追加(確認)」をクリックして追加作業を進めていきます。
ちなみに、このタイミングでは私は「無料独自SSLを利用する」にはチェックをつけませんでした。その理由としてはネームサーバーを切り替えず(はてなブログにアクセスされる状況のまま)に作業していることによる影響がよく分からなかったのと、ブログ移転とSSL化を同時に実施するのは何かあった場合に問題の切り分けが難しくなるためです。新規にドメインを取得してXServerにドメインを追加する場合はSSL化は同時に実施でよいと思います。
こちらも追加時の画面キャプチャをとるのを忘れてしまっていますが、これ以降の画面では特に迷うところはなかったと思います。
ワードプレスのインストール
続いて追加したドメインに、ワードプレスをインストールします。
サーバーパネルから「自動インストール」-「プログラムのインストール」-WordPress日本語版の「インストール設定」を選択します。
必要情報を入力して「インストール(確認)」を選択します。
入力した内容を確認して「インストール(確定)」を選択することでワードプレスのインストールが開始され、すぐに完了します。
ワードプレスのローカル作業環境の構築
この時点ではドメインのネームサーバーの設定変更を行っていないため、XServerに追加したドメインはまだはてなブログに紐づいたままです。
その場合、ワードプレスの管理画面を開こうとしても、はてなブログのほうにアクセスしてしまい、管理画面を開くことができません。かといって、今の段階でドメインのネームサーバーの変更をしてしまうと、中途半端な状態でワードプレスにアクセスされてしまうことになるため、まだネームサーバーの変更はしたくありません。
そこで、自分の作業用パソコンだけ、接続先をXServerに変更するようにします。具体的にはシステム開発経験者には馴染みあるhostsファイルを設定し、独自ドメインでアクセスした際にはてなブログではなく、ワードプレスの入っているレンタルサーバーにアクセスするようすることで、ワードプレスの管理画面を開くことが出来るようになります。
hostsファイルの設定変更する前に、まず、XServerのアクセス先のIPアドレスを調べます。サーバーパネルの「サーバー情報」からIPアドレスを確認します。
確認出来たら、そのIPアドレスとドメインをhostsファイル(C:\Windows\System32\drivers\etc\hosts)に追加します。
XServerのIPアドレス(半角スペース)ドメイン名として入力してください。私は念のため、wwwありとwwwなしの2つを登録しておきました。例えば、IPアドレスが202.254.100.100の場合は以下のような感じで設定します。
202.254.100.100 ana-mile-first.com
202.254.100.100 www.ana-mile-first.com
こうしておくことで、例えば、自分のPCからワードプレスの管理画面にアクセスした場合に、「www.ana-mile-first.com」の宛先をhostsに指定したXServerのIPアドレス(上記の例では202.254.100.100)に変換してアクセスしにいき、ワードプレスの管理画面を表示することができます。
hostsの設定を行っていないPCやスマホからアクセス使用したした場合は、ネームサーバーの設定に従ってはてなブログのサーバーにアクセスしにいき、ワードプレスの管理画面を表示することはできません。
なおhostsに登録しないで、ブラウザから「http://202.254.XXX.XXX/wp-admin/」と入力してアクセスできるかどうか試してみましたが、無効なURLと表示されてアクセスできませんでした。(XServer側でどのドメインに対してのアクセスか判断できないので当然ですね)
ワードプレスのテーマの設定
上記手順でワードプレスの管理画面を表示出来るようになったら、続いてワードプレスのテーマのインストール&設定です。
私の場合は有料テーマのスワローを購入しましたので、テーマ購入時にダウンロードしたzipファイルをワードプレスにインストールします。
ワードプレスの管理画面より「外観」-「テーマ」を選択し、「新規追加」を選択します。
「テーマのアップロード」を選択し、予めダウンロードしたテーマのzipファイルを選択して、「今すぐインストール」を選択することで、テーマのインストールが完了となります。
ただ、このままインストールしたテーマを有効にした場合、テーマがアップデートした時に、そのテーマに対してカスタマイズした設定が初期化されてしまうため、子テーマをインストールしてそちらを有効にするのがよいみたいです。
通常子テーマは自分で作成する必要があるようですが、スワローについてはOPEN CAGE社から提供されているため、そちらをダウンロードして、同様にテーマをインストールしました。
子テーマをインストールしたら、そちらを有効化して設定完了です。
画像ファイルアップロード
続いてはてなフォトライフからダウンロードしていた画像ファイルを、移転先のサーバにアップロードします。
※はてなフォトライフの画像をそのまま参照させる場合は不要です。
画像ファイルアップロード
まず、ファイルをアップロードさせるのに必要なのは以下2点です。
・FTP情報
・ファイル転送ソフト
FTP情報については、XServer契約時に送られてくるメールに、FTPホスト名、FTPユーザ名、FTPパスワードが記載されていますので、そちらを確認してください。見つからない場合はサーバーパネルから確認しましょう。(サーバーパネル-「FTPアカウント設定」-対象ドメイン「選択する」-「FTPソフト設定」を見れば記載されています)
ファイル転送ソフトは「FFFTP」というソフトを利用しました。インストールは初期設定のまま行えばいいので、画像での紹介は割愛します。
では、ファイルをアップロードしましょう。まずはFFFTPを起動し、「接続」を選択します。
続いて「新規ホスト」を選択します。
FTPの接続情報を入力し、「OK」を選択します。
ホストの設定名:任意
ホスト名:FTP情報で確認した内容
ユーザ名:FTP情報で確認した内容
パスワード:FTP情報で確認した内容(パスワード変更していれば変更後のパスワード)
ホスト情報が追加されるため、そちらを選択して「接続」を選択します。
接続されたら、左側が自分のPCの情報、右側がサーバ情報となります。
左側のフォルダで、はてなフォトライフからダウンロードした画像が格納されているフォルダへ移動します。
右側のフォルダで「/ドメイン名/public_html/wp-content/uploads」へ移動します。(uploadsフォルダ配下に新しいフォルダ作成しても問題ありません。私はimportというフォルダを作成して、そちらに格納しました。)
上記状態で左側のフォルダの一覧で全選択(Ctrl+A)し、右側のフォルダの一覧にドラッグすれば、ファイルをアップロードすることができます。
画像ファイルメディア登録
画像ファイルをアップロードしましたが、ファイルアップロードするだけでは、URLを直接指定することで画像ファイルを参照することはできても、ワードプレス内で画像を管理しているメディアライブラリからは参照することはできません。
そこで、「Media from FTP」というプラグインを利用して、アップロードした画像ファイルをメディアライブラリに反映しました。プラグインの設定画面で「検索&登録」を選択すると登録対象の画像が表示されるので、全件チェックして「メディアを更新」を選択すれば完了です。
なお、デフォルトでは1ページの表示件数が20件となっており、対象画像が多い場合は一度に登録することができません。その場合は、画面右上の「表示オプション」から1ページの表示件数を増やして実施して下さい。(私は気づかずに20件×100ページ分以上手動で登録した後に気づきました…。)
また、メディアのデフォルト設定では自動で年月ベースのフォルダに振り分けられるようになっています。画像ファイルが自動でフォルダ振り分けされることを避けたい場合は、メディアの設定を変更してから実施してください。
ワードプレスの設定(記事移行前)
はてなからエクスポートした記事をワードプレスにインポートする前にいくつか設定しておきます。
ユーザ設定
ユーザ設定はいつ実施してもいいのですが、ユーザ名がそのまま表示されるのは好ましくないため、忘れないうちにニックネーム、ブログ上の表示名を変更しておきましょう。
パーマリンク設定+リダイレクト設定
続いてパーマリンク設定です。はてなブログの場合、URLは以下の2通りあります。
カスタムURL:http://www.ana-mile-first.com/entry/指定した名称
カスタムURL以外:http://www.ana-mile-first.com/entry/2018/02/17/073000
何も考えずにはてなの記事をワードプレスにインポートすると、パーマリンクの設定に従って自動でURLが変わってしまいます。既存記事へのリンクがある場合、リンクエラーで「Not Found」となってしまうため、パーマリンクの設定&リダイレクトの設定を行います。
まずは、パーマリンク設定でカスタム構造とし、「/entry/%postname%」を設定しました。
こうすることで、はてなブログのカスタムURLと同じURL構成となり、カスタムURLの記事をインポートした際にURLが完全に一致します。
ただ、カスタムURL以外の記事をインポートした場合はURLが「http://www.ana-mile-first.com/entry/2018-02-17-073000」というように変更されてしまうため、元のURLでアクセスされた際にはリンクエラーとなってしまいます。そこで、Redirectionというプラグインを利用してリダイレクト設定を行います。(正規表現を利用してリダイレクトできるプラグインなら他のプラグインでも可能です)
・ソースURL:/entry/([0-9]{4})/([0-9]{2})/([0-9]{2})/([0-9]{6})
・ターゲットURL:/entry/$1-$2-$3-$4
・正規表現にチェック
正規表現の内容は詳しくは調べてもらえればと思いますが、上記設定をすることで「/entry/数字4桁/数字2桁/数字2桁/数字6桁」の場合に「/」を「-」に変更してリダイレクトしてくれます。
ブログカード設定
はてなのブログカードはPz-LinkCardというプラグインを利用して表示させることにしましたので、あらかじめPz-LinkCardのプラグインをインストールして有効化しておきました。Pz-LinkCardの設定はググればたくさん出てくるので、そちら参照ください。
リダイレクト設定
これは後日リンクエラーとなっていて気づいたのですが、過去記事に対してアーカイブのurlも存在し、そのurlに対してのリンクが「Not Found」となっていたため、Redirectionに以下も追加しておきました。
・ソースURL:/archive/(.*)
・ターゲットURL:/entry/$1
・正規表現にチェック
この設定を入れることで「/archive/…」を「/entry/…」に変更してリダイレクトします。
エクスポートした記事の編集
続いて、はてなブログからエクスポートした記事の編集です。
エクスポートした記事をワードプレスにインポートしてから、プラグインを利用して一括編集することも可能ですが、事前にテキストファイルで編集したほうが楽で分かりやすいので、私ははてなブログからエクスポートした記事をコピーして、編集を実施しました。
全てsakuraエディタで編集することを前提で記載していますので、他のエディタなど利用する場合は適宜読み替えてください。
見出しタグの編集
はてなブログの場合は見出しのタグが1つずつずれているため、まずは見出しのタグを修正します。Ctrl+Rで置換ウィンドウを表示し、以下の順に一括で置換を行っていきます。
<h3> → <h2>
<h4> → <h3>
<h5> → <h4>
</h3> → </h2>
</h4> → </h3>
</h5> → </h4>
画像URL置換
続いて画像ファイルのURLの置換を行います。はてなフォトライフの画像をそのまま利用する場合は、実施する必要はありません。
Ctrl+Rで置換ウィンドウを表示し、以下で全て置換を行います。
・置換前:https://cdn-ak.f.st-hatena.com/images/.*/[0-9]{8}/(.*.jpg)
・置換後:http://(対象のドメイン名)/wp-content/uploads/2018/02/$1
・正規表現にチェックを入れる
具体的なイメージとしては、以下のような置換を行います。
https://cdn-ak.f.st-hatena.com/images/fotolife/s/sfc-mile/20180211/20180211005125.jpg
→
http://www.ana-mile-first.com/wp-content/uploads/2018/02/20180211005125.jpg
ブログカード置換
続いてブログカードの置換を行います。Pz-LinkCardプラグインを利用する想定であるため、ブログカードをPz-LinkCardプラグインの記述にあわせた形式に置換します。
・置換前:<p><iframe class=”embed-card embed-blogcard”.*href=”(http.*)”>.*
・置換後:blogcard url=”$1″
※置換後の最初と最後には[]をつけてください。ここでは、ブログカードになってしまうため外して記載しています。
・正規表現にチェックを入れる
具体的なイメージとしては、以下のような置換を行います。
<p><iframe class=”embed-card embed-blogcard” style=・・・・<cite class=”hatena-citation”><a href=”http://www.ana-mile-first.com/entry/2016/07/01/003013″>www.ana-mile-first.com</a></cite></p>
→
blogcard url=”http://www.ana-mile-first.com/entry/2016/07/01/003013″
※実際はblogcardの最初と最後に[]が付きますが。ここでは、ブログカードになってしまうため外して記載しています。
ただ、私の場合は、はてなブログの時のブログカードが変な記載となっていてうまく置換されないものもあったため、置換内容に問題がないか確認しました。Ctrl+GでGrepウィンドウを表示し、現在編集中のファイルから「blogcard」が含まれるものを抽出します。
抽出した一覧の中で、うまく変換されていない行については、手動で直接修正していきました。(該当行をダブルクリックして、実際のファイルの該当行を表示してから、修正します)
なお、私は本記事執筆中に気づいたのですが、はてなのブログカードは、「<p><iframe class=”embed-card embed-blogcard” ~」というパターンの他、「<p><iframe class=”embed-card embed-webcard”~」というパターンもあったのですね。ブログカードの表示は崩れなさそうなので特に変換しなくても問題はないと思いますが、
・置換前:<p><iframe class=”embed-card embed-blogcard”.*href=”(http.*)”>.*
としているところを
・置換前:<p><iframe class=”embed-card .*href=”(http.*)”>.*
とすれば、「<p><iframe class=”embed-card embed-webcard”~」のパターンも含めて一括置換が出来るかと思います。
内部リンクの変更
続いて記事内の内部リンクのURL修正を行います。ワードプレスのプラグインを利用してリダイレクト設定も行っていますが、内部リンクについては正しいURLに変更しておきます。
Ctrl+Rで置換ウィンドウを表示し、以下で全て置換を行います。
・置換前:(http://www.ana-mile-first.com/entry/[0-9]{4})/([0-9]{2})/([0-9]{2})/([0-9]{6})
・置換後:$1-$2-$3-$4
・正規表現にチェックを入れる
編集者の修正
続いて編集者の修正を行いました。特に変更しなくても問題ありませんが、はてなIDのままとなっている部分を自分のニックネームに変更します。私の場合は以下変更を行いました。(変更しない場合は記事内やコメントではてなIDが表示されることになります。)
1つ目。
・置換前:f:id:sfc-mile:
・置換後:id:jp:
2つ目。
・置換前:AUTHOR: sfc-mile
・置換後:AUTHOR: jp
編集した記事をワードプレスにインポート&確認
いよいよ終盤に差し掛かってきました。続いて、編集した記事をワードプレスにインポートします。
ワードプレス管理画面の「ツール」-「インポート」を選択し、「Movable Type と TypePad」の「インポーターの実行」を行います。
※初めてインポートを行う際は、「今すぐインストール」を選択してインポーターをインストールしてから「インポーターの実行」を行ってください。
「参照」を選択して、インポートする記事を選択した後「ファイルをアップロードしてインポート」を選択してインポートします。
インポートが完了したら、画面表示やリンクを確認してください。ただし、この時点ではアイキャッチの設定はまだ行っていませんので、アイキャッチは表示されません。
ワードプレスの設定(記事移転後)
ここからは記事移転後の設定について紹介します。が、疲れてきたので、移転に直結しないものの詳細は極力割愛します!(笑)
アイキャッチ設定
記事のインポートと確認が完了したら、まずアイキャッチの設定を行います。1枚目の画像を自動的にアイキャッチに設定する「auto post thumbnail」というプラグインが有名で、これを利用すればだいたいアイキャッチが自動設定されそうです。
が、私の場合は何故かアイキャッチをほとんど設定してくれなかったので、だいたい手動で設定しました。(自動設定がされなかった点について、いろいろ思い当たるふしはあるのですが、確証はないため理由の紹介は控えます)
アイキャッチを設定する際、1つずつ記事を編集してアイキャッチを設定して保存していくというのは面倒なので、「Easy Featured Images」というプラグインを利用し、投稿一覧の画面から1つずつアイキャッチを設定していきました。投稿一覧の画面から直接アイキャッチを設定できるので、作業はかなり楽になります。エクスポートした記事をsakuraエディタで開き、記事で使用している画像ファイル名を確認しながらアイキャッチ設定するのがやりやすかったです。(1つのアイキャッチ設定に15秒~20秒とかそのくらいでしょうかね)
ただ、この「Easy Featured Images」プラグインを有効にしたまま、スマホで投稿記事一覧みたら見た目がかなり悪かったので、利用後は無効にしたほうがいいかもしれません。(設定で回避出来るかは調べてません)
デザイン設定
サイドバーやウィジェット、タイトルなどお好みにあわせて修正しましょう。このあたりは移転というよりワードプレスのデザインの話なので本記事では割愛します。お好きに設定してください^^;
リンク切れ確認
Broken Link Checkerというプラグインを利用して、リンク切れを検出しています。ブログ移転時には必須のプラグインだと思います。
SEO関連
All in One SEO Pack
スワローはSEOはあまり強くなさそうでしたので、定番のAll in One SEO Packプラグインを利用しました。SEO関連の設定をしておきましょう。使い方はぐぐってください。(GoogleAnalyticsの設定などはドメインのネームサーバーの切り替えを行ってからの実施になると思います。)
Jetpack
統計情報の取得のためにJetpackというプラグインを入れています。また、これも羽田空港サーバーさんの記事で知ったのですが、Jetpackはツイッターのアイキャッチ設定にも利用できるとのことで、私も設定してみました。
はてなブックマークの転送
Hatena Connectというプラグインを利用してはてブの通知を行っています。これも羽田空港サーバーさんの記事をどうぞ。笑
記事編集用プラグイン
記事を編集しやすくするため、TinyMCE AdvancedというプラグインとAddQuicktagというプラグインをいれてみました。まずまずいいプラグインではないかなと思います。なお、私の利用しているスワローのショートコードは、以下よりダウンロードして、AddQuicktagにインポートして利用することができます。
ショートコードの使い方
DNS設定(正式移転)
さて、ここまでくればだいたい準備は整ったと言えるでしょう。いよいよドメインのネームサーバーの設定です。私はお名前ドットコム利用ですので、そちら前提で説明していきます。
XServer用のDNS設定
まずはDNS設定を行い、今回利用する独自ドメインをXServerに関連づけます。
お名前ドットコムにログインし、「ドメイン設定」-「ネームサーバーの設定」を選択します。
対象ドメインを選択して手続きを進めます。
対象ドメインが選択されていることを確認し、「他のネームサーバーを利用」タブを表示し、ネームサーバーを入力します。それぞれ「ns1.xserver.jp」~「ns5.xserver.jp」を入力していけばよいと思いますが、こちらはXServerのサーバーパネルから「サーバー情報」を選択すると確認できるので、念のためそこで確認しましょう。
入力情報を確認して「設定する」を選択して終了です。
はてな用設定の無効化
必要かどうか分かりませんでしたが、以前はてな用として登録していた設定を無効にしておきました。
「ドメイン設定」-「DNS関連機能の設定」を選択します。
対象ドメインを選択して手続きを進めます。
「DNSレコード設定を利用する」を選択します。
はてなブログの設定部分を「無効」に設定し、確認画面に進みます。
入力情報を確認して「設定する」を選択して終了です。
はてなブログの独自ドメイン削除
続いてはてなブログの独自ドメインの設定を削除します。「設定」-「詳細設定」で、独自ドメインの入力部分を削除して設定を変更すればOKです。
はてなブログからのリダイレクト
またまた、羽田空港サーバーさんの記事ですが(笑)、はてなブログからワードプレスへリダイレクト設定するのがよいです。
はてなブログにリダイレクト設定を仕込んでおき、ワードプレスで書いた記事を、はてなブログ(はてなドメイン)でも同一カスタムURLで投稿することで、はてなブログの読者にブログ更新通知がいき、記事を開くとワードプレスの記事へリダイレクトされて表示されるというものです。
はてなブログで読者になって下さった方にブログ更新を通知したい場合は、設定しておきましょう!
ローカル作業環境の戻し
DNS設定を行ったことにより、ローカル環境以外からも移転先のワードプレスのサイトにアクセスされ始めるようになります。
ただ、自分の作業用PCはhostsの設定変更で強制的にXServerへアクセスするようになっているので、hostsの追加した設定は削除するか、追加した行をコメント(先頭に#をつける)しておきましょう。
なお、環境によって切り替わりの時間が変わってくるので、hostsを戻すタイミングは適当に見計らって実施してください。私の場合は、スマホからは1時間もたたずに新サイトにアクセスできましたが、PCのほうはなかなか切り替わりませんでしたので、hostsの設定はその日はそのままにして翌日に戻しました。
動作確認&修正
後は動作確認です。ローカル環境のときに確認しながら作業していると思いますが、私は以下観点で再確認し、おかしいところ、気になるところについては修正しました。
・PCとスマホからアクセスしてのデザイン確認
・カスタムURLだった記事へのアクセス確認
・カスタムURL以外だった記事へのアクセス確認
・アーカイブのURLへのアクセス確認
・はてなブログの記事を表示させてのリダイレクト確認(PCとスマホ)
・内部リンクの表示、動作確認
・ブログカードの表示、動作確認
サイトのSSL化
はてなブログからワードプレスへの移転がおおむね大丈夫そうだったのを確認してから、すぐにSSL化を実施しちゃいました。
XServerのSSLを設定
まずはXServerでSSL設定を行います。サーバーパネルの「SSL設定」を選択します。
対象のドメインを選択します。
「独自SSL設定の追加」タブを選択し、「独自SSL設定を追加する(確定)」を選択します。
あとは申請が完了するのを待つのみです。簡単ですね。
サイトURLをSSLに設定
「https://~~」でアクセス可能になったことを確認してから、サイトURLをSSLのURLに設定します。
ワードプレスの管理画面から「設定」-「一般」を選択し、WordPressアドレス、サイトアドレスをhttpsのURL変更すればOKです。
URL修正(内部リンク)
続いてSearch Regexというプラグインを利用して、内部リンクの「http://」を「https://」に一括変更します。検索、置換対象のpatternを入力して、「Search」を選択すると、検索対象の文字列が表示されまs。
・Search pattern:http://www.~(サイトアドレス)
・Replace pattern:https://www.~(サイトアドレス)
検索対象の文字文字列を確認して「Replace」を選択すると、置換イメージが表示されます。(画像は取得ミスで、「Replace」を選択した時の画像はありませんでした…)
最後に「Replace&Save」を選択すると、全てhttpsのアドレスに置換してくれます。
httpでアクセスされた場合のリダイレクト(外部リンク)
今まではhttpで運用していたため、他外部サイトや検索エンジンの検索結果ではまだhttpのままとなっています。httpでアクセスされた場合にhttpsにリダイレクトするようにしておきます。
XServerのサーバーパネルの設定で行います。サーバーパネルから、「.htaccess編集」を選択します。・
続いて該当ドメインを選択します。
「.htaccess編集」タブを選択し、以下を入力して、「.htaccessを編集する(確定)」を選択すれば、httpからhttpsへのリダイレクトは完了です。
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>
自分のサイトにhttpでアクセスして、httpsにリダイレクトすればOKです。
最後に
はてなブログからワードプレスに移転して実施したことはだいたいこんな感じでしょうか。
途中から本記事の執筆に心が折れかかってきて、ちょっと雑になっている部分もありますが、ご了承いただけると助かります。もう少し丁寧に説明したほうが良い場所や何か思いついたことについては随時更新していきます。
ブログ移転はかなり大変でした。調べながらやってですが、ブログ移転に20~30時間くらいかかったのではないでしょうか?今回の移転でやったことをなるべく紹介してきましたが、本記事を見ながら同じことだけやっても数時間はかかってしまうと思うので、移転を実施してみようという場合は心して取り組んでください!!
以上、ワードプレスとなっても、今後ともブログをよろしくお願いします(^^)/