はてなブログからWordPressに移転する際に参考にしたサイトまとめ。

移転ネタは続くよどこまでも。

先日、当ブログは「はてなブログPro」から「WordPress」に移行しました。移行作業に掛かった時間は約3日。さまざまなサイトを参考にして、いろいろと試行錯誤しながら、自分の環境に合わせて作業を行いました。

このエントリーでは、その「移行作業」の際に参考にしたサイトをまとめておきたいと思います。ほぼ自分用のまとめです。でも誰かの役に立つといいなー！

1 当ブログの環境について
- 1.1 サーバー・ドメインどちらも「さくら」です
2 移行作業を追いながら参考サイトをピックアップ
3 まとめ

当ブログの環境について

一口に「WordPress」といっても、インストールしているサーバーや契約しているドメイン管理会社は人それぞれ。まずは前提条件として、当ブログを管理している環境を記しておきます。

サーバー・ドメインどちらも「さくら」です

当ブログでは、サーバーもドメインも「さくらインターネット」で契約しています。契約内容は以下。

サーバー：「さくらのレンタルサーバー（スタンダード）」月額515円
ドメイン：取得・管理とも「さくら」年額1,852円

当ブログでは、「はてなブログPro」でブログを書いていた時代から、今と同じ「starrrrr.com」という独自ドメインを使っていました。ブログの開設と同時に、さくらでドメインを取っています。

実は、サーバーは「はてな」でブログを開設する前から契約しています。というのも、当初はWordPressでブログを作ろうかと思っていたのですが、あまりにも初心者すぎて分からないことだらけで挫折してしまい、仕方なく「はてなブログPro」で開設したのです。

このような経緯があり、サーバーは契約したままになっていました。ほぼメール専用サーバーと化していたところに、今回新たにWordPressをインストールした、というわけです。

移行作業を追いながら参考サイトをピックアップ

移行にかかった時間はほぼ3日です。はてなブログ時代から、いつかはWordPressに移行することを前提としたブログ作りをしていたにも関わらず、結構時間がかかってしまいました。

ちなみに「いつかはWordPressに移行することを前提としたブログ作り」とは、具体的には

独自ドメインでブログを開設
写真のアップロード先は「はてなフォトライフ」ではなく「Flickr」
記事のパーマリンクを個別の記事ごとに設定していた

というようなことです。これらをやっていたおかげで、移行作業の負担がずいぶん軽減されました。

ではでは、順を追って作業内容を見ていきましょう。

さくらのレンタルサーバーにWordPressをインストール

これはサーバー設定画面から簡単にインストールできますので、省略しますね。詳細はこちらです。

→ 独自ドメインでWordpressをインストールする

ただ、今回の移行は、独自ドメインを「はてなブログPro」に割り当てたままで、先にWordPressでブログを作り込んでいます。つまり、さくらの初期ドメインにWordPressをインストールしてブログを作り、その後ドメインの設定を「はてな」から「さくら」に移行しました。ですので上記ページのやり方とは一部異なります。

移行するまで作りかけのブログを公開しない

はてなブログと違って、WordPressには「ブログ全体を非公開にする」という設定がありません。そのため、こちらのツールを使って非ログインユーザーをログインページに飛ばすことで、擬似的にブログ全体を非公開にしていました。

公開前のWordPressサイトをパブリックに晒したくないときは「wp-nologin-redirect」プラグインがよさそう

WordPressサイト公開前、一般ユーザーには、コンテンツを非表示にしたいときにお勧めなプラグインです。

寝ログ

もちろん、ダッシュボードの表示設定内「検索エンジンがサイトをインデックスしないようにする」にもチェックを入れていますよ。

テーマを選択してサイトを作り込む

今回は有料の海外テーマ「SmartBlog」を使ってみました。デザインを作り込む作業については、先日のエントリーをご参照ください。

ブログのデザインについて。今回のこだわりポイント。 | starnote*

