WordPressサイトのリニューアルで「はてなブログ」から投稿を移設した事例を紹介！

Last Updated on 2026年1月8日 by expwakui

私個人が自力でWordPressのリニューアルをした事例を紹介します。

このサイトはWordPressを使って作っていますが、去る11月16日にデザインをリニューアルしました。同時に、いままで記事を書いていた「はてなブログ」から、仕事に関する投稿を移設しました。

今回のリニューアルの手順と、現在インストールしているプラグインの一覧を紹介します。
また、投稿データの移設やブロックテーマの制作について気づいたことをまとめますので、リニューアル作業をする方の参考になれば幸いです。

目次

• リニューアルの背景
• リニューアルの方針
• 新サイトの構築・制作環境はLocalWP
• WordPressリニューアルの手順｜はてなブログからの移設を含む
  • 1. LocalWPでWordPressをインストールする
  • 2. WordPressテーマ X-T9 をインストールして有効化する
  • 3. 既存サイトのファイルとDBデータをLocalWPに移設する
  • 4. はてなブログの投稿データをWordPressにインポートする
    • 参考：はてなブログの記事URLの設定
  • 5. 子テーマを作成する
  • 6. サイト制作を行う
  • 7. 本番に移行する準備をする
  • 8. 本番環境にファイルとデータベースをアップロードする
  • 9. 動作確認と公開
  • 10. はてなブログからのリダイレクト設定
    • リダイレクト設定の注意点
  • 11. サイトマップの更新
  • 12. 各種の調整
• 現在使用しているプラグイン一覧
• PageSpeed Insights の測定値
  • トップページ（携帯電話）
  • 投稿ページ（携帯電話）
• はてなブログからの移設で気づいた点
  • エディターの違い
  • 投稿ヘッダー画像の違い
• ブロックテーマで悩んだ点
  • フォントサイズ設定は意外と難しい
  • 編集画面上で設定できない場合どうするか
  • 制作・構築方法の分からない点は生成AIに聞く
• WordPressについての自分の疑問Q&A
  • サイトエディターは将来も維持される？
  • 投稿一覧でタイトルのカラム幅を広げられる？
  • 画像サイズ変更はどうすればいい？
• まとめ

リニューアルの背景

従来の「はてなブログ」には、ガジェットなど趣味のコンテンツと、仕事のコンテンツが混在していました。
仕事のコンテンツを充実させるにあたり、両者を分離することで読者に認識してもらいやすくする必要がありました。また、SEOやWeb分析の都合上、別のサイトにすることが望ましいとの判断もあります。

Web制作を8年前に辞めた私ですが、今年になって自身のWebサイトをWordPressで作り、標準テーマを使って1ページだけの運用を始めています。今回このサイトに従来のブログを統合し、Webライターのサイトとして再出発することにしたのです。

リニューアルの方針

既存のWebサイトはWordPressの標準テーマを使用し、トップだけの1ページ構成でした。ブロックテーマもほとんど使ったことがなかったため、標準テーマから必要な部分だけに絞ってサイトを作っていただけです。

このリニューアルでは、トップのデザインを刷新することと、既存のブログ記事を統合してサイトを充実させることが目的です。同時に、ブロックテーマでの制作を学ぶこともミッションにしました。

このため、使用するテーマはブロックテーマの「X-T9」を選択し、完全にブロックテーマで制作を進める方針としています。

新サイトの構築・制作環境はLocalWP

WordPressによるサイト構築をするのに、特別な環境は不要です。LocalWPをパソコンにインストールして、新規にサイトを作ればよいのです。
そうでなければ、PC内にWebサーバーやデータベースサーバーをセットアップしてSSLに対応させるなど、手間がかかるうえ、専門的な知識が必要になります。

LocalWP以外の簡単な方法としては、クラウドサービスのWordPress Playgroundを使用する方法もあるでしょう。この場合はブラウザでアクセスして操作するだけになります。
今回はLocalWPを使用してローカル環境を構築することにしました。

WordPressリニューアルの手順｜はてなブログからの移設を含む

今回行ったリニューアルの手順を紹介します。

1. LocalWPでWordPressをインストールする

私の場合、LocalWPのMac版をすでにセットアップ済みでした。

新サイト用のWordPressをインストールするにあたり「hostsファイル」を変更し、本番と同じドメインでアクセスできるように設定しています。

インストール・セットアップ方法は、WEBST8のブログさんが親切に解説されているので、参考になるでしょう。

2. WordPressテーマ X-T9 をインストールして有効化する

テーマは無料で公開されていて定評のあるブロックテーマ「X-T9」をインストールしました。
なお、X-T9を開発しているVector,Inc.さんには、おすすめのプラグインがいくつか用意されていますが、今回はテーマのみ使用させていただきました。

3. 既存サイトのファイルとDBデータをLocalWPに移設する

一般的なリニューアルでは既存のサイトをテスト環境に移設する作業があります。
今回もそのステップを踏んでLocalWPに移設しましたが・・・

• 元のサイトがトップの1ページだけ
• 使用するテーマが変わった
• 内容にも変更が生じた

ことなどから、ローカル環境で新規に構築すればよい状況でした。

なお、既存のWebサイトはWordPressを /wp/ ディレクトリ以下に設置しています。LocalWPではルートディレクトリに設置する必要があるため、index.phpやwp-config.phpの記述は変える必要がありました。

4. はてなブログの投稿データをWordPressにインポートする

はてなブログには仕事以外にもガジェットや街歩きなどの趣味コンテンツも多く書いていたため、仕事のコンテンツだけを移設対象にします。

投稿データのエクスポートは一括で、MT形式で出力されます。
出力されたファイルの中身はテキスト形式のため、エディターで開いて編集可能です。各投稿が分かりやすく区切られて並んでいるため、必要な投稿だけを残して、それ以外を削除しました。

私の場合、投稿ごとにカスタムURLを設定しており、WordPressでいうスラッグの部分に日付入りのページ名を書いていました。（例：2025/10/25/writing-for-accessibility）この部分がそのままBASENAMEとして出力されるため、コードエディターで正規表現を使って日付を取り除く処理を行っています。

WordPressにインポートするには、管理画面のツール＞インポートから「Movable Type と TypePad」を選択して「インストール」を実行します。

WordPressのパーマリンクは「カスタム構造」を選択し、次のように設定しました。

• https://ドメイン名/entry/%year%/%monthnum%/%day%/%postname%

ちなみにカテゴリーベースは blog/category タグベースは blog/tag としています。

参考：はてなブログの記事URLの設定

はてなブログで選択できる記事URLの表示形式は、添付画像のとおりです。

投稿ごとに設定するカスタムURLは、/entry/ 以下の部分が手動で入力可能です。
私はタイトル形式を採用しつつ、日本語になるのが嫌だったので自分で日付入りの英字タイトルを入力していました。

5. 子テーマを作成する

ブロックテーマ X-T9 をベースにサイトを作るため、まず子テーマを作成します。
X-T9 をいきなり触るとテーマのアップデートの際に上書きされ、せっかく作った構成がなくなってしまうので注意しましょう。
（と言いながら、私も最初いきなり触っていました💦）

ブロックテーマの子テーマを作成する方法は、あまり解説されていないようです。調べると子テーマを作成するプラグインなども存在します。
よく「子テーマディレクトリーを作って style.css を書けばよい」という話がありますが、子テーマの最低限の条件です。実際は、親に対して変更が生じるテーマファイルはすべて内包しないといけないでしょう。

私の場合、X-T9 の子テーマとして x-t9-child ディレクトリーを作成して、以下のディレクトリー・ファイルを含めました。

• parts ディレクトリーとファイルの一式
• templates ディレクトリーとファイルの一式
• style.css
• theme.json

style.css は子テーマのために必要なコメントだけを書いて保存します。
theme.json は変更するプロパティ（？）の部分だけを書きます。たとえば私のtheme.jsonの冒頭部分は次のとおりです。

{
    "settings": {
        "custom": {
            "layout": {
                "sidebar": "250px"
            },
            "width": {
                "sidebar": "250px"
            }
    },

また、追加CSSはWordPressのデータとして保存されますが、一応、additional.css という予備ファイルを作って子テーマに入れています。（使わないファイルです）

6. サイト制作を行う

データのインポートが完了したら、ローカルでの制作作業を行います。ほとんどがテーマエディターの「テンプレート」を編集する作業です。

ヘッダー・フッター・サイドバーは「パターン」に登録されたものをテンプレートでリンクしているため、どちらからでも編集できます。ナビゲーションについても同様です。

主な変更点は次のとおりです。

• ヘッダー・フッター・サイドバーのデザイン変更
• フロントページのデザイン変更
• 投稿・固定ページのデザイン変更（アイキャッチ・見出し・リストなど）
• 追加CSS欄へのCSS記述

7. 本番に移行する準備をする

ローカルでのサイト制作が終わったら、本番環境に移行する準備をします。

LocalWPが保存しているWordPressのファイルはルート直下に配置されているため、本番環境と構造が異なります。そのため一旦、別のフォルダーを作成し、そのなかにコピーを保存した後、本番環境と同じ階層構造に変更しました。（index.php と config.php の記述を変更）

8. 本番環境にファイルとデータベースをアップロードする

通常、リニューアル作業で本番サイトをクローズしますが、私の場合はレンタルサーバーのコントロールパネル上でBasic認証の設定を行い、パスワードでオープンする方法にしました。

用意した新サイトのファイル一式を、SFTPツールを使ってアップロードしますが、既存サイトのWordPressのファイル一式は、バックアップをとった後に削除するほうがよいでしょう。

データベースは、LocalWPから起動できるDBツール「AdminNeo」を使用してエクスポートしたものを、本番サーバーのphpMyAdminを使用してインポートします。
その後、phpMyAdmin で wp_options テーブルの次のカラムを本番用に設定します。

• siteurl：　https://ドメイン名/wp
• home：　https://ドメイン名

DB上では、siteurl がWordPressの設置ディレクトリを表します。ややこしいですね。間違えると管理画面に入れません🥺

9. 動作確認と公開

サイトにアクセスして動作を確認します。
私の場合、ホームは表示されるがブログが404エラーになったため、パーマリンクの設定で「変更を保存」ボタンを押すと解消されました。
スムーズに動作して問題がなかったため、次のステップに進みます。

10. はてなブログからのリダイレクト設定

はてなブログでは、有料版でサイト移設時の一括リダイレクトが設定できるようです。
ただ、今回のようにサイト移設ではなく、特定ページの移設の場合、個々のページでリダイレクトを実施する必要があります。
しかし、次のような一般的なリダイレクト手段は使えません。

• .htaccess による301リダイレクト
• HTMLの meta refresh によるリダイレクト

よって、JavaScriptによるリダイレクトを実施しました。具体的には次のようなコードを投稿欄（HTMLモード）に貼り付けて保存します。本文の内容は削除します。

<script>
document.addEventListener('DOMContentLoaded', function() {
    var meta = document.createElement('meta');
    meta.name = "robots";
    meta.content = "noindex,follow"; 
    document.getElementsByTagName('head')[0].appendChild(meta);

    setTimeout(function() {
        if (location.hostname === '旧サイトのドメイン名') {
            location.replace(location.href.replace('旧サイトのドメイン名', '新サイトのドメイン名'));
        }
    }, 100);
});
</script>

内容は、クローラーがこのページをインデックスせず、かつページの評価を新ページに引き継ぐことを求めたうえで、URLのドメイン名を新しいサイトのドメイン名に置換するというものです。
もちろん、各投稿のURLの構造が、新サイトのパーマリンクと一致している必要があります。

リダイレクト設定の注意点

はてなブログの無料版は、トップページに複数の投稿がそのまま流れる構造です。個々の投稿は、本文がすべて表示されます。（全文形式）したがって、投稿内に上記のJavaScriptを設置すると、トップページもリダイレクトされてしまいます。

これは、部分的なコンテンツの移設では不都合です。
私の場合は一時的に有料版を契約し、トップの表示を「一覧形式」に変更して回避しました。
ただ、JavaScriptのコードを変更すれば、トップがリダイレクトしないようにすることは可能でしょう。

また、JavaScriptによるリダイレクト方法は一般的に「おすすめでない」方法ですし、リニューアルしたばかりの現在では効果について何ともいえません。今後、状況を見ていきたいと思います。

11. サイトマップの更新

事前の準備として、WordPress のSEOプラグイン（All in One SEO）でサイトマップを有効にしておきます。（何らかの方法でサイトマップが設置できればOK）

移設するすべてのページのリダイレクト記述が完了した後、新旧双方の Search Console でサイトマップを更新します。

12. 各種の調整

上記でひとまずリニューアル作業は終了ですが、その後もWebサイトを閲覧しながら、細かな問題点を修正しました。

All in One SEOが「h1タグが複数ある！」と警告するので、よく見ると・・・

• ヘッダーのサイト名とフッターのサイト名の両方ともh1
• カテゴリー一覧のタイトルとサイト名の両方ともh1
• 投稿ページのタイトルとサイト名の両方ともh1

という状態でした。

修正方法としては、ヘッダーのサイト名をトップページのみh1にし、その他のページでは段落に変更しています。結果、ヘッダーテンプレートが2つになりました。

さらに、Search Consoleが「投稿一覧の2ページ目がインデックスされてない！」と警告するので、よく見るとAll in One SEOが2ページ目以降をnoindexに設定していました。
これもインデックスするように設定変更しています。

現在使用しているプラグイン一覧

サイトリニューアル完了時点で使用しているプラグインを一覧で紹介します。

プラグイン名	概要
All in One SEO	SEOツール
BackWPup	WordPressのバックアップツール
Breadcrumb NavXT	パンくずリストを表示するプラグイン。テーマに用意されていないため
Broken Link Checker by AIOSEO	リンク切れをチェックするツール
Category Order and Taxonomy Terms Order	カテゴリー一覧を任意の順番で表示するツール。サイドバーの表示順を最適化するため
Page scroll to id	ページ内の特定のIDへスムーズにスクロールするプラグイン。目次から移動をスムーズにするため
Search Regex	WordPressデータベースの内容を検索・置換するツール。移行時に文字列を正規表現で置換できるため
SimpleTOC	シンプルな目次ブロックを提供するプラグイン
Site Kit by Google	Googleのツールをダッシュボードから利用できるようにするプラグイン。主にSearch ConsoleとGA4を使用するため
SiteGuard WP Plugin	管理画面やログインのセキュリティを向上させるプラグイン
Two Factor	二要素認証を実装するプラグイン
WP Multibyte Patch	マルチバイト文字の取り扱いに関する不具合の累積的修正・強化プラグイン。WordPressの基本プラグイン
WP ULike	いいね・よくないねボタンを設置するプラグイン。反応が見たいため。デザインがシンプル
WPForms Lite	シンプルな問い合わせフォームを実装するプラグイン

PageSpeed Insights の測定値

リニューアルしたサイトのページスピードを確認してみました。サーバーはロリポップのスタンダードプランを使用しています。

以下は PageSpeed Insights でパフォーマンスを測定した結果です。モバイル表示の場合ですが、パフォーマンスはデスクトップ表示のほうがよい結果が出ています。

特別な最適化は行なっていませんが、X-T9がよくできているのでしょう。さらに改善するには、トップページの画像サイズを小さくすることなどが考えられます。

トップページ（携帯電話）

指標	数値
パフォーマンス	87/100
ユーザー補助	96/100
おすすめの方法	100/100
SEO	92/100
FCP	1.3秒
LCP	3.9秒
TBT	50ミリ秒
Speed Index	2.9秒

投稿ページ（携帯電話）

指標	数値
パフォーマンス	90/100
ユーザー補助	95/100
おすすめの方法	100/100
SEO	100/100
FCP	1.3秒
LCP	3.6秒
TBT	30ミリ秒
Speed Index	2.6秒

• FCP：First Contentful Paint
• LCP：Largest Contentful Paint
• TBT：Total Blocking Time

はてなブログからの移設で気づいた点

はてなブログからの移設作業で気づいたことを列挙しておきます。

エディターの違い

投稿データをWordPressにインポートすると、投稿画面はクラシック表示になりました。
「ブロックに変換」ボタンが表示されるので、クリックしてブロックに変更できます。

投稿ヘッダー画像の違い

はてなブログでは、投稿のヘッダー画像は投稿内に貼る必要があります。（なくてもいい）
アイキャッチはSNSにシェアしたときに表示されるものとして設定しますが、通常は投稿に貼ったものを選択するでしょう。

WordPressでは、デザインによってアイキャッチ画像を好きな場所に表示させられます。アイキャッチを投稿の上部に配置できるため、画像をアイキャッチとしてアップロードすればOKです。

インポートした投稿データには、ヘッダー画像へのリンクが含まれています。画像そのものは、はてなブログのサーバーに保存されています。
このため、はてなブログから画像をダウンロードしてPCに保存し、WordPressにアイキャッチとしてアップロードしました。投稿上の画像リンクは削除しています。

ブロックテーマで悩んだ点

ブロックテーマを真面目に触ったのは今回が初めてです。最初は「どう触るのかな？」という感じで手探り状態でしたが「あーでもない」「こーでもない」と試行錯誤しているうちに、だんだん理解してきました。

フォントサイズ設定は意外と難しい

フォントサイズを選択しても反映されないことがあります。
いまだにきちんと理解できていませんが、テーマ内でフォントサイズが設定されている箇所は複数あります。

• ブロック編集画面のスタイル
• テーマのデフォルトのスタイル
• 追加CSS
• theme.json

どこかのサイズ設定が効いていて、なかなか思うように変更できないことがあります。できるだけ編集画面上でサイズを選択・設定するのがよさそうです。

編集画面上で設定できない場合どうするか

WordPressの編集画面上だけでは、どうしても設定できないことがあります。
それはどこで設定するのか？と悩んでいましたが、先日のWordCampで「theme.json で設定できるよ」と教えてもらえたので、クリアになりました。

制作・構築方法の分からない点は生成AIに聞く

ブロックテーマは分からないことだらけなので、私の場合は生成AIを駆使して学習しました。
Grokはツールの操作などに詳しいため、よく使っています。比較的新しい情報が得られます。

ただ、ブロックテーマに関する情報がまだWeb上に少ないせいか、細かなノウハウはGrokでも知らない様子です。根掘り葉掘り尋ねていると、嘘を言い始めます😊

Grokの回答はマニアックなため、分かりにくいときはChatGPTに尋ねたり、Google関連の情報ならGeminiやAIモードに尋ねたりして解決可能です。

WordPressについての自分の疑問Q&A

そのほか、WordPressを使っていて感じた素朴な疑問について調べてみました。

サイトエディターは将来も維持される？

サイトデータは将来も使えるだろうか？途中で仕様が変わって、せっかく作ったデザインが使えなくなるのではないだろうか？という疑問がふとよぎりました。

しかし、WordPressには「後方互換性の原則」があり、新しいバージョンでも過去に作成したテーマやプラグインが稼働するように設計されています。ひとまず安心して使えそうです。

参考：WordPress.org「後方互換性」

投稿一覧でタイトルのカラム幅を広げられる？

ライターの仕事を始めてから、投稿タイトルは一定の長さをキープするようになってきたため、WordPress管理画面の投稿一覧では、タイトルの折り返しが多くて見にくく感じることが多くなりました。

カラム幅を広げる方法はあるかな？と調べたところ、一覧上部の「表示オプション」で設定可能でした。表示するカラムが選択できるため、本当に必要なカラムだけを表示するように絞ると、タイトルのカラムが広くなります。

また、表示モードで「拡張表示」を選択すると、タイトルの下にディスクリプションが表示されるようになります。ライターとしては便利だと思いました。

画像サイズ変更はどうすればいい？

アップロードした画像のサイズがほとんど1920pxだったため、大きすぎたかな？と思いました。パフォーマンス向上のために、サイズを小さくすることを考えました。

結論としては、その必要はなさそうです。

WordPressのメディア画面に編集機能がありますが、ここで画像サイズを変更すると、すでに投稿に貼っている画像のURLから変わってしまってリンクが切れるようです。

また、画像をアップロードした際に自動的に大小複数の画像が生成されるため、小さな画像を使う場合は該当するサイズの画像URLを指定するだけでよいでしょう。
レスポンシブ対応のテーマでは、画面サイズに応じてリンクされる画像が変化するため、変更する場合はデザインの設定を変える必要があります。

PS. WordPressが生成する画像サイズは、メディア設定に表示されているサムネイル・中サイズ・大サイズ以外にも存在するのです。
アップロードされた画像のサイズは、FTPソフトで /wp-content/uploads/ 以下の画像ファイル名を見れば確認できます。

まとめ

自分のWebサイトをリニューアルする過程を、できるだけ詳しく紹介しました。

すべて自力でのリニューアルで、無償のツールだけを使用しているため、費用はかかっていません。結果として満足のいくWebサイトができました。
ブロックテーマの理解が深まったこと、Web制作の感覚が戻ってきたことなども大きな収穫です。

また、WordPressと格闘することでWordPressコミュニティの人たちとの距離も近づいたように感じます。WordCampが開催される時期だったこともラッキーでした。

Web制作はやることが多く、近年は概念が難しくなったり、新しいやり方にシフトしてきたりしています。多くのサイトを制作している人は凄いなと改めて思います。

一方で、よいサイトを作るには、何人かの専門家が関わってチームで作るべきだろうとも思いました。私はライターとして、Webサイトにコンテンツの側面から関わっていければ最高だなと感じた次第です。