はてなブログからWordPressに移転する際に参考にしたサイトまとめ。CoursePharmacistLifestyleEssayColumnHouseBlogMusicBlogはてなブログからWordPressに移転する際に参考にしたサイトまとめ。Miura移転ネタは続くよどこまでも。先日、当ブログは「はてなブログPro」から「WordPress」に移行しました。移行作業に掛かった時間は約3日。さまざまなサイトを参考にして、いろいろと試行錯誤しながら、自分の環境に合わせて作業を行いました。このエントリーでは、その「移行作業」の際に参考にしたサイトをまとめておきたいと思います。関連記事はこちら当ブログの環境について一口に「WordPress」といっても、インストールしているサーバーや契約しているドメイン管理会社は人それぞれ。前提条件として、当ブログを管理している環境を記しておきます。サーバー・ドメインどちらも「さくら」です当ブログでは、サーバーもドメインも「さくらインターネット」で契約しています。当ブログでは、「はてなブログPro」でブログを書いていた時代から、今と同じ「starrrrr.com」という独自ドメインを使っていました。ブログの開設と同時に、さくらでドメインを取っています。実は、サーバーは「はてな」でブログを開設する前から契約しています。いうのも、当初はWordPressでブログを作ろうかと思っていたのですが、あまりにも初心者すぎて分からないことだらけで挫折してしまい、仕方なく「はてなブログPro」で開設したのです。このような経緯があり、サーバーは契約したままになっていました。メール専用サーバーと化していたところに、今回新たにWordPressをインストールした、というわけです。移行作業を追いながら参考サイトをピックアップ移行にかかった時間はほぼ3日です。はてなブログ時代から、いつかはWordPressに移行することを前提としたブログ作りをしていたにも関わらず、結構時間がかかってしまいました。記事のパーマリンクを個別の記事ごとに設定していたというようなことです。これらをやっていたおかげで、移行作業の負担がずいぶん軽減されました。順を追って作業内容を見ていきましょう。さくらのレンタルサーバーにWordPressをインストールこれはサーバー設定画面から簡単にインストールできますので、省略しますね。独自ドメインでWordpressをインストールするただ、今回の移行は、独自ドメインを「はてなブログPro」に割り当てたままで、先にWordPressでブログを作り込んでいます。さくらの初期ドメインにWordPressをインストールしてブログを作り、その後ドメインの設定を「はてな」から「さくら」に移行しました。上記ページのやり方とは一部異なります。移行するまで作りかけのブログを公開しないはてなブログと違って、WordPressには「ブログ全体を非公開にする」という設定がありません。そのため、こちらのツールを使って非ログインユーザーをログインページに飛ばすことで、擬似的にブログ全体を非公開にしていました。公開前のWordPressサイトをパブリックに晒したくないときは「wp-nologin-redirect」プラグインがよさそうWordPressサイト公開前、一般ユーザーには、コンテンツを非表示にしたいときにお勧めなプラグインです。寝ログAMPもちろん、ダッシュボードの表示設定内「検索エンジンがサイトをインデックスしないようにする」にもチェックを入れていますよ。テーマを選択してサイトを作り込む今回は有料の海外テーマ「SmartBlog」を使ってみました。デザインを作り込む作業については、先日のエントリーをご参照ください。ブログのデザインについて。今回のこだわりポイント。starnote*当ブログは昨日の深夜(というか今日の早朝)に「はてなブログ」から「WordPress」に完全移行しました。違うシステムに移行するということは、サイトのデザインを一から作り込む必要があるということです。そこでこのエントリーでは、移行リニューアルにともなうデザイン変更について、僕がこだわったポイントを記しておきたいと思います。リニューアルすると言っても、何もないところかstarrrrr.com記事の移行はてなブログのエクスポート機能を使って記事をローカルにダウンロード。その後WordPressにアップしました。以下の記事は「はてなブログPro」から「さくらのレンタルサーバーにインストールしたWordPress」という、僕と全く同じ環境の方が書かれたもの。参考にしまくりました。本当にありがとうございました。はてなブログからWordPressに移行しよう。やり方の流れと設定の注意点を徹底解説。なわとび1本で何でもできるのだこんにちはー。縄跳びパフォーマーの粕尾将一(@macchan8130)です。自分はこれまでずっと「はてなブログ」で続けwww.shoichikasuo.com記事をWordPressにインポートした後は、1記事ずつ「アイキャッチ」と「パーマリンク」の設定をチェックしていきます。アイキャッチ画像を新たに設定まず、アイキャッチ画像についてですが、はてなブログの場合は「記事本文内に表示された最初の画像」をアイキャッチとしていることが多いと思います。WordPressでは、記事本文とアイキャッチ画像は別の要素として完全に分けられています。そのため、移行に際して本文内から元のアイキャッチ画像を削除し、新たなアイキャッチ画像を設定する作業が必要になりました。この作業に一番時間を取られました。移行時点で100記事ほどでしたが、後述のパーマリンクの確認作業と合わせて丸一日やっていたと記憶しています。地味な作業の繰り返しなのでとてもツラかったです。WordPressのアイキャッチ画像にはもう1つ問題がありました。それは、アイキャッチの解像度が低くなるという問題。解決してくれたのは、こちらの記事。WordPressでアイキャッチ画像を好きなサイズで設定・使う方法WordPressのアイキャッチ、または、アイキャッチ画像(旧称:投稿サムネイル)は、投稿を一覧表示した時などに目を惹き、インパクトを与えるもの。アイキャッチの有無で回遊率にも影響があります。size」で追加登録し使う方法を説明しています。これで、設定されたアイキャッチ画像サイズしか指定できないプラグインでも、固定ページでもサイドバーでも、様々なところで好みのサイズのアイキャッチ画像を自在に表示できるようになります。WordPressブログ作ってみる?詳しく書かれていて本当に勉強になったので、お困りの方はご一読されることをオススメします。記事のパーマリンクは、移転前から「/entry/20170815_ulysses-subscription」のように、任意のタイトルを個別に設定していました。WordPressでも、「/entry/」を入れるような設定にしておけば、移行後も同じURLを使うことができます。初期に書いた一部の記事では、はてなブログのデフォルト設定である「/entry/2016/05/09/234333」というようなフォーマットになっていました。残念ながら、WordPressのパーマリンク設定では数字の間にスラッシュを入れられません。そのため、上のような個別のタイトルに変更し、元のURLから301リダイレクトを設定することにしました。参考にしたのはこちらの記事。WordPressでURLを別のURLにリダイレクト(301リダイレクト・自動転送)する方法WordPressで一度投稿した記事を別のURLににリダイレクト(自動転送)させたいということは、まれにあると思います。Redirects」というプラグインを使っています。設定画面がこんな感じ。今確認してみたら、Googleが新しいURLを拾ってくれているので、問題なく動いているようです。4から採用された「Retinaディスプレイ」。PCでも高解像度化が進んでいます。そこで、記事内の画像をRetina対応にするためにプラグインを導入しました。参考にしたのはこちらの記事。2xは、Retinaディスプレイ対応の画像を自動生成してくれるWordPressプラグインです。Retinaディスプレイに対応するためには、表示させたいサイズの2倍のサイズの画像を用意する必要があります。Plus」というプラグインを使用しています。設定について参考にしたのはこちらの記事。当ブログでは、よくMacアプリやiOSアプリを紹介します。Storeへのリンクを表示していたのですが、WordPressへの移行に伴い、それができなくなってしまいました。そこで「WP-Appbox」というプラグインを使うことにしました。詳しくはこちらの記事を参照してください。http://tanocolle.com/app-link-creating-plug-ins-wp-appbox/こんな感じのリンクが表示されます。Free+ブログカードを表示この記事内でも使いまくっていますが、記事へのリンクを格好良く入れるためには「ブログカード」を使うのが手っ取り早いです。グッバイはてな、ハローWordPress。当ブログは開設からずっと「はてなブログ」のサービスを使って運営してきたのですが、つい先ほど念願のWordPressに移行しました。これまで当ブログは2年間「はてなブログ」のサービスに乗っかって運営してきました。いうと、超初心者だった僕がブログを始めるにあたって、いきなりWordPressからはじめるのは相当ハードルの高いものだったかstarrrrr.comはてなブログ時代には、はてな専用のものを使えていたのですが、WordPressではそのまま使うことができません。何かしら自分で用意する必要があります。そこで参考にしたのがこちら。URLを貼り付けるだけでブログカードを自動生成してくれるプラグインです。YUTOLOG(ユトログ)こんにちは、YUTOです。WordPressに移行してから、最強のWordPressテーマ「ストーク」を使っているんだけど、内部リンクカードは記事idを入力するだけで、綺麗に表示してくれるが、はてなブログのようなブログカードで外部リンクは表示されない。いうことで、WordPressでもブログカードで外部リンクが表示されるように、プラグインを新しくインストールしました。yutolog.comしかし、自分のブログの記事へのリンクを作ってみると、アイキャッチの部分に違う画像(本文の最初に出て来る画像)が表示されました。Pack」というプラグインをインストールして対応させました。参考にしたのはこちら。デジタルマーケティング専門家/デジタルマーケッター松原潤一のブログブログを運営している以上、Facebookにも投稿して少しでも多くの人に見てもらいたいですよね。Facebookにちゃんとアイキャッチ画像が反映されない...、そんなことはよくあります。今回は、Facebookにブログに設定したサムネイル画像をしっかりと表示させるための対処法を分かりやすく画像付きで解説しました。Buttons」というプラグインを使うことに。参考にしたのはこちらの記事です。WordPress/SNSシェアプラグインどれがいい?上位5件を徹底比較WordPressでFacebook・Twitter・Google+・LINE等のSNS共有ボタンを設置できるプラグインをWordPress内での点数とインストール数を加味した上位5件で機能・操作性・デザインを徹底比較。インストール後の設定、機能、対応SNSを確認。最後におすすめのシェアプラグインを発表。当ブログでは「Googleアドセンス」を使って収益化しています。記事内のアドセンス広告は自動で配置することが基本になるわけですが、WordPressではプラグイン1つで解決してしまいます。【WordPressプラグイン】記事本文内にグーグルアドセンスを簡単に表示するにはコレ!まとめ同じ作業をもう一度やりたいかというと、できればやりたくないかな。1記事ずつアイキャッチとパーマリンクを確認していく作業が大変でした。はてなブログからWordPressへの移行を考えている人のお役に立てれば幸いです。DesignDesignブログのデザインについて。今回のこだわりポイント。Monthly【月刊すたの通信】2017年8月のできごと。#037|ラストスパート。#036|気分で生きてる。#035|1週間の長崎帰省まとめ。#034|自分を追い込む日々。#033|会いに行く。PostBlogColumnDesignブログの名刺をリニューアルした理由と、個人としての名刺を持つ意味について。PhD薬学部6年制課程を卒業後、そのまま博士課程に進学。2019年3月に「博士(薬学)」の学位を取得しました。Macとカメラとクルマを愛する1988年生まれのミレニアル世代です。僕自身はとても飽きっぽい性格なので、自分にひとつの軸を通したくてこのサイトを運営しています。Posts!学会発表における「スライド」と「デザイン」の、切っても切れない関係。01|緑黄色社会2018-12-10コーヒー沼に足を踏み入れるために、RIVERSのグラインダー「グリット」を購入。2019-04-1330歳になりました。2018-10-14文章力を鍛えるためには書くしかない。人に読んでもらいながら。2019-01-02【月刊すたの通信】2017年3月のできごと。2017-03-31【月刊すたの通信】2018年6月のできごと。2018-06-30日本とアメリカの薬学教育のちがいを学んできた。2018-11-16一瞬で街を空っぽにした爆弾から、生き残った子孫の使命。Proと3か月|総合力の高いイヤホンが、さらに進化した。PhD薬学部6年制課程を卒業後、そのまま博士課程に進学。2019年3月に「博士(薬学)」の学位を取得しました。Macとカメラとクルマを愛する1988年生まれのミレニアル世代です。僕自身はとても飽きっぽい性格なので、自分にひとつの軸を通したくてこのサイトを運営しています。Posts箱根、1泊2日、文化と芸術に触れる旅。2020-02-15大谷資料館|宇都宮の地底に広がる巨大空間を探検する。Proと3か月|総合力の高いイヤホンが、さらに進化した。