WordPressでカスタムHTMLブロックを使う方法｜基本から活用例まで解説

WordPressのブロックエディター（Gutenberg）には、HTMLを直接記述できる「カスタムHTMLブロック」が用意されています。
テーマやプラグインに依存せず、自由度の高いマークアップができるため、Web制作やカスタマイズを行う場面で非常に役立ちます。

この記事では、カスタムHTMLブロックの基本的な使い方から、活用シーン、注意点までをわかりやすく解説します。

カスタムHTMLブロックとは

カスタムHTMLブロックとは、WordPressの投稿や固定ページ内にHTMLコードを直接記述できるブロックです。
通常の「段落」や「見出し」ブロックでは対応できない細かなマークアップや、外部サービスの埋め込みなどに使用されます。

主な特徴

• HTMLタグを自由に記述できる
• WordPressの自動整形の影響を受けにくい
• JavaScriptは基本的に使用不可
• CSSクラスの付与が可能

ブロックエディターの基本については、
WordPressブロックエディターの使い方と基本操作
の記事もあわせて確認すると理解が深まります。

カスタムHTMLブロックの追加方法

カスタムHTMLブロックは、通常のブロック追加操作から簡単に挿入できます。

手順

1. 投稿・固定ページの編集画面を開く
2. 「＋」ボタンをクリック
3. 「フォーマット」カテゴリ内の「カスタムHTML」を選択
4. 表示された入力欄にHTMLコードを記述

入力後は、プレビュー表示とコード表示を切り替えながら確認できます。

基本的なHTML記述例

以下は、カスタムHTMLブロックでよく使われるシンプルな例です。

<div class="custom-box">
  <h3>見出しタイトル</h3>
  <p>ここに説明文を記述します。</p>
</div>

このように、divやclass属性を使ったマークアップも問題なく記述できます。
CSSでの装飾方法については、
WordPressでCSSをカスタマイズする方法
の記事も参考になります。

よく使われる活用シーン

1. 独自デザインのレイアウトを作成したい場合

テーマのブロックでは表現しづらい構造を作りたい場合、HTMLを直接書くことで柔軟なレイアウトが可能です。

2. 外部サービスの埋め込み

• 広告タグ
• 計測用コード
• 特定のウィジェットHTML

など、ブロックに対応していない埋め込みコードにも対応できます。

3. HTML構造の検証やテスト

HTMLの構造を確認しながら作業したい場合にも、カスタムHTMLブロックは便利です。

カスタムHTMLブロック使用時の注意点

JavaScriptは基本的に動作しない

WordPressではセキュリティ上の理由から、投稿内でのJavaScript実行は制限されています。
スクリプトが必要な場合は、functions.php や専用プラグインを利用します。

この点については、
functions.phpの編集方法（初心者向け）
の記事も参考になります。

HTMLの記述ミスに注意する

閉じタグの漏れや構造ミスがあると、ページ全体のレイアウト崩れにつながることがあります。
プレビューで必ず確認することが重要です。

SEO・アクセシビリティへの配慮

見た目だけでなく、以下の点も意識する必要があります。

• 適切な見出し階層（h2〜h4など）
• 画像にはalt属性を設定
• 意味のあるHTMLタグを使用

alt属性については、
画像のalt属性の正しい書き方とSEO効果
の記事が参考になります。

カスタムHTMLブロックとコードエディターの違い

WordPressには「コードエディター」も存在しますが、用途は異なります。

部分的にHTMLを扱いたい場合は、カスタムHTMLブロックの使用が推奨されます。

まとめ

カスタムHTMLブロックは、WordPressで柔軟な表現を実現するための重要な機能です。

• HTMLを直接記述できる
• 独自レイアウトや外部埋め込みに対応
• 正しい記述と安全面への配慮が重要

ブロックエディターの基本とあわせて活用することで、より自由度の高いコンテンツ制作が可能になります。