作成：2025年10月17日

1.はじめに

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

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

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

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

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

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

セキュリティ保護のために、<script>タグや一部のHTMLタグを

自動的に除外したり変換したりします。

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

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

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

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

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

✅ 方法①：コードを見せたいだけなら、3つのバッククォートで囲む

マークダウンでは、3つのバッククォート（```）を使って、最初と最後に記載すれば、

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

例：

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

🔸このようにすると：

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

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

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

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

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

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

🔹手順

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

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

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

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

🔹手順

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

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

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

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

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

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

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

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

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

第4章：目的別まとめ表

第5章：マークダウン＋HTMLの使い分けのコツ

マークダウンとHTMLを同時に使うときは、

次のルールを覚えておくと安心です。

• ✅ 文章・見出し → マークダウンで書く
• ✅ コード・広告 → カスタムHTMLで書く
• ✅ 混在させず、ブロックを分ける

まとめ：崩れない＝安心して書ける

マークダウンで記事を書くと、コードが美しく整理できて気持ちいい反面、

HTMLやスクリプトの扱いで崩れることもあります。

でも、今回紹介した3つの方法を覚えておけば大丈夫です。

見せたい時はコードブロック。（3つのバッククォートで囲む）

動かしたい時はカスタムHTML。

それだけで、記事が壊れず、安心して投稿できます。

📘 この記事のテーマ

【WordPress初心者向け】HTML・AdSenseコードを安全に貼る方法を完全解説

🔸 執筆： ミータ（エスアイコムのブログ）
🔸 サイト： https://sicom-blog.com