WordPressでHTMLを編集・埋め込む方法｜初心者でもできるカスタマイズ完全ガイド

はじめに

WordPressは、専門的なプログラミング知識がなくてもサイトやブログを作成できる便利なCMSです。しかし、記事内に独自のデザインを入れたい、GoogleマップやYouTubeを埋め込みたい、広告タグを設置したいといった場面では、HTMLの編集や埋め込みが必要になることがあります。

「ワードプレスでHTMLを編集したいけれど、どこを触ればいいのかわからない」「HTMLファイルが見つからない」「コードを貼ったのに反映されない」と悩む初心者は少なくありません。

この記事では、WordPressでHTMLを編集・埋め込む基本から、投稿ページ、固定ページ、サイドバー、フッター、ヘッダー、テーマファイルの編集方法までわかりやすく解説します。初心者が安全にカスタマイズするための注意点や、表示崩れが起きたときの対処法も紹介するので、WordPressのHTML編集に不安がある方はぜひ参考にしてください。

1. WordPressでHTMLを編集・埋め込む前に知っておきたい基礎知識

1-1. WordPressでHTML編集はどこまでできる？

WordPressでは、投稿や固定ページの本文内にHTMLを追加したり、ウィジェットエリアにHTMLコードを埋め込んだり、テーマファイルを編集してサイト全体の構造を変更したりできます。

たとえば、以下のようなカスタマイズが可能です。

・記事内にボタンや囲み枠を追加する
・GoogleマップやYouTube動画を埋め込む
・広告タグやアフィリエイトタグを設置する
・サイドバーやフッターにバナーを表示する
・ヘッダーに計測タグや認証タグを追加する
・テーマファイルを編集してレイアウトを変更する

ただし、WordPressではすべてのHTMLを自由に編集できるわけではありません。テーマやプラグインによって出力されるHTMLも多く、管理画面から編集できる範囲には限りがあります。初心者はまず、投稿・固定ページ内のHTML編集やカスタムHTMLブロックの利用から始めるのがおすすめです。

1-2. WordPressに「HTMLファイル」が見つからない理由

一般的な静的サイトでは、index.htmlやabout.htmlのようなHTMLファイルを直接編集します。一方、WordPressではページがデータベースとテーマファイルによって動的に生成されます。

そのため、WordPressのサーバー内を見ても、記事ごとのHTMLファイルは基本的に存在しません。投稿本文はデータベースに保存され、アクセスされたタイミングでテーマのPHPファイルやテンプレートと組み合わされてHTMLとして表示されます。

つまり、WordPressでHTMLを編集する場合は、HTMLファイルを探すのではなく、管理画面のブロックエディター、カスタムHTMLブロック、ウィジェット、テーマファイルなど、目的に合った場所を編集する必要があります。

1-3. HTML・CSS・JavaScript・PHPの違い

WordPressでカスタマイズをする際は、HTMLだけでなくCSS、JavaScript、PHPという言葉もよく出てきます。それぞれの役割を簡単に整理しておきましょう。

HTMLは、ページの構造を作るための言語です。見出し、段落、リンク、画像、表などを配置します。

CSSは、HTMLで作った要素の見た目を調整する言語です。文字色、背景色、余白、レイアウト、スマホ表示などを指定します。

JavaScriptは、ページに動きを加えるための言語です。クリック時の動作、スライダー、ポップアップ、フォームの制御などに使われます。

PHPは、WordPress本体やテーマで使われているサーバー側のプログラム言語です。投稿一覧を表示したり、ヘッダーやフッターを読み込んだり、条件によって表示内容を変えたりします。

初心者が最初に覚えるなら、まずはHTMLとCSSからで十分です。PHPはサイト全体に影響するため、理解しないまま編集するのは避けましょう。

1-4. 初心者が編集してよい場所・避けるべき場所

WordPress初心者がHTMLを編集するなら、比較的安全なのは以下の場所です。

・投稿や固定ページの本文
・カスタムHTMLブロック
・ウィジェットのカスタムHTML
・外観カスタマイズの追加CSS
・コード追加用プラグイン

反対に、初心者がいきなり編集するのを避けたい場所は以下です。

・テーマファイルエディター
・functions.php
・header.phpやfooter.phpなどの重要ファイル
・WordPress本体ファイル
・プラグイン本体ファイル

特にfunctions.phpやテーマファイルの編集ミスは、サイトが真っ白になる原因になります。編集する場合は必ずバックアップを取り、できれば子テーマを使いましょう。

2. WordPressでHTMLを編集する主な方法

2-1. 投稿・固定ページ内のHTMLを編集する方法

WordPressでHTMLを編集する最も基本的な方法は、投稿や固定ページの編集画面を使う方法です。ブロックエディターでは、通常はビジュアル画面で文章を入力しますが、必要に応じてHTMLを確認・編集できます。

投稿や固定ページ内でHTMLを編集する場合は、編集したいページを開き、対象ブロックのオプションから「HTMLとして編集」を選びます。すると、そのブロックのHTML構造を確認できます。

たとえば、通常の段落は以下のようなHTMLになります。

HTML
<p>これはWordPressの記事本文です。</p>

リンクを含む文章なら、以下のようになります。

HTML
<p>詳しくは<a href="https://example.com">こちら</a>をご覧ください。</p>

一部の文章だけHTMLで整えたい場合は、この方法が便利です。

2-2. カスタムHTMLブロックでHTMLを追加する方法

カスタムHTMLブロックは、WordPressでHTMLコードを埋め込むときに最も使いやすい方法です。ブロックエディターで「＋」ボタンをクリックし、「カスタムHTML」を選択すると、HTMLコードを直接入力できます。

たとえば、記事内にボタン風のリンクを追加したい場合は、以下のように記述できます。

HTML
<a href="https://example.com" class="custom-button">詳しく見る</a>

カスタムHTMLブロックでは、入力したHTMLをすぐにプレビューできるため、初心者でも確認しながら作業できます。Googleマップ、YouTube、広告タグ、外部サービスの埋め込みコードにもよく使われます。

2-3. コードエディターで記事全体のHTMLを編集する方法

ブロックエディターには、記事全体のHTMLを確認できる「コードエディター」があります。画面右上のメニューから「コードエディター」を選ぶと、投稿全体のHTMLやブロックコメントを含むコードが表示されます。

ただし、ブロックエディターのコードには以下のようなWordPress独自のコメントが含まれます。

HTML
<!-- wp:paragraph -->
<p>本文が入ります。</p>
<!-- /wp:paragraph -->

このコメントはブロックの構造を管理するために必要です。誤って削除すると、ブロックが正しく認識されなくなることがあります。記事全体をHTMLで細かく編集できる反面、初心者には少し扱いが難しいため、基本的にはブロック単位で編集する方が安全です。

2-4. クラシックエディターの「テキスト」タブで編集する方法

クラシックエディターを使っている場合は、編集画面に「ビジュアル」と「テキスト」のタブがあります。このうち「テキスト」タブを開くと、HTMLを直接編集できます。

クラシックエディターでは、以下のようなHTMLをそのまま入力できます。

HTML
<h2>見出し</h2>
<p>本文です。</p>
<ul>
  <li>リスト項目1</li>
  <li>リスト項目2</li>
</ul>

古くからWordPressを使っているサイトでは、今でもクラシックエディターを利用しているケースがあります。ただし、現在のWordPressではブロックエディターが標準のため、新しく始める場合はブロックエディターの使い方に慣れておくとよいでしょう。

2-5. ブロックごとのHTMLを確認・編集する方法

ブロックエディターでは、記事全体ではなく特定のブロックだけHTMLを編集できます。対象ブロックを選択し、メニューから「HTMLとして編集」を選ぶだけです。

たとえば、見出しブロックをHTMLとして見ると、以下のようになっています。

HTML
<h2>見出しタイトル</h2>

リストブロックであれば、以下のようなHTMLになります。

HTML
<ul>
  <li>項目1</li>
  <li>項目2</li>
</ul>

ブロックごとのHTML編集は、必要な部分だけを修正できるため、初心者にもおすすめです。編集後に表示が崩れた場合は、ブロックメニューから通常表示に戻すか、変更前の状態に戻しましょう。

3. WordPressにHTMLコードを埋め込む方法

3-1. カスタムHTMLブロックを使って埋め込む手順

WordPressにHTMLコードを埋め込む場合、最も簡単なのはカスタムHTMLブロックを使う方法です。

手順は以下のとおりです。

  1. 投稿または固定ページを開く

  2. HTMLを入れたい場所で「＋」をクリックする

  3. 「カスタムHTML」ブロックを選択する

  4. 埋め込みたいHTMLコードを貼り付ける

  5. 「プレビュー」で表示を確認する

  6. 問題なければ公開または更新する

カスタムHTMLブロックは、通常の文章ブロックとは違い、HTMLコードをそのまま反映できます。外部サービスが発行する埋め込みコードを貼る場合にも便利です。

3-2. Googleマップを埋め込む方法

GoogleマップをWordPressに埋め込むには、Googleマップ側で取得したHTMLコードをカスタムHTMLブロックに貼り付けます。

基本的な流れは以下です。

  1. Googleマップで埋め込みたい場所を検索する

  2. 「共有」をクリックする

  3. 「地図を埋め込む」を選択する

  4. HTMLコードをコピーする

  5. WordPressのカスタムHTMLブロックに貼り付ける

Googleマップの埋め込みコードは、一般的にiframe形式です。

HTML
<iframe src="https://www.google.com/maps/embed?..." width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

スマホ表示で横幅がはみ出す場合は、width="100%"に変更すると画面幅に合わせやすくなります。

3-3. YouTube動画を埋め込む方法

YouTube動画は、URLをそのまま貼り付けるだけでもWordPressが自動的に埋め込んでくれます。ただし、細かくサイズを調整したい場合や、YouTubeが発行する埋め込みコードを使いたい場合は、カスタムHTMLブロックを使います。

YouTubeの「共有」から「埋め込む」を選ぶと、以下のようなコードを取得できます。

HTML
<iframe width="560" height="315" src="https://www.youtube.com/embed/動画ID" title="YouTube video player" frameborder="0" allowfullscreen></iframe>

記事内に動画を入れると、読者の滞在時間向上につながることがあります。ただし、動画を入れすぎるとページが重くなる場合があるため、必要な場所に絞って埋め込みましょう。

3-4. iframeコードを埋め込む方法

iframeは、外部サイトのコンテンツをWordPressページ内に表示するためのHTMLタグです。Googleマップ、YouTube、予約フォーム、SNS投稿、外部ツールなどの埋め込みでよく使われます。

基本形は以下です。

HTML
<iframe src="https://example.com" width="100%" height="400"></iframe>

ただし、すべてのサイトがiframe埋め込みに対応しているわけではありません。外部サイト側で埋め込みが禁止されている場合、WordPressにコードを貼っても表示されないことがあります。

また、iframeの高さや横幅が合っていないと、スクロールバーが出たり、表示が切れたりすることがあります。埋め込み後は必ずPCとスマホの両方で確認しましょう。

3-5. フォーム・広告・アフィリエイトタグを埋め込む方法

問い合わせフォーム、広告タグ、アフィリエイトタグなども、HTMLコードとしてWordPressに埋め込むことがあります。基本的には、各サービスが発行するコードをコピーして、カスタムHTMLブロックやウィジェットに貼り付けます。

たとえば、アフィリエイトリンクは以下のようなHTML形式で発行されることがあります。

HTML
<a href="https://example.com" rel="nofollow sponsored">商品ページを見る</a>

広告タグには、HTMLだけでなくJavaScriptが含まれることもあります。JavaScriptが含まれるコードは、エディター上で消えたり正常に動作しなかったりする場合があるため、専用の広告管理プラグインやタグ管理プラグインを使うと安全です。

3-6. 埋め込み後にプレビューで確認するポイント

HTMLコードを埋め込んだ後は、公開前に必ずプレビューで確認しましょう。特に以下の点をチェックすることが大切です。

・コードがそのまま文字として表示されていないか
・リンク先が正しく開くか
・画像や動画が表示されるか
・スマホで横幅がはみ出していないか
・余白や位置が不自然になっていないか
・ページの読み込みが遅くなっていないか

HTMLは少しの記述ミスでも表示崩れにつながります。公開前にプレビューで確認する習慣をつけることで、トラブルを防ぎやすくなります。

4. サイドバー・フッター・ヘッダーにHTMLを追加する方法

4-1. ウィジェットエリアにカスタムHTMLを追加する方法

サイドバーやフッターにHTMLを追加したい場合は、ウィジェットエリアの「カスタムHTML」を使います。

管理画面から「外観」→「ウィジェット」を開き、HTMLを追加したいエリアに「カスタムHTML」ブロックを配置します。そこにバナー、リンク、プロフィール、広告タグなどのHTMLを入力すれば、サイドバーやフッターに表示できます。

たとえば、バナーリンクを設置する場合は以下のように記述します。

HTML
<a href="https://example.com">
  <img src="https://example.com/banner.jpg" alt="バナー">
</a>

ウィジェットエリアはテーマによって用意されている場所が異なります。サイドバーがないテーマや、フッターエリアが複数あるテーマもあるため、表示場所を確認しながら設定しましょう。

4-2. フッターにHTMLを埋め込む方法

フッターにHTMLを埋め込む方法はいくつかあります。初心者におすすめなのは、ウィジェットまたはブロック対応テーマのフッター編集機能を使う方法です。

たとえば、フッターに会社情報やコピーライトを追加する場合は、以下のようなHTMLを使えます。

HTML
<p>&copy; 2026 サイト名 All Rights Reserved.</p>

テーマによっては、外観カスタマイズ画面からフッター文言を変更できる場合もあります。また、サイト全体のフッターに計測タグや広告タグを設置したい場合は、テーマファイルを直接編集するよりも、コード追加用プラグインを使う方が安全です。

4-3. ヘッダーにタグやコードを追加する方法

ヘッダーには、Google Search Consoleの認証タグ、アクセス解析タグ、広告タグ、メタタグなどを追加することがあります。

ただし、ヘッダー領域はサイト全体に影響する重要な場所です。header.phpを直接編集する方法もありますが、初心者にはおすすめできません。編集ミスによってサイト全体の表示が崩れる可能性があるためです。

安全にヘッダーへコードを追加したい場合は、以下の方法を検討しましょう。

・SEOプラグインの認証タグ入力欄を使う
・タグ管理プラグインを使う
・ヘッダー・フッター用コード追加プラグインを使う
・子テーマのheader.phpを編集する

特にアクセス解析や広告タグは、プラグインで管理した方が後から修正しやすくなります。

4-4. サイト全体にHTMLコードを反映させる方法

サイト全体に同じHTMLコードを反映させたい場合は、投稿ごとにコードを貼るのではなく、共通エリアに追加するのが効率的です。

たとえば、全ページのフッターにバナーを表示したい場合は、フッターウィジェットやテンプレートパーツに追加します。全ページのヘッダーに計測タグを入れたい場合は、プラグインやテーマの設定機能を使います。

サイト全体に反映させる主な方法は以下です。

・ウィジェットエリアに追加する
・フッターやヘッダーのテンプレートパーツを編集する
・コード追加プラグインを使う
・子テーマのテンプレートファイルを編集する

どの方法を選ぶかは、追加したいコードの種類と影響範囲によって変わります。初心者は、まずプラグインやテーマ設定で対応できないか確認しましょう。

4-5. プラグインを使って安全にコードを追加する方法

WordPressでHTMLやタグを安全に追加したい場合、プラグインの利用は有効です。特にヘッダーやフッターにコードを追加する場合、テーマファイルを直接編集するより安全に管理できます。

プラグインを使うメリットは以下です。

・テーマ更新でコードが消えにくい
・管理画面から簡単に編集できる
・ヘッダー、本文、フッターなど挿入場所を選べる
・複数のタグをまとめて管理しやすい
・テーマファイルの編集ミスを避けられる

ただし、プラグインを入れすぎるとサイトが重くなる場合があります。信頼できるプラグインを選び、不要になったものは削除しましょう。

5. テーマファイルを編集してHTMLをカスタマイズする方法

5-1. テーマファイルエディターで編集できる場所

WordPress管理画面の「外観」→「テーマファイルエディター」では、テーマを構成するPHPファイルやCSSファイルを編集できます。ここでは、ヘッダー、フッター、投稿ページ、固定ページ、サイドバーなどのテンプレートを変更できます。

ただし、テーマファイルエディターは初心者にとってリスクの高い編集場所です。PHPの記述ミスやタグの閉じ忘れによって、サイトが表示されなくなることがあります。

テーマファイルを編集する場合は、必ず事前にバックアップを取り、できれば本番サイトではなくテスト環境で作業しましょう。

5-2. header.php・footer.php・single.phpの役割

WordPressテーマには、さまざまなテンプレートファイルがあります。代表的なものは以下です。

header.phpは、サイト上部の共通部分を管理するファイルです。ロゴ、ナビゲーション、headタグ内の情報などが含まれることがあります。

footer.phpは、サイト下部の共通部分を管理するファイルです。フッターリンク、コピーライト、閉じタグ、フッター用スクリプトなどが含まれることがあります。

single.phpは、投稿ページの表示に使われるテンプレートです。記事タイトル、本文、投稿日、カテゴリー、関連記事などの表示に関係します。

これらのファイルはサイト全体の表示に関わるため、HTMLだけでなくPHPの知識も必要です。編集する場合は、変更前のコードを必ず保存しておきましょう。

5-3. 子テーマを使って編集する理由

WordPressのテーマファイルを編集する場合は、親テーマを直接編集するのではなく、子テーマを使うのが基本です。

親テーマを直接編集すると、テーマを更新したときに変更内容が上書きされて消えてしまう可能性があります。一方、子テーマを使えば、親テーマの機能を引き継ぎながら、自分で加えたカスタマイズを保持できます。

子テーマを使うメリットは以下です。

・テーマ更新の影響を受けにくい
・カスタマイズ内容を管理しやすい
・元のテーマに戻しやすい
・安全にテンプレートを上書きできる

HTMLやPHPを使って本格的にWordPressをカスタマイズするなら、子テーマの利用はほぼ必須と考えましょう。

5-4. FTP・ファイルマネージャーで編集する方法

テーマファイルは、WordPress管理画面だけでなく、FTPソフトやサーバーのファイルマネージャーからも編集できます。

一般的な手順は以下です。

  1. FTPソフトまたはサーバー管理画面にログインする

  2. wp-content/themes/フォルダを開く

  3. 使用中のテーマまたは子テーマのフォルダを開く

  4. 編集したいファイルをダウンロードする

  5. ローカル環境で編集する

  6. 編集後のファイルをアップロードする

FTPを使うメリットは、万が一WordPress管理画面に入れなくなっても、ファイルを修正して復旧できる点です。テーマファイルを編集するなら、FTPで元のファイルを保存しておくと安心です。

5-5. テーマ更新で編集内容を消さないための対策

WordPressテーマは、機能追加やセキュリティ対策のために定期的に更新されます。親テーマを直接編集していると、更新時にカスタマイズ内容が消えてしまうことがあります。

対策としては、以下を実践しましょう。

・子テーマを使う
・追加CSSに書ける内容は追加CSSで管理する
・ヘッダーやフッターのコードはプラグインで管理する
・編集前のファイルをバックアップする
・変更内容をメモしておく
・本番環境でいきなり編集しない

テーマ更新はセキュリティ面でも重要です。カスタマイズ内容を守りたいからといって更新を止めるのではなく、子テーマやプラグインを活用して安全に管理しましょう。

6. WordPressのHTML編集でよく使う基本タグ

6-1. 見出しタグの使い方

見出しタグは、記事の構造を示すHTMLタグです。h1からh6まであり、数字が小さいほど重要度が高くなります。

HTML
<h1>記事タイトル</h1>
<h2>大見出し</h2>
<h3>小見出し</h3>

WordPressでは、記事タイトルにh1が使われることが多いため、本文内ではh2から使うのが一般的です。見出しタグはデザイン目的だけでなく、読者や検索エンジンに内容の階層を伝える役割があります。

SEOを意識するなら、見出しには関連キーワードを自然に含め、順番を飛ばしすぎないようにしましょう。

6-2. 段落・改行・強調タグの使い方

本文の段落にはpタグを使います。

HTML
<p>これは段落です。</p>

改行にはbrタグを使います。

HTML
<p>1行目<br>2行目</p>

文章を強調したい場合は、strongタグを使います。

HTML
<p><strong>重要なポイント</strong>を確認しましょう。</p>

ただし、改行を多用しすぎるとHTMLが読みにくくなります。文章のまとまりはpタグで分け、必要な場所だけbrタグを使うのがおすすめです。

6-3. リンクタグの使い方

リンクを作るにはaタグを使います。

HTML
<a href="https://example.com">リンクテキスト</a>

新しいタブで開きたい場合は、target="_blank"を追加します。

HTML
<a href="https://example.com" target="_blank" rel="noopener">外部サイトを見る</a>

外部リンクを新しいタブで開く場合は、セキュリティ対策としてrel="noopener"を付けるのが一般的です。アフィリエイトリンクや広告リンクの場合は、必要に応じてnofollowやsponsoredを指定します。

6-4. 画像タグの使い方

画像を表示するにはimgタグを使います。

HTML
<img src="https://example.com/image.jpg" alt="画像の説明">

srcには画像のURLを指定し、altには画像の説明文を入れます。altは画像が表示されないときの代替テキストであり、SEOやアクセシビリティの面でも重要です。

WordPressでは、画像ブロックやメディアライブラリを使うと自動で画像HTMLが生成されます。手書きで画像タグを入れる場合も、alt属性は忘れずに設定しましょう。

6-5. div・spanタグの使い分け

divとspanは、HTML要素をグループ化するためによく使われるタグです。

divはブロック要素で、まとまった範囲を囲むときに使います。

HTML
<div class="box">
  <p>囲み枠の中の文章です。</p>
</div>

spanはインライン要素で、文章の一部だけを装飾したいときに使います。

HTML
<p>この文章の<span class="red">一部だけ</span>色を変えます。</p>

divは大きなまとまり、spanは文章内の一部分に使うと覚えるとわかりやすいです。見た目を変えるには、CSSと組み合わせて使います。

6-6. tableタグで表を作る方法

HTMLで表を作るにはtableタグを使います。

HTML
<table>
  <tr>
    <th>項目</th>
    <th>内容</th>
  </tr>
  <tr>
    <td>料金</td>
    <td>月額1,000円</td>
  </tr>
</table>

tableは表全体、trは行、thは見出しセル、tdは通常のセルを表します。

WordPressではテーブルブロックを使えば簡単に表を作れますが、細かく調整したい場合はHTMLで編集することもあります。スマホ表示では表が横にはみ出しやすいため、必要に応じて横スクロール対応のCSSを追加しましょう。

7. HTML編集と一緒に覚えたいCSSカスタマイズ

7-1. HTMLだけではデザイン調整に限界がある理由

HTMLはページの構造を作るための言語です。文字色、背景色、余白、横並び、スマホ表示などのデザイン調整はCSSで行います。

たとえば、HTMLだけでボタンのようなリンクを作っても、見た目は通常のテキストリンクのままです。ボタンらしく見せるには、CSSで背景色や余白、角丸などを指定する必要があります。

HTMLは骨組み、CSSは見た目を整えるものと考えるとわかりやすいです。WordPressでHTMLを編集するなら、CSSも少しずつ覚えておくとカスタマイズの幅が広がります。

7-2. 追加CSSで見た目を変更する方法

WordPressでは、管理画面の「外観」→「カスタマイズ」→「追加CSS」からCSSを追加できます。テーマファイルを直接編集しなくても見た目を変更できるため、初心者にも使いやすい方法です。

たとえば、カスタムHTMLで作ったボタンにCSSを当てる場合は、HTMLにclassを付けます。

HTML
<a href="https://example.com" class="custom-button">詳しく見る</a>

追加CSSには以下のように書きます。

CSS
.custom-button {
  display: inline-block;
  padding: 12px 24px;
  text-decoration: none;
  border-radius: 4px;
}

追加CSSを使えば、HTMLとデザインを分けて管理できます。

7-3. class・idを使って特定部分だけ装飾する方法

HTMLの特定部分だけにCSSを適用したい場合は、classやidを使います。

classは複数の要素に使える名前です。

HTML
<p class="note">補足説明です。</p>
<p class="note">こちらも補足説明です。</p>

CSSでは以下のように指定します。

CSS
.note {
  padding: 16px;
}

idはページ内で基本的に1つだけ使う名前です。

HTML
<div id="main-message">重要なお知らせ</div>

CSSでは以下のように指定します。

CSS
#main-message {
  font-weight: bold;
}

繰り返し使う装飾にはclass、ページ内で一つだけ指定したい要素にはidを使うと管理しやすくなります。

7-4. スマホ表示に対応させるポイント

WordPressサイトでは、スマホ表示への対応が非常に重要です。PCではきれいに見えていても、スマホでは画像やiframe、表がはみ出すことがあります。

スマホ対応で確認したいポイントは以下です。

・画像の横幅が画面からはみ出していないか
・iframeがスマホ幅に収まっているか
・表が読みにくくなっていないか
・文字サイズが小さすぎないか
・ボタンがタップしやすい大きさか
・余白が広すぎたり狭すぎたりしないか

画像やiframeには、以下のように最大幅を指定すると崩れにくくなります。

CSS
img,
iframe {
  max-width: 100%;
}

レスポンシブ対応を意識することで、PCでもスマホでも読みやすいページになります。

7-5. HTMLとCSSを分けて管理するコツ

HTML内に直接style属性を書いてデザインを指定することもできます。

HTML
<p style="color:red;">赤い文字です。</p>

ただし、この方法を多用すると後から修正しにくくなります。複数の場所で同じデザインを使う場合は、HTMLにはclassを付け、CSS側でまとめて管理するのがおすすめです。

HTML
<p class="red-text">赤い文字です。</p>
CSS
.red-text {
  color: red;
}

HTMLは構造、CSSはデザインという役割を分けることで、サイト全体の管理がしやすくなります。

8. WordPressでHTMLを編集するときの注意点

8-1. 編集前にバックアップを取る

WordPressでHTMLやテーマファイルを編集する前には、必ずバックアップを取りましょう。投稿本文のHTMLを少し編集する程度なら大きな問題になることは少ないですが、テーマファイルやヘッダー、フッターを編集する場合はサイト全体に影響する可能性があります。

バックアップしておきたいものは以下です。

・WordPressのデータベース
・テーマファイル
・プラグイン設定
・アップロード画像
・編集前のHTMLコード

特にテーマファイルを編集する場合は、変更前のコードをテキストファイルにコピーしておくだけでも復旧しやすくなります。

8-2. テーマファイルを直接編集しすぎない

WordPressではテーマファイルを編集することで自由度の高いカスタマイズができます。しかし、直接編集しすぎると管理が難しくなります。

テーマファイルを直接編集するデメリットは以下です。

・テーマ更新で変更内容が消える可能性がある
・記述ミスでサイトが表示されなくなることがある
・どこを変更したのかわからなくなりやすい
・PHPの知識がないと修正が難しい

簡単なHTML追加なら、カスタムHTMLブロック、ウィジェット、追加CSS、プラグインで対応できることが多いです。テーマファイル編集は、必要な場合だけ慎重に行いましょう。

8-3. 不要なタグや閉じ忘れに注意する

HTMLでは、開始タグと終了タグの対応が重要です。タグの閉じ忘れがあると、レイアウトが崩れる原因になります。

たとえば、以下はdivタグの閉じ忘れがある例です。

HTML
<div class="box">
  <p>本文です。
</div>

正しくは以下のように、pタグも閉じます。

HTML
<div class="box">
  <p>本文です。</p>
</div>

WordPressのブロックエディターでは、HTMLの構造が崩れているとブロックエラーが表示されることがあります。エラーが出た場合は、タグの閉じ忘れや不要なタグがないか確認しましょう。

8-4. セキュリティ上危険なコードを貼らない

インターネット上で見つけたコードを、内容がわからないままWordPressに貼り付けるのは危険です。特にJavaScriptや外部スクリプトが含まれるコードは注意が必要です。

危険なコードを貼ると、以下のようなリスクがあります。

・サイトが改ざんされる
・訪問者を不正サイトへ誘導してしまう
・個人情報が漏えいする
・広告やスクリプトが勝手に表示される
・管理画面に不具合が起きる

コードを貼る場合は、信頼できるサービスが発行したものか確認しましょう。意味がわからないコードを設置する場合は、専門家に確認してもらうのが安全です。

8-5. 表示速度やSEOへの影響を確認する

HTMLの埋め込みや外部コードの追加は、表示速度やSEOに影響することがあります。特に、広告タグ、動画、SNS埋め込み、外部スクリプトを大量に入れると、ページの読み込みが遅くなる場合があります。

表示速度が遅いサイトは、読者が離脱しやすくなります。また、検索エンジンにとってもユーザー体験は重要な評価要素の一つです。

HTMLを追加した後は、以下を確認しましょう。

・ページの読み込みが遅くなっていないか
・不要な外部スクリプトを読み込んでいないか
・画像サイズが大きすぎないか
・HTML構造が不自然になっていないか
・見出しタグの順番が崩れていないか

SEOを意識するなら、HTMLをただ追加するだけでなく、読みやすさや表示速度も含めて確認することが大切です。

8-6. スマホ・PC両方で表示確認する

WordPressでHTMLを編集した後は、PCだけでなくスマホでも表示を確認しましょう。現在はスマホからサイトを見るユーザーが多いため、スマホ表示が崩れていると大きな機会損失になります。

確認する際は、以下のポイントを見るとよいでしょう。

・文字が読みやすいか
・画像が画面幅に収まっているか
・ボタンが押しやすいか
・表やiframeがはみ出していないか
・余白が不自然でないか
・横スクロールが発生していないか

ブラウザの開発者ツールや、WordPressのプレビュー機能を使えば、スマホ表示を簡単に確認できます。

9. HTMLが反映されない・表示が崩れるときの対処法

9-1. HTMLコードが消える・保存できない場合

WordPressにHTMLコードを貼り付けたのに、保存後に消えてしまうことがあります。これは、WordPressの権限設定やセキュリティ機能によって、一部のタグが削除されるためです。

特に、scriptタグや一部のiframe、危険と判断される属性は、ユーザー権限や環境によって保存できない場合があります。

対処法としては、以下を試してみましょう。

・管理者権限で編集する
・カスタムHTMLブロックを使う
・コード追加用プラグインを使う
・セキュリティプラグインの設定を確認する
・WordPressやテーマの仕様を確認する

安全上の理由で削除されるコードもあるため、無理に回避するのではなく、信頼できる方法で設置することが重要です。

9-2. 埋め込みコードが表示されない場合

GoogleマップやYouTube、フォームなどの埋め込みコードが表示されない場合、まずコードが正しく貼り付けられているか確認しましょう。

よくある原因は以下です。

・ビジュアルエディターに貼っている
・iframeのURLが間違っている
・外部サービス側で埋め込みが禁止されている
・セキュリティ設定でブロックされている
・キャッシュが古い表示を残している
・プラグインと競合している

埋め込みコードは、通常の段落ブロックではなくカスタムHTMLブロックに貼るのが基本です。また、外部サービス側で提供されている正式な埋め込みコードを使いましょう。

9-3. レイアウトが崩れた場合

HTML編集後にレイアウトが崩れた場合は、タグの閉じ忘れやCSSの影響を確認します。

特に多い原因は以下です。

・divタグの閉じ忘れ
・pタグやaタグの入れ子ミス
・不要なタグが残っている
・CSSの指定が広範囲に効いている
・横幅を固定値で指定している
・テーブルやiframeが画面幅を超えている

まずは追加したHTMLを一度削除して、表示が元に戻るか確認しましょう。元に戻る場合は、追加したコードのどこかに原因があります。少しずつコードを戻しながら確認すると、問題箇所を見つけやすくなります。

9-4. iframeがうまく表示されない場合

iframeが表示されない場合は、まず外部サイトがiframe埋め込みを許可しているか確認しましょう。サイトによっては、セキュリティ上の理由でiframe表示を禁止していることがあります。

また、WordPress側でiframeが削除される場合や、セキュリティプラグインがブロックしている場合もあります。

表示はされるもののサイズが合わない場合は、widthやheightを調整します。

HTML
<iframe src="https://example.com" width="100%" height="500"></iframe>

スマホ対応を考えるなら、横幅は100%にしておくと扱いやすいです。高さは埋め込む内容に合わせて調整しましょう。

9-5. JavaScriptが動かない場合

WordPressにJavaScriptを含むコードを貼ったのに動かない場合、貼り付け場所やセキュリティ設定が原因になっていることがあります。

よくある原因は以下です。

・投稿本文内ではscriptタグが削除される
・JavaScriptの読み込み順が間違っている
・jQueryに依存しているコードが動いていない
・他のプラグインと競合している
・キャッシュや圧縮機能で不具合が起きている

JavaScriptをサイト全体に追加したい場合は、投稿本文に直接貼るよりも、専用プラグインや子テーマを使って管理する方が安全です。意味がわからないスクリプトを貼るのは避けましょう。

9-6. キャッシュが原因で変更が反映されない場合

HTMLやCSSを編集したのに表示が変わらない場合、キャッシュが原因かもしれません。WordPressでは、キャッシュプラグイン、サーバーキャッシュ、ブラウザキャッシュ、CDNキャッシュなどが影響することがあります。

対処法としては、以下を試しましょう。

・ブラウザを再読み込みする
・シークレットウィンドウで確認する
・キャッシュプラグインのキャッシュを削除する
・サーバー側のキャッシュを削除する
・CDNを使っている場合はCDNキャッシュを削除する
・スマホとPCの両方で確認する

変更が反映されないときは、コードのミスだけでなくキャッシュも疑ってみましょう。

10. 初心者におすすめのHTML編集方法

10-1. まずはカスタムHTMLブロックから始める

WordPress初心者がHTML編集を始めるなら、まずはカスタムHTMLブロックを使うのがおすすめです。投稿や固定ページ内で必要な部分だけHTMLを追加でき、プレビューで確認しながら作業できます。

カスタムHTMLブロックなら、テーマファイルを触らずに済むため、サイト全体を壊すリスクが低くなります。Googleマップ、YouTube、バナー、簡単なボタン、補足ボックスなどの追加に向いています。

いきなりテーマファイルを編集するのではなく、まずは記事内の小さなカスタマイズから始めましょう。

10-2. サイト全体のコード追加はプラグインを使う

アクセス解析タグ、広告タグ、認証タグなど、サイト全体に反映したいコードは、プラグインで管理するのがおすすめです。

プラグインを使えば、ヘッダーやフッターにコードを追加でき、テーマ更新の影響も受けにくくなります。また、管理画面からコードをオン・オフしやすいため、後から修正する場合も便利です。

特に初心者は、header.phpやfooter.phpを直接編集するより、コード管理用プラグインを使う方が安全です。

10-3. デザイン変更は追加CSSを活用する

HTMLで構造を作ったら、見た目の調整は追加CSSを使いましょう。WordPressの追加CSSは管理画面から編集でき、テーマファイルを直接触らずにデザインを変更できます。

たとえば、カスタムHTMLブロックにclassを付けておけば、追加CSSで見た目だけをまとめて変更できます。

HTMLとCSSを分けて管理すると、後から「ボタンの色だけ変えたい」「余白だけ調整したい」という場合にも対応しやすくなります。

10-4. テーマファイル編集は子テーマで行う

テーマファイルを編集する必要がある場合は、必ず子テーマを使いましょう。親テーマを直接編集すると、テーマ更新時に変更内容が消えてしまう可能性があります。

子テーマを使えば、親テーマの機能を保ちながら、必要なテンプレートだけを安全にカスタマイズできます。

ただし、子テーマを使っていても、PHPの記述ミスをするとサイトに不具合が出ることがあります。編集前のバックアップと、テスト環境での確認を忘れないようにしましょう。

10-5. 難しいカスタマイズは専門家に依頼する判断基準

WordPressのHTML編集は初心者でもできますが、すべてを自分で対応する必要はありません。以下のような場合は、専門家に依頼することも検討しましょう。

・サイト全体のレイアウトを大きく変えたい
・PHPファイルの編集が必要
・エラーでサイトが表示されなくなった
・ECサイトや会員サイトをカスタマイズしたい
・セキュリティに関わるコードを追加したい
・広告や計測タグを正確に設置したい
・スマホ対応を細かく調整したい

無理に編集してサイトを壊してしまうより、必要な部分だけ専門家に任せた方が結果的に早く安全な場合があります。

11. WordPressとHTMLに関するよくある質問

11-1. WordPressでHTMLファイルを直接アップロードできる？

WordPressでも、サーバー上にHTMLファイルをアップロードすること自体は可能です。ただし、通常の投稿や固定ページとして管理されるわけではありません。

たとえば、FTPやファイルマネージャーを使ってHTMLファイルをアップロードすれば、そのファイルのURLにアクセスできる場合があります。しかし、WordPressのテーマや管理画面、投稿機能とは別の扱いになります。

通常のページとして管理したい場合は、固定ページを作成し、必要に応じてカスタムHTMLブロックやテンプレートを使う方が便利です。

11-2. WordPressの記事をHTMLで書いても問題ない？

WordPressの記事をHTMLで書いても問題ありません。ブロックエディターのカスタムHTMLブロックやコードエディターを使えば、HTMLを直接入力できます。

ただし、すべての記事をHTMLだけで書くと、ブロックエディターの便利な機能を活かしにくくなります。また、HTMLの記述ミスによって表示崩れが起きることもあります。

初心者は、通常の文章入力はブロックエディターで行い、必要な部分だけHTMLを使う方法がおすすめです。

11-3. カスタムHTMLブロックとコードエディターの違いは？

カスタムHTMLブロックは、記事内の一部分にHTMLを追加するためのブロックです。Googleマップ、YouTube、広告タグ、ボタンなどを入れるときに使いやすい方法です。

一方、コードエディターは記事全体のHTMLやブロック構造を編集する機能です。記事全体のコードを確認できる反面、WordPress独自のブロックコメントも表示されるため、初心者には少し難しく感じるかもしれません。

部分的にHTMLを追加したいならカスタムHTMLブロック、記事全体の構造を確認・編集したいならコードエディターと考えるとよいでしょう。

11-4. HTML編集にはプラグインが必要？

投稿や固定ページ内でHTMLを編集するだけなら、基本的にプラグインは必要ありません。WordPress標準のカスタムHTMLブロックやコードエディターで対応できます。

ただし、以下のような場合はプラグインを使うと便利です。

・ヘッダーにタグを追加したい
・フッターに共通コードを入れたい
・広告タグを管理したい
・JavaScriptを安全に追加したい
・複数のコードをまとめて管理したい

プラグインは便利ですが、入れすぎると管理が複雑になります。必要な目的に合ったものだけを選びましょう。

11-5. HTMLを編集するとSEOに影響する？

HTMLの編集はSEOに影響することがあります。正しく編集すれば、見出し構造がわかりやすくなり、内部リンクや画像のalt属性も適切に設定できます。その結果、検索エンジンにもページ内容が伝わりやすくなります。

一方で、間違ったHTML編集はSEOに悪影響を与えることがあります。

・見出しタグの順番が不自然
・重要なテキストが画像だけで表示されている
・リンク切れがある
・画像のalt属性がない
・不要なコードでページが重くなる
・スマホ表示が崩れる

SEOを意識するなら、HTMLをきれいに書くだけでなく、読者にとって見やすく使いやすいページにすることが大切です。

11-6. WordPress初心者でもHTMLを覚えるべき？

WordPress初心者でも、基本的なHTMLは覚えておくと便利です。すべてを暗記する必要はありませんが、見出し、段落、リンク、画像、リスト、表などの基本タグを理解しておくと、記事作成やカスタマイズがスムーズになります。

特に、以下のタグは覚えておくと役立ちます。

・h2、h3などの見出しタグ
・pタグ
・aタグ
・imgタグ
・ul、ol、liタグ
・div、spanタグ
・tableタグ

WordPressはHTMLを知らなくても使えますが、HTMLを少し理解しているだけで、デザイン調整やトラブル対応がしやすくなります。

まとめ

WordPressでHTMLを編集・埋め込む方法は、目的によって選ぶべき手段が変わります。記事内にHTMLを追加したい場合は、カスタムHTMLブロックやブロックごとのHTML編集を使うのが簡単です。Googleマップ、YouTube、広告タグ、アフィリエイトタグなども、カスタムHTMLブロックを使えば比較的スムーズに埋め込めます。

サイドバーやフッターにHTMLを入れたい場合は、ウィジェットエリアのカスタムHTMLが便利です。ヘッダーやフッターにサイト全体のコードを追加したい場合は、テーマファイルを直接編集するよりも、プラグインを使う方が安全です。

テーマファイルを編集して本格的にカスタマイズする場合は、必ずバックアップを取り、子テーマを使いましょう。header.phpやfooter.php、single.phpなどのファイルはサイト全体に影響するため、慎重に扱う必要があります。

WordPressのHTML編集で大切なのは、いきなり難しい場所を触らないことです。まずは投稿や固定ページのカスタムHTMLブロックから始め、必要に応じて追加CSSやプラグインを活用しましょう。基本的なHTMLタグとCSSの考え方を理解しておけば、WordPressのカスタマイズはより自由に、そして安全に行えるようになります。