当ブログは昨日の深夜（というか今日の早朝）に「はてなブログ」から「WordPress」に完全移行しました。全く違うシステムに移行するということは、サイトのデザインを一から作り込む必要があるということです。そこでこのエントリーでは、移行リニューアルにともなうデザイン変更について、僕がこだわったポイントを記しておきたいと思います。海外の有料テーマを購入リニューアルすると言っても、何もないところからデザインを作り出せるほどの技量は僕にはありません。誰かが準備してくれたものを少しいじって、カスタマイズすることができる程度です。そうは言っても、メジャーな日本製テーマをベースに使うと他のWordPressブログと代わり映えしなくなってしまいそうです。だから今回はオシャレな有料海外テーマを購入して、日本語にローカライズしつつ、僕好みにカスタマイズすることにしました。 SmartBlog で、購入したテーマがこちらの「SmartBlog」というテーマ。 SmartBlog → SmartBlog 最初は「Authentic」というテーマを購入してみようと思っていたのですが、動的なコンテンツが多くて僕の手には負えなさそうだったので、よりシンプルな「SmartBlog」にしました。できるだけミニマルに今回デザインを作るにあたって心掛けたのは「できるだけミニマルに、無駄な要素を省く」ということです。例えば、これがリニューアル直前の当ブログのデザインですが、はっきり言ってヘッダー部分のグラデーションとかいらないですよね。（自分で作ったくせにねー） starnote* Previous Design 確かに、これはこれで「はてなブログ」という範疇で自分なりに頑張った結果だったのですが、WordPressに持って行くのはちょっと重苦しい。「ミニマルに」というコンセプトの下、文字と背景のコントラストをはっきりとしつつ、全体的な雰囲気も明るくしたい。つまり、ウェイトの大きいフォントを適材適所で使い、大きくて明るい写真をどーんと置いてあげればいいわけです。で、完成したのがこのようなデザイン。 starnote* Present Design

starnote*

記事の移行

はてなブログのエクスポート機能を使って記事をローカルにダウンロード。その後WordPressにアップしました。

以下の記事は「はてなブログPro」から「さくらのレンタルサーバーにインストールしたWordPress」という、僕と全く同じ環境の方が書かれたもの。もう参考にしまくりました。本当にありがとうございました。

はてなブログからWordPressに引越し。やり方の流れと設定の注意点を徹底解説。

こんにちはー。縄跳びパフォーマーの粕尾将一(@macchan8130)です。自分はこれまでずっと「はてなブロ…

なわとび1本で何でもできるのだ

記事をWordPressにインポートした後は、1記事ずつ「アイキャッチ」と「パーマリンク」の設定をチェックしていきます。

アイキャッチ画像を新たに設定

まず、アイキャッチ画像についてですが、はてなブログの場合は「記事本文内に表示された最初の画像」をアイキャッチとしていることが多いと思います。しかし、WordPressでは、記事本文とアイキャッチ画像は別の要素として完全に分けられています。

そのため、移行に際して本文内から元のアイキャッチ画像を削除し、新たなアイキャッチ画像を設定する作業が必要になりました。

この作業に一番時間を取られました。移行時点で100記事ほどでしたが、後述のパーマリンクの確認作業と合わせて丸一日やっていたと記憶しています。地味な作業の繰り返しなのでとてもツラかったです。

また、WordPressのアイキャッチ画像にはもう1つ問題がありました。それは、アイキャッチの解像度が低くなるという問題。

解決してくれたのは、こちらの記事。

WordPressでアイキャッチ画像を好きなサイズで設定・使う方法

WordPressのアイキャッチ、または、アイキャッチ画像（旧称：投稿サムネイル）は、投稿を一覧表示した時などに目を惹き、インパクトを与えるもの。アイキャッチの有無で回遊率にも影響があります。好みのアイキャッチ画像のサイズをWordPressの「add image size」で追加登録し使う方法を説明しています。これで、設定されたアイキャッチ画像サイズしか指定できないプラグインでも、固定ページでもサイドバーでも、様々なところで好みのサイズのアイキャッチ画像を自在に表示できるようになります。

WordPressブログ作ってみる?

詳しく書かれていて本当に勉強になったので、お困りの方はご一読されることをオススメします。

パーマリンクの確認

記事のパーマリンクは、移転前から「/entry/20170815_ulysses-subscription」のように、任意のタイトルを個別に設定していました。WordPressでも、「/entry/」を入れるような設定にしておけば、移行後も同じURLを使うことができます。

しかし、初期に書いた一部の記事では、はてなブログのデフォルト設定である「/entry/2016/05/09/234333」というようなフォーマットになっていました。

残念ながら、WordPressのパーマリンク設定では数字の間にスラッシュを入れられません。そのため、上のような個別のタイトルに変更し、元のURLから301リダイレクトを設定することにしました。

参考にしたのはこちらの記事。

WordPressでURLを別のURLにリダイレクト（自動転送）する方法

WordPressで一度投稿した記事を別のURLににリダイレクト（自動転送）させたいということは、まれにあると思います。記事のカテゴリを変更したのでURL（パーマリンク）が変更されてしまったブログを別のドメインに引っ越したので、URLが変更

まろろぐ

記事内で紹介されている「Simple 301 Redirects」というプラグインを使っています。設定画面がこんな感じ。

今確認してみたら、Googleが新しいURLを拾ってくれているので、問題なく動いているようです。

記事内の画像をRetina対応に

2010年のiPhone 4から採用された「Retinaディスプレイ」。最近では、Apple製品のみならず、多くのAndroidスマートフォンやWindows PCでも高解像度化が進んでいます。

そこで、記事内の画像をRetina対応にするためにプラグインを導入しました。参考にしたのはこちらの記事。

Retinaディスプレイ対応の画像を自動生成してくれるWordPressプラグイン「WP Retina 2x」

TechMemo

もくじを表示

もくじの表示には「Table of Contents Plus」というプラグインを使用しています。設定について参考にしたのはこちらの記事。

WordPress目次の作り方！目次作成プラグインTable of Contents Plusの使い方！

WordPressの記事内の目次の作り方は？目次自動作成プラグイン「Table of Contents Plu・・・

アフィ活～サラリーマン副業ブログ実践記～

App Storeリンクの表示

当ブログでは、よくMacアプリやiOSアプリを紹介します。これまでは、はてなブログの機能を使ってApp Storeへのリンクを表示していたのですが、WordPressへの移行に伴い、それができなくなってしまいました。

そこで「WP-Appbox」というプラグインを使うことにしました。詳しくはこちらの記事を参照してください。

WP-Appbox：WordPressでアプリを楽々リンクするプラグイン | タノコレ

WordPressを使ったサイトでアプリのリンクや紹介記事を書くなら必須のPHG対応プラグイン、WP-Appboxのレビューと使い方の解説、日本語化ファイルのダウンロード。iTunes App Storeだけでなく、Google Play Store、Chrome拡張機能、WordPressプラグインにも対応！

タノコレ

こんな感じのリンクが表示されます。

Download QR-Code

Evernote

Developer:

Price: Free⁺

ブログカードを表示

この記事内でも使いまくっていますが、記事へのリンクを格好良く入れるためには「ブログカード」を使うのが手っ取り早いです。つまりこういうの。

グッバイはてな、ハローWordPress。 | starnote*

ついに！当ブログは開設からずっと「はてなブログ」のサービスを使って運営してきたのですが、つい先ほど念願のWordPressに移行しました。「はてなブログ」から「WordPress」へこれまで当ブログは2年間「はてなブログ」のサービスに乗っかって運営してきました。なぜかというと、超初心者だった僕がブログを始めるにあたって、いきなりWordPressからはじめるのは相当ハードルの高いものだったから。ベースになるテーマを選んで、少しCSSをいじってカスタマイズして、Webフォントを読み込んで、というようなことは当時の僕には到底不可能なことでした。とりあえず良さそうなテーマを選んでおけば、それなりのブログができてしまう「はてな」の方が魅力的に見えたんですよね。でも「はてな」でブログを運営しているうちに、アドセンスのコードを貼り付けたりとか、レイアウトをいじったりとか、シェアボタンをカスタマイズしたりとか、HTMLやCSSに触れる機会が増えてきました。すると今度は、お手軽な「はてなブログ」では物足りなくなっちゃうんですよね。もっとここをカスタマイズしたい！とか思うようになってしまう。もちろん、はてなブログのままでカスタマイズを極めるという方法もありましたが、個人的には「井の中の蛙」っぽさがするんですよ。つまり、Webの世界ではマイナーな存在（だよね？）のはてなブログをカスタマイズする能力を身につけても、それは「はてな」の中でしか通用しないんじゃないか？と考えました。がっつりCSSをいじってカスタマイズするなら、せっかくだから世界標準のWordPressを使いたい。最近はこんな風に思ってました。だからWordPressに移行しようと思った、というのが一連の経緯。この件についてはいつか記事にしたいと思ってます。購読の変更は必要かもまず、はてなブログの読者登録を使って購読してくださっていた方には謝らなければなりません。WordPressに移行したことによって、購読が機能しなくなってしまいました。ごめんなさい。もしよかったら、FeedlyなどのRSSリーダーを使うか、僕のTwitterアカウントをフォローして頂ければ更新情報が手に入ります。よろしくお願いします。

starnote*

はてなブログ時代には、はてな専用のものを使えていたのですが、WordPressではそのまま使うことができません。何かしら自分で用意する必要があります。

そこで参考にしたのがこちら。URLを貼り付けるだけでブログカードを自動生成してくれるプラグインです。

WordPressで外部リンクを自動でブログカード表示するプラグインがめっちゃ便利なので紹介する | YUTOLOG

こんにちは、YUTOです。 WordPressに移行してから、最強のWordPressテーマ「ストーク」を使っているんだけど、内部リンクカードは記事idを入力するだけで、綺麗に表示してくれるが、はてなブログのようなブログカードで外部リンクは表示されない。ということで、WordPressでもブログカードで外部リンクが表示されるように、プラグインを新しくインストールしました。これがめっちゃ良い。 Celtispack プラグインパック記事中にURLを挿入するだけで、自動でブログカード表示してくれるプラグイン。例えば、僕のサブブログを貼り付けるとこのようになります。 URLを貼り付ければいいだけなので、めっちゃ便利。インストール方法ここにサイトの下の方にあるCeltispack プラグインパックをダウンロード。【プラグイン】から【新規追加】を選択し、【プラグインのアップロード】で先ほどダウンロードしたファイルをアップロードして有効化する。【設定】→【Celtispack プラグインパック】に移動。プラグインパックで色々セットになっているので、【oEmbed extend】のみにチェックを入れて有効化する。二行目のブログカード作成は【Celtispack OGPブログカード形式】にしておけばオーケー。終わりこれでWordPressでもはてなブログのようなブログカードを外部リンクで実装できます。ブログカード表示にしたい方はぜひ試してみてください。ではっ

YUTOLOG

しかし、自分のブログの記事へのリンクを作ってみると、アイキャッチの部分に違う画像（本文の最初に出て来る画像）が表示されました。

調べてみると、どうやらFacebookでの記事の共有に使われる「OGPイメージ」というのを設定しないといけないようで、「All in One SEO Pack」というプラグインをインストールして対応させました。

参考にしたのはこちら。

【2017年最新】アイキャッチ画像がFacebookに表示されない時の対処法を激分かりやすく解説

ブログを運営している以上、Facebookにも投稿して少しでも多くの人に見てもらいたいですよね。でもFacebookにちゃんとアイキャッチ画像が反映されない…、そんなことはよくあります。今回は、Facebookにブログに設定したサムネイル画像をしっかりと表示させるための対処法を分かりやすく画像付きで解説しました。

ブログマーケッターJUNICHI

ブログの左側と記事下にシェアボタンを表示

シェアボタンのプラグインはいろいろとありますが、シンプルなものを使いたかったので「AddToAny Share Buttons」というプラグインを使うことに。参考にしたのはこちらの記事です。

WordPress/SNSシェアプラグインどれがいい?上位5件を徹底比較

WordPressでFacebook・Twitter・Google+・LINE等のSNS共有ボタンを設置できるプラグインをWordPress内での点数とインストール数を加味した上位5件で機能・操作性・デザインを徹底比較。インストール後の設定、機能、対応SNSを確認。最後におすすめのシェアプラグインを発表。