【保存版】マークダウンでHTMLコードを安全に埋め込む方法｜WordPressブロックエディターで崩れない3つの対策

作成：2025年10月17日

はじめに
第1章：なぜレイアウトが崩れるのか？
第2章：崩れずにHTMLを表示する３つの方法
第3章：NGなやり方（やってはいけない例）
第4章：目的別まとめ表
第5章：マークダウン＋HTMLの使い分けのコツ
まとめ：崩れない＝安心して書ける

はじめに

WordPressで記事を書くとき、<script>タグや、広告コードを貼っただけでレイアウトが崩れて困ったことはありませんか？

特にマークダウン形式で投稿していると、正しく表示するにはちょっとしたコツが必要です。

この記事では、初心者でも簡単にできる「崩れないHTMLの貼り方」を、3つの方法でわかりやすく解説します。

WordPress＋Cocoonユーザー必見の保存版ガイドです！

第1章：なぜレイアウトが崩れるのか？

WordPressのブロックエディター（Gutenberg）は、

セキュリティ保護のために、<script>タグや、一部のHTMLタグを
自動的に除外したり変換したりします。

つまり、次のように本文中へ直接HTMLを書くと、

WordPressが「危険なスクリプト」と判断して崩れてしまうのです。

<script async src="https://example.com/ads.js"></script>

これが「ブロック崩れ」や「テキスト消失」の原因です。

第2章：崩れずにHTMLを表示する３つの方法

✅ 方法①：コードを見せたいだけなら、Markdownのコードブロックで囲む

マークダウンでは、3つのバッククォート（```）を使って

HTMLが「実行されない表示」として安全に扱われます。 

バッククォート（`）の打ち方は、キーボードの配列やOSによって異なります。

Windows（JISキーボード）：Shiftキーを押しながら、Pキーの右隣にある`@`（アットマーク）が書かれたキーを押します。
例：

```html
<script async src="https://example.com/ads.js"></script>
```

🔸このようにすると：

HTMLコードがそのまま表示される
実行されないため安全
ブロック崩れが起きない

記事で「貼り付け例」として紹介したいときに最適です。

✅ 方法②：実際に動作させたいなら「カスタムHTML」ブロックを使う

広告タグやYouTube埋め込みなど、HTMLを実行したい場合は

「段落ブロック」や「マークダウンブロック」ではなく、

「カスタムHTML」ブロックを使用します。

🔹手順

投稿画面で「＋」をクリック
「HTML」と入力して検索
「カスタムHTML」ブロックを選択
下記のようにコードを貼り付ける

プレビューで確認すれば、正しく動作します。

✅ 方法③：Cocoonテーマを使っている場合は、テーマ設定で貼る

Cocoonには、広告コードやスクリプトを安全に管理できる専用欄があります。

🔹手順

WordPress管理画面 → 「Cocoon設定」
「アクセス解析・認証」タブをクリック
「広告コード」欄にAdSenseスクリプトを貼り付け
保存をクリック

これで、全ページに自動的に反映されます。

ブロックエディターで貼るより安全で、崩れる心配もありません。

第3章：NGなやり方（やってはいけない例）

以下のように書くと、WordPressが自動でコードを削除したり変換してしまいます。

<script async src="https://example.com/ads.js"></script>

これは本文ブロックの中で直接スクリプトを書いているため、

ブロック構造が壊れる原因になります。

💬 対策：必ず「コードブロック」か「カスタムHTML」を使うこと！

第4章：目的別まとめ表

目的	安全な方法	注意点
HTMLを表示したい	3つのバッククォート（``）`を使って	実行されません
HTMLを実行したい	「カスタムHTML」ブロック	実際に動作します
サイト全体で使いたい	Cocoon設定「アクセス解析・認証」欄	全ページに適用されます