HTMLファイルをWordPressに載せる方法｜初心者でもできるLP（ランディングページ）の作り方

はじめに
1. 「LPをHTMLで作ってWordPressに載せたい」人が増えている理由
2. この記事でできること
HTMLをWordPressで使うって、どういうこと？
固定ページでLPを作る方法（初心者におすすめ）
デザインを整えるには：CSSを読み込む方法
よくあるトラブルと対処法
LPをWordPressに置くメリット
まとめ

はじめに

「LPをHTMLで作ったけど、WordPressにどうやって載せたらいいの？」
そんな疑問を持ったことはありませんか？

たとえば――

無料テンプレートでLP（ランディングページ）を作ってみたけど、公開の仕方がわからない
外注で作ってもらったHTMLファイルを、自分のWordPressサイトに反映したい
投稿ページと固定ページ、どっちで作るのが正解？

こんなふうに、「WordPressにHTMLを載せる」段階でつまずいてしまう人はとても多いです。

WordPressは便利なサイト管理ツールですが、
「テーマ」や「ブロックエディタ」などの仕組みがHTMLと少し違うため、
ただHTMLファイルをアップロードしただけでは、きれいに表示されません。

でもご安心ください。
実は、WordPressの仕組みを少しだけ理解すれば、
HTMLで作ったLPをきれいに反映することができます！

「LPをHTMLで作ってWordPressに載せたい」人が増えている理由

最近は、ブログやサービスサイトをWordPressで運営している方が、
キャンペーンページ・セミナー告知ページなどをLPとして1枚だけ追加したい、というケースが増えています。

たとえば：

ブログを読んでくれた人に、メルマガ登録を案内したい
期間限定の講座・イベントを紹介したい
企業サイトの中にキャンペーンページを追加したい

こういった目的なら、既存のWordPressサイトの中にHTMLで作ったLPを追加するのが一番効率的です。
新しくサーバーを用意する必要もなく、SEO的にも同じドメインのまま運用できるからです。

この記事でできること

この記事では、HTMLファイルをWordPressに反映する方法の中でも、
初心者の方でも簡単にできる**「固定ページにHTMLを貼る方法」**を中心に解説します。

読むだけで次のことがわかります：

WordPressでHTMLを使う基本的な考え方
固定ページにHTMLを貼る手順（初心者向け）
画像やCSSが表示されないときの対処法
コードを触らずにデザインを整えるコツ

そして、少し慣れてきた方向けに、
「HTMLファイルをそのままアップロードして独立ページ化する方法」も紹介します。

HTMLをWordPressに載せるのは、最初は少しハードルが高く感じるかもしれません。
でも、仕組みがわかればとてもシンプル。
この記事を読めば、「LPをWordPressで公開できた！」というところまで、一緒にたどり着けるはずです。

次の章では、
「そもそもHTMLをWordPressで使うってどういうこと？」
という基本を、初心者さんにもわかるように整理していきましょう。

HTMLをWordPressで使うって、どういうこと？

まず整理しておきたいのが、
「WordPressとHTMLって、そもそもどう違うの？」という部分です。

WordPressも、最終的にはすべてのページがHTMLで表示されています。
つまり、WordPressは「自動でHTMLを作ってくれる仕組み」なんです。

WordPressの中ではこんなことが起きています

あなたが「投稿を追加」や「固定ページを作成」して文章を書くと、
その内容はWordPressのデータベースに保存されます。
そして、ブラウザでそのページを開いたときに、
WordPressがテーマのデザインをもとにHTMLを生成して表示してくれるという流れです。

ちょっとイメージしてみてください。

🧱 HTML：ページの骨組み（見出し・段落・ボタンなど）
🎨 CSS：見た目を整える服（色・余白・フォントなど）
🧠 WordPress：それらを自動で組み立てて見せる仕組み

だから「HTMLをWordPressに載せる」には2通りの考え方がある

HTMLで作ったページをWordPressに反映する方法は、大きく分けて2つあります。

方法	特徴
① WordPressの管理画面でHTMLを貼る	簡単・初心者向け。固定ページにそのままコードを貼るだけ
② HTMLファイルをサーバーにアップする	WordPressに依存せず、独立したページとして使える

どちらも最終的には「HTMLページをブラウザで表示する」ことに変わりありませんが、
WordPressのテーマやプラグインの影響を受けるかどうかが違います。

固定ページを使うのが初心者にはおすすめ

HTMLファイルをそのままアップロードする方法もありますが、
FTPソフトやサーバー操作に慣れていないと少し難しいです。

そこでおすすめなのが、固定ページを使ってHTMLを貼る方法。
WordPressの管理画面だけで完結するので、
「コードをいじるのは怖い…」という方でも安心して試せます。

さらに、固定ページで作ったLPは
ブログ記事やトップページと同じドメイン内に設置できるので、
SEO的にも有利です。

固定ページでLPを作る流れ（ざっくり）

固定ページを新規作成
コードエディタでHTMLを貼り付け
必要に応じてCSSを調整
プレビューでデザイン確認
「公開」をクリックして完成！

この方法なら、1ページ完結型のLPをテーマを壊さずに追加できます。

次の章では、実際に固定ページにHTMLを貼りつけて、
WordPress上でLPを作る手順を詳しく見ていきましょう。

固定ページでLPを作る方法（初心者におすすめ）

ここからは、いよいよ実践です。
実際にWordPressの管理画面を使って、HTMLで作ったLPを公開してみましょう。

「コードを触るのはちょっと怖い…」という方でも大丈夫！
固定ページを使えば、HTMLをコピペするだけで1枚のLPを作ることができます。

ステップ①：固定ページを新規作成する

まずはWordPressの管理画面を開きましょう。

サイドメニューの「固定ページ」→「新規追加」をクリック
タイトルを入力（例：「キャンペーンページ」「資料請求LP」など）

タイトルはあとでURLにも使われるので、
「lp」や「campaign」など英語にしておくときれいです。

💡 **URLスラッグ（パーマリンク）**も忘れずにチェック！
「固定ページを公開」→「URLを編集」で短くわかりやすくしておきましょう。
例：https://example.com/lp/

ステップ②：HTMLを貼り付ける

次に、HTMLのコードを貼ります。

右上の「…（三点マーク）」をクリック
「コードエディター」を選択
お手持ちのHTMLファイルを開き、中身をコピーして貼り付けます

ここで注意してほしいのが、
<html>や<head>、<body>といった外側のタグは不要という点です。

WordPressでは、すでにテーマがHTMLの骨組みを作っているため、
貼るのは**本文部分だけ（＝bodyの中身）**でOKです。

例：貼るのはここだけ！

✅ OKな部分（貼っていい）

<section class="lp-main">
  <h1>キャンペーン開催中！</h1>
  <p>今だけ初月無料でお試しいただけます。</p>
</section>

❌ 不要な部分（削除しておく）

<!DOCTYPE html>
<html>
  <head>...</head>
  <body> ←ここ以降の中身だけ使う
  </body>
</html>

ステップ③：プレビューで表示を確認する

「プレビュー」ボタンを押して、実際に表示を確認してみましょう。

もしデザインが崩れていたら、
次の2点をチェックしてみてください。

画像が表示されない → 画像のリンク先が正しいか？
CSSが反映されない → テーマや追加CSSとの競合がないか？

これらは次の章で詳しく解説しますが、
とくに画像パス（URLの指定ミス）は初心者が一番つまづくポイントです。

ステップ④：余白やフォントを調整する

WordPressテーマによっては、
固定ページに自動で余白やフォントスタイルが適用されます。

「ちょっと狭いな」「フォントが変わっちゃった」
というときは、追加CSSで微調整すればOKです。

管理画面「外観」→「カスタマイズ」→「追加CSS」
以下のようなコードを追加

.lp-main {
  max-width: 1000px;
  margin: 0 auto;
  font-family: "Noto Sans JP", sans-serif;
}

これでデザインが整いやすくなります。

ステップ⑤：公開する

デザインが確認できたら、最後に「公開」ボタンをクリック。
これで、あなたのLPがWordPress上で見られるようになります！

たとえば：
https://example.com/lp/
というURLでアクセスできるようになります。

ちょっとしたコツ💡

公開前にスマホ表示もチェック！（レスポンシブ対応）
長いページなら、目次ブロックや「トップに戻る」ボタンを追加しておくと親切
フォームやCTAボタンは「Contact Form 7」などのプラグインで作ると便利

ここまでで、WordPress上にHTMLを貼ってLPを公開することができました。
次の章では、画像が表示されない／CSSが反映されないときの対処法を紹介します。
この部分で悩む人がとても多いので、丁寧に解説していきましょう。

デザインを整えるには：CSSを読み込む方法

固定ページにHTMLを貼ったとき、
「文字の大きさや色が変わっちゃった…」
「背景が真っ白になった…」
なんてことはありませんか？

それは、**CSS（デザインのルール）**が反映されていないのが原因です。
HTMLは“ページの骨組み”なので、CSSがないと素っ気ない見た目になってしまいます。

ここでは、WordPressでCSSを反映させる簡単な2つの方法を紹介します。

方法①：カスタマイザーでCSSを追加する（いちばん簡単！）

WordPressには「追加CSS」という機能があり、
テーマに直接触らずに見た目を調整することができます。

手順

管理画面で「外観」→「カスタマイズ」
左メニューの中から「追加CSS」をクリック
下記のようなコードを貼り付けます

/* LP全体のレイアウト */
.lp-section {
  padding: 40px 0;
  background-color: #f9f9f9;
}

/* 見出しのデザイン */
.lp-section h2 {
  font-size: 1.8rem;
  color: #333;
  text-align: center;
  margin-bottom: 1em;
}

「公開」をクリックすればOK！

あとは、固定ページ内でこのクラス名を使えば反映されます。

<section class="lp-section">
  <h2>サービスの特徴</h2>
  <p>私たちのサービスは初心者でも安心して始められます。</p>
</section>

これでページ全体にスタイルが反映され、デザインが整います。

方法②：プラグインを使ってページごとにCSSを追加する

もし「LP専用のCSSだけを使いたい」場合は、
プラグインを使う方法が便利です。

おすすめは次の2つ：

プラグイン名	特徴
Simple Custom CSS and JS	ページ単位でCSSやJavaScriptを追加できる
Header Footer Code Manager	指定したページだけにコードを挿入できる

例：Simple Custom CSS and JS の使い方

プラグインをインストールして有効化
「Custom CSS & JS」→「Add CSS Code」をクリック
コードを貼り、下部の「Where in site?」で「Only on Pages」を選択
対象ページ（LP）を選んで保存

これで、そのページだけにCSSを適用できます。
他の投稿や固定ページに影響しないのがメリットです。

方法③（中級者向け）：CSSファイルを直接読み込む

少し慣れてきたら、HTMLファイルで使っていたCSSを
WordPressにそのまま読み込むこともできます。

style.css をサーバーにアップロード（例：/wp-content/uploads/lp/style.css）
固定ページに以下を埋め込む

<link rel="stylesheet" href="https://example.com/wp-content/uploads/lp/style.css">

これで、外部CSSとして読み込まれます。
ただし、この方法はエディタによってはHTMLを自動整形してしまうことがあるため、
プレビューで崩れないか確認しましょう。

デザイン調整のコツ💡

テーマの影響を受けないクラス名を使う
→ 例：.lp-section や .campaign-wrapper など、他と被らない名前にする
余白（margin/padding）を自分で指定
→ WordPressテーマが自動で余白をつける場合があるため、上書き指定を
フォントや色を一括管理
→ カスタマイザーでベースフォントを変えるだけでもLPの印象が統一されます

CSSの設定が終われば、見た目はほぼ完成！
ここまでできたら、いよいよ最終チェックです。
次の章では、画像やボタンがうまく表示されないときの対処法をまとめます。

よくあるトラブルと対処法

ここまでの手順でLPを作ることはできましたが、
いざプレビューしてみると「なんか崩れてる…」ということもありますよね。

実はそれ、WordPressあるあるなんです。
ここでは、初心者さんがつまずきやすい3つのトラブルと、すぐできる解決方法を紹介します。

トラブル①：画像が表示されない

一番多いのがこのケースです。
HTMLではきちんと画像を指定しているのに、WordPress上では真っ白…。

原因の多くは「画像パス（URL）の指定」です。

よくある間違い

<img src="img/sample.jpg" alt="サンプル画像">

これだと、HTMLファイルと同じ階層に「img」フォルダがある前提になります。
でもWordPressではその構造が違うため、リンクが切れてしまうんです。

正しい書き方

WordPressの「メディア」→「新規追加」で画像をアップロード
アップロード後の「ファイルURL」をコピー
HTMLでそのURLを使う

<img src="https://example.com/wp-content/uploads/2025/10/sample.jpg" alt="サンプル画像">

これで確実に表示されます！

💡 ポイント

メディアライブラリを使えば、URLが自動生成されるのでパスミスが防げます。
将来的に画像を差し替えるときも、管理画面から行えるので安心です。

トラブル②：CSSが反映されない

「HTMLを貼ったけど、デザインが全部消えた！」
そんなときは、CSS（デザインルール）がうまく読み込まれていません。

原因①：相対パスのままになっている

<link rel="stylesheet" href="css/style.css">

これも「img」と同じで、WordPressではそのフォルダ構成がないため反映されません。

対処法

CSSファイルをWordPressにアップロードして、URLを絶対パスで指定します。

<link rel="stylesheet" href="https://example.com/wp-content/uploads/lp/style.css">

もしくは、前章で紹介したように「追加CSS」機能を使うと確実です。

原因②：テーマやプラグインのスタイルが上書きしている

WordPressでは、テーマやブロックエディタのCSSが先に読み込まれている場合があります。
その場合は、CSSの優先度を上げることで解決できます。

.lp-section h2 {
  color: #333 !important;
}

!important はあまり多用しない方がいいですが、
ピンポイントで指定する分にはOKです。

トラブル③：レイアウトが崩れる・余白がおかしい

「WordPressに貼ると行間が広がる」
「画像と文字の間がずれる」
といった微妙な崩れは、テーマ固有のCSSが影響していることが多いです。

対処法①：全体をラップする

HTML全体をひとつのdivで囲ってあげると、影響を受けにくくなります。

<div class="lp-wrapper">
  <!-- ここにLPのHTMLをすべて入れる -->
</div>

そして、追加CSSで次のように設定します。

.lp-wrapper {
  all: initial;   /* テーマのCSSをリセット */
  font-family: "Noto Sans JP", sans-serif;
  color: #333;
}

これで、LPだけ独立したデザインにできます。

対処法②：ブロックエディタを「HTMLモード」で貼る

段落ブロックやグループブロックの中にHTMLを入れると、
WordPressが自動で余白を追加してしまうことがあります。
右上の「コードエディター」モードで貼り直すと、余分なスタイルが消えます。

トラブル④（おまけ）：スマホでデザインが崩れる

パソコンでは完璧なのに、スマホで見たら崩れている…というのもあるあるです。
この場合は、CSSにレスポンシブ指定（@media）が入っているか確認しましょう。

@media (max-width: 768px) {
  .lp-section h2 {
    font-size: 1.4rem;
  }
}

また、WordPressテーマの「meta viewport」が効いているかも要確認です。
大抵のテーマには最初から入っていますが、
古いテーマでは <meta name="viewport"> が抜けていることもあります。

まとめ：困ったときのチェックリスト

チェック項目	確認ポイント
🖼 画像が出ない	パスが相対パスになっていないか
🎨 CSSが反映されない	ファイルURLが正しいか／追加CSSを使ったか
📱 スマホで崩れる	レスポンシブ指定があるか
🧱 余白やフォントが違う	テーマCSSの上書きをリセットできているか

LPをWordPressに置くメリット

「HTMLで作ったLP、サーバーにそのまま置くだけでもいいんじゃない？」
と思う方もいるかもしれません。

たしかにHTMLファイルを直接アップロードしてもLPは表示されます。
でも、WordPress上で管理することで得られるメリットはとても大きいんです。

ここでは、WordPressでLPを作る3つの主なメリットを紹介します。

1. SEOの評価を引き継げる

WordPressサイトの中にLPを設置すれば、
ドメインパワー（SEOの評価）をそのまま活かすことができます。

たとえば：

ブログ記事がすでに上位表示している
サイト全体に被リンク（外部からの評価）がある

こうしたSEOの評価をLPにも反映できるんです。
つまり、新しくサブドメインや別サーバーでLPを公開するよりも、
検索に強く、アクセスを集めやすいということです。

💡 例

◎ WordPress内に設置する場合：
https://example.com/lp/

× 別サーバーに設置する場合：

https://example-lp.com/
example-lp.com

同じドメイン内で運用すれば、Googleから「このサイトの一部」として認識され、
LPもサイト全体の評価に貢献してくれます。

2. 更新・修正がかんたん

WordPressの固定ページにLPを作っておけば、
後から管理画面だけで修正できるのも大きなメリットです。

文字を直す
画像を差し替える
新しいキャンペーンに変更する

こうした作業を、わざわざFTPソフトでアップロードし直す必要がありません。

また、プラグインを使えば以下のような機能もすぐ追加できます。

アクセス解析（Google Analytics / Tag Manager）
申し込みフォーム（Contact Form 7など）
A/Bテスト（CTAのボタン色変更など）

コードをほとんど触らずに管理画面から完結できるのは、
WordPressならではの強みです。

3. デザイン統一で信頼感が出る

WordPressテーマを使っている場合、LPを同じテーマ内で作ると、
ヘッダーやフッター、フォントや色味が全体と揃います。

たとえば企業サイトや講座紹介サイトであれば、
LPだけが別デザインだと「別サイトみたい…」と感じられてしまうこともあります。

WordPress上でLPを作れば、全体の世界観が統一され、
ユーザーに安心感や信頼感を与えられます。

💡 ポイント

ヘッダーやフッターを非表示にしたい場合は、
　LP用テンプレートやCSSで簡単に調整可能。
デザインは統一しつつ、ページごとの目的（CTA）を明確にするのがコツ。

4. 管理・分析がまとめてできる

HTMLファイルを別で管理すると、
アクセス解析やコンバージョン計測を設定するたびに手間がかかります。

WordPressなら、
プラグインやテーマ機能でLPの効果測定まで一元管理できます。

「どのボタンがクリックされたか」
「どの記事経由でLPに来たか」
「どのデバイスで見られているか」

こうしたデータをまとめて見られるので、
PDCA（改善のサイクル）を回しやすくなります。

5. フォームやCTAボタンとの連携が簡単

LPの目的は、最終的に「アクションを取ってもらう」こと。
（例：問い合わせ、資料請求、メルマガ登録など）

WordPressでは、
「Contact Form 7」「Flamingo」「WPForms」などのプラグインを使うだけで、
かんたんにフォームを設置できます。

HTMLでフォームを組むより安全で、スパム防止機能なども標準で使えます。

まとめ：WordPressでLPを作るのは“長く使う”人にぴったり

メリット	内容
🔍 SEOに強い	ドメイン評価を引き継げる
🛠 更新が楽	管理画面だけで編集できる
🎨 統一感が出る	サイト全体とデザインを揃えられる
📊 効果測定できる	プラグインでアクセス分析が簡単
💬 フォーム設置が簡単	申込み・問い合わせまで完結できる

HTMLで作ったLPをWordPressに載せることで、
「見た目は自由・管理は簡単・SEOにも強い」という理想の形に近づきます。

まとめ

ここまで、HTMLファイルを使ってWordPressにLPを作る方法を見てきました。

最初は難しく感じたかもしれませんが、
WordPressは“仕組みさえ理解すれば自由度の高いツール”です。
あなたが作ったHTMLを、きちんとWordPress上で表示できるようになると、
一気に「自分でサイトを育てる力」が身につきます。

HTMLをWordPressで使う3つの方法（おさらい）

方法	難易度	特徴
固定ページにHTMLを貼る	⭐️ 初心者向け	管理画面だけで完結。まずはここから！
FTPでHTMLファイルをアップ	⭐️⭐️ 中級者向け	完全に独立したLPを作りたい人におすすめ
テンプレートとして組み込む	⭐️⭐️⭐️ 上級者向け	子テーマなどで管理。サイト全体の統一に◎

最初の一歩は、やはり「固定ページに貼る」方法が安心です。
WordPressの管理画面だけで完結しますし、
画像やCSSの扱いに慣れる練習にもなります。

次のステップは「見た目と動き」を磨くこと

LPが表示できるようになったら、
次は“見せ方”を少しずつ工夫してみましょう。

追加CSSで余白やフォントを整える
スクロールで動くアニメーションを入れてみる
CTA（ボタン）を目立たせてクリック率を上げる

これらは、ちょっとしたCSSの調整だけで大きく印象が変わります。
しかも、WordPressなら修正も簡単。
一度作ったLPを季節ごとにリメイクして使い回すのもおすすめです。

WordPressでLPを作る最大のメリット

HTMLファイルを直接置くよりも、
WordPress内にLPを作ることで以下の3つが実現します。

SEOに強い（ドメイン評価を引き継げる）
更新が簡単（管理画面だけで修正できる）
デザインが統一される（サイト全体に信頼感が出る）

これは、HTML単体では得られないWordPressならではの強みです。

さいごに

HTMLで作ったLPをWordPressに載せるのは、
「ちょっとハードルが高そう…」と思われがちですが、
実際にやってみると、意外とシンプルです。

最初の1枚を表示できた瞬間、
「これなら自分でもLP作れる！」という自信がつくはず。

まずは小さく試して、少しずつデザインや構成を磨いていきましょう。
きっと、あなたのサイトをより多くの人が訪れるようになりますよ。