WordPressのデザインをEmDashに移す｜企業サイトで試した手順

2026.10.24

WordPressで作ったサイトを、CloudflareのCMS「EmDash」に移すとき、いちばん気になるのは「今の見た目のまま移せるのか」です。

EmDashにはテーマの着せ替えが無く、WordPressのテーマもそのままでは動きません。

そこで当社の企業サイト（WordPress＋SWELL）のトップページを、EmDashで同じ見た目に作り直してみました。

この記事では、その手順と、移せたもの・移せなかったものを、比較画像つきでまとめます。

最終調査日：2026年10月24日

作り直したページは emdash.motoki-dev.com/case/motoki-top/ で公開しています（検証用のため、検索エンジンには出していません）。

この検証をもとに、移行のご相談を受ける案内のページ（WordPressからEmDashへの移行）もEmDashで作りました。

EmDashの基本は「WordPressとEmDashの違い」と「EmDashの管理画面でできること」で解説しています。

この記事で分かること

WordPressの見た目をEmDashに移せるか、どこまで同じにできたか
移すときに触ったファイルと、作業の順番
WordPress側で、見た目の材料がどこに散らばっていたか
移行を頼む前・引き受ける前に確かめておくこと

結論：見た目は移せる。ただし「移す」より「作り直す」に近い

項目	結果	やり方
色・フォント	同じにできた	SWELLの設定値とフォントのファイルをそのまま持ってきた
ヘッダー・フッター・お問い合わせ帯	同じにできた	Astroのレイアウトをコードで作り直した
トップの各セクション	同じにできた	ブロックの構成を見て、HTMLとCSSで組み直した
スマートフォン表示	同じ考え方で作れた	CSSで書き直した。メニューの開閉も作り直し
お知らせの一覧	管理画面から更新できる形で移せた	WordPressの投稿を取り込み、カテゴリーで絞って表示
メニュー	管理画面から変えられる形にした	EmDashのメニューを読み、無ければ元と同じ並びを出す
トップの文言（キャッチコピー・実績の数字など）	移せたが、コードの中に入った	変えるたびにコードの編集とデプロイが要る
SWELLのブロックそのもの	持っていけない	見た目だけをCSSで再現した

見た目は、並べて見比べても違いが分からない程度まで寄せられました。

ただ、WordPressのテーマや設定を「変換」したわけではありません。

元のサイトを材料にして、EmDash（Astro）のコードとして書き直しています。

移行前と移行後の比較

同じ幅（1440px）で、同じ場所を撮って並べました。

WordPress（SWELL）で作った企業サイトのトップのメインビジュアル — 移行元：WordPress（SWELL）のトップ（2026/10/24時点の表示）

EmDashで作り直した同じトップのメインビジュアル。上に検証用の告知帯がある — 移行先：EmDashのトップ。上の黒い帯は検証用の告知（2026/10/24時点の表示）

WordPress版の制作実績と取引先ロゴの並び — WordPress：制作実績と取引先のロゴ（2026/10/24時点の表示）

EmDash版の制作実績と取引先ロゴの並び — EmDash：同じ並びを Astro のコードで組んだもの（2026/10/24時点の表示）

WordPress版のお問い合わせ帯とフッター — WordPress：お問い合わせ帯とフッター（2026/10/24時点の表示）

EmDash版のお問い合わせ帯とフッター — EmDash：お問い合わせ帯とフッター（2026/10/24時点の表示）

スマートフォンの幅でも、メインビジュアルの縦積みやメニューの開閉を元と同じ考え方で作っています。

EmDash版のトップをスマートフォンの幅で表示した画面 — EmDash：スマートフォンの幅（375px）（2026/10/24時点の表示）

移行の手順

1. WordPress側の「見た目の材料」を集める

最初にやったのは、元のサイトの見た目がどこで決まっているかの棚卸しです。

SWELLのサイトでは、見た目の材料が5か所に散らばっていました。

材料	WordPressでの置き場所	EmDashでの置き場所
メインカラー・黒・灰色	SWELLのカスタマイザー（CSS変数 –color_main など）	theme.css の変数
独自のCSS	Arkhe CSS Editor と子テーマ	corp.css（新しく作成）
フォント	子テーマに置いた Noto Sans JP の分割WOFF2（34ファイル）	public/fonts に同じファイルを置いた
メインビジュアル	SWELLのメインビジュアル設定	トップページのコード
お問い合わせ帯・フッター	ブログパーツとウィジェット	レイアウトのコード
トップの中身	固定ページ（SWELLのカラム・フルワイド・ボタンなどのブロック）	トップページのコード

色の値は、公開ページのCSS変数を読めば取れます。

独自CSSとブロックの構成は、管理画面とWP-CLIで書き出して確かめました。

画像は自社のサイトのものなので、そのまま持ってきています。

2. 色とフォントを theme.css に書く

EmDashのテンプレートは、色や余白を tokens.css に既定値として持ち、theme.css で上書きする作りです。

SWELLの設定値を、そのまま変数に写しました。

:root {
  color-scheme: light;          /* 元のサイトはライトモードだけ */
  --corp-main: #b09d7b;         /* SWELL の --color_main */
  --corp-black: #202020;
  --corp-gray: #e5e5ec;
  --color-text: #333333;
  --font-body: "NotoSansJP", sans-serif;
}

フォントは、元のサイトで使っている分割済みのWOFF2ファイルと、読み込み用のCSSをそのまま使いました。

Noto Sans JPはオープンソースのライセンスなので、別のサイトに置いても問題ありません。

有料のフォントを使っているサイトでは、移行先のドメインで使えるかを先に確かめる必要があります。

3. ヘッダーとフッターをレイアウトに書く

ヘッダー・お問い合わせ帯・フッターは、全ページ共通のレイアウト（Base.astro）に書きました。

このファイルには、EmDashが動くための部品（EmDashHead など）も入っているので、そこは残して、見た目の部分だけを差し替えています。

テンプレートにあった検索窓とダークモードの切り替えは、元のサイトに無いので外しました。

メニューは、管理画面の「メニュー」に corp という名前のメニューがあればそれを使い、無ければ元のサイトと同じ5項目を出すようにしました。

WordPressと同じく、担当者が管理画面からメニューを変えられる形を残すためです。

4. トップページを組み直す

トップページ（index.astro）には、メインビジュアル・制作実績・私たちについて・実績の数字・サービス・お知らせの6つのセクションを書きました。

SWELLのブロック（カラム・フルワイド・ボタン）は持っていけないので、同じ見た目になるHTMLとCSSを書いています。

制作実績やサービスの文言は、コードの中に配列として持たせました。

5. お知らせはWordPressから取り込む

お知らせだけは、管理画面から増やせる形にしたかったので、WordPressの投稿を取り込みました。

WordPressのツールで書き出したファイル（WXR）を、EmDashの「インポート」に入れると、6件の投稿と7枚の画像がそのまま入りました。

カテゴリー「お知らせ」もそのまま移るので、トップではそのカテゴリーの新しい3件を出しています。

const { entries: news } = await getEmDashCollection("posts", {
  where: { category: "news" },
  orderBy: { published_at: "desc" },
  limit: 3,
});

取り込んだ投稿の本文は、普通の段落と画像だけで書かれていたので、崩れずに移りました。

テーマ独自のブロックがある記事の崩れ方は「EmDashの管理画面でできること」のインポートの節で触れています。

6. 並べて見比べ、違いを直す

ローカルで表示して元のサイトと並べると、最初の段階で3つの違いが見つかりました。

見つかった違い	原因	直し方
画面の左右に縦の細い線が出る	EmDashのテンプレートが持っている飾りの線	CSSで消した
サービスの画像が入れ替わっていた	ブロックの並び順を読み違えた	元の並びに合わせて直した
フッターのロゴが見えない	黒いロゴを、元のサイトはCSSで反転して白く見せていた	同じ指定を足した

2つ目と3つ目は、元のサイトのコードを読むだけでは気づけず、画面を並べて初めて分かりました。

見た目の移行では、最後に「同じ幅・同じ位置で並べて見る」工程を入れたほうがいいと感じました。