WordPressの投稿記事に、Claudeが生成したHTMLコードをそのまま綺麗に反映させるには、WordPressのブロックエディタ（Gutenberg）にある専用のブロックを使用するのが一番確実です。
いくつか方法がありますので、状況に合わせて使い分けてみてください。
方法1：カスタムHTMLブロックを使う（一番おすすめ）
デザインされたボタンやテーブルなど、HTMLをそのままWebページとして表示・機能させたい場合の方法です。
- Claudeのコードをコピーする Claudeが生成したHTMLコードの右上にある「Copy」ボタンをクリックします。
- WordPressの編集画面を開く 記事の編集画面で、新しくブロックを追加するボタン（
+マーク）をクリックします。 - 「カスタムHTML」ブロックを検索して選択 検索窓に「HTML」と入力すると出てくる「カスタムHTML」ブロックを選択します。
- コードを貼り付ける 追加されたブロック内に、コピーしたHTMLコードを貼り付けます。
- プレビューで確認 ブロックの上部メニューにある「プレビュー」タブに切り替えると、実際の見え方を確認できます。
方法2：コードブロックを使う（ソースコードとして見せたい場合）
HTMLをページのデザインとして反映させるのではなく、「こんなHTMLコードです」と読者にテキストとして紹介したい場合の方法です。
- WordPressの編集画面で
+マークをクリック。 - 「コード」ブロックを選択します。
- そこにコピーしたHTMLを貼り付けます。これにより、HTMLが実行されずにそのまま文字列として表示されます。
💡 注意したいポイント
- CSS（スタイル）が含まれているか確認する Claudeが生成したHTMLに、見た目を整えるためのCSS（
<style>タグや、style="..."というインライン形式）が含まれていない場合、WordPressに貼り付けても地味な見た目（ただのテキストやリンク）になってしまいます。もし見た目が崩れる場合は、Claudeに「WordPressのカスタムHTMLに貼り付けたいので、CSSをインライン形式で組み込んだHTMLを出力して」と頼み直すとスムーズです。
- JavaScript（動的な動き）が含まれる場合 もしボタンをクリックするとポップアップが出るような、JavaScript（
<script>タグ）を含むHTMLの場合、WordPressのセキュリティ設定やテーマによってはうまく動作しない（またはコードが消えてしまう）ことがあります。その場合は、プラグイン（例：Code Snippets など）を使う必要があります。
基本的には「カスタムHTML」ブロックを使えば間違いありません。試してみてください！
コメント