ChatGPTを使うと、ブログ記事の本文だけでなく、WordPressに貼り付けやすいHTML形式の記事も作りやすくなります。
ただし、WordPressに貼り付けやすいHTMLにするには、見出し階層、Cocoonのブログカード、FAQ、スマホ表示などを意識して整えておくことが大切です。
そのため、ChatGPTでWordPress記事HTMLを作る場合は、最初に条件を決めて、WordPressのコードエディターに貼り付けやすい形で出力してもらうことが大切です。
この記事では、ChatGPTでWordPress記事HTMLを作る方法を、初心者向けに解説します。Cocoonで使う前提の注意点や、貼り付け前に確認すべきポイントもまとめます。
この記事は、ChatGPTで作った記事をWordPressに貼り付けたい方向けの記事です。
本文作成だけでなく、h2・h3・p・ul・ブログカード・FAQ・CTAなどをHTMLとして整え、WordPressのコードエディターに貼り付ける流れを紹介します。
ChatGPTでWordPress記事HTMLを作るメリット
ChatGPTでWordPress記事HTMLを作るメリットは、記事作成から公開準備までの流れを効率化できることです。
通常、ブログ記事を公開するには、本文を書くだけでなく、見出し、リスト、補足ボックス、内部リンク、FAQ、CTAなどをWordPress上で整える必要があります。
ChatGPTにHTML形式で作ってもらえば、WordPressのコードエディターに貼り付けやすい形で記事本文を準備できます。
- 見出しや本文のHTMLをまとめて作れる
- WordPressのコードエディターに貼り付けやすい
- 記事ごとのレイアウトを統一しやすい
- FAQやCTAも同じ形式で管理しやすい
- CodexでHTMLレビューしやすい状態にできる
ChatGPTでHTMLを作る目的は、難しいコードを書くことではなく、WordPressに貼り付ける前の記事本文を整えることです。
WordPress記事HTMLとは何か
WordPress記事HTMLとは、記事本文をHTMLタグで整えたものです。
たとえば、見出しには h2 や h3、本文には p、箇条書きには ul と li を使います。WordPressのコードエディターに貼り付けることで、記事本文として表示できます。
ビジュアルエディターとコードエディターの違い
WordPressには、見た目を確認しながら編集するビジュアルエディターと、HTMLを直接編集するコードエディターがあります。
ビジュアルエディターは直感的に使いやすい一方で、細かいHTML構造を管理しにくい場合があります。
コードエディターを使うと、h2・h3・p・div・ul などの構造を直接確認できるため、AIで作った記事HTMLを貼り付ける作業に向いています。
AIサイトラボでは、記事本文をHTML形式で作り、WordPressのコードエディターに貼り付ける形で運用しています。
CocoonでHTMLを使うメリット
Cocoonでは、本文HTMLの中に見出し、リスト、ブログカード、FAQ、独自CSS用のclassなどを入れることで、記事レイアウトを整えやすくなります。
たとえば、AIサイトラボでは記事全体を <div class="asl-report-article"> で囲み、共通CSSで見た目を整えています。
これにより、記事ごとに毎回デザインを作るのではなく、同じパーツを使い回しながら記事を作れます。
ChatGPTにHTMLを作ってもらう前に決めること
ChatGPTにHTMLを作ってもらう前に、記事の条件を整理しておくと失敗しにくくなります。
何も条件を伝えずに「HTMLで作って」と依頼すると、記事内に不要なstyleタグが入ったり、WordPressブロックコメントが入ったり、Cocoonで扱いにくいHTMLになることがあります。
記事タイトル
何についての記事なのかを明確にします。タイトルが決まると、本文の方向性も整えやすくなります。
見出し構成
H2・H3の流れを先に決めておくと、HTML化したときに記事全体が崩れにくくなります。
使う装飾パーツ
補足ボックス、チェックリスト、ステップカード、FAQなど、使うパーツを決めておきます。
内部リンク
関連記事へ自然につなげるため、ブログカードを入れる位置を考えておきます。
記事タイトル
まずは、記事タイトルを決めます。
ChatGPTにHTMLを作ってもらう場合でも、タイトルが曖昧だと本文の方向性もぼやけます。
今回の記事であれば、タイトルは以下です。
ChatGPTでWordPress記事HTMLを作る方法 初心者向けに貼り付け手順を解説
見出し構成
次に、見出し構成を決めます。
ChatGPTで本文HTMLを作る前に、H2・H3の流れを決めておくと、記事内容がズレにくくなります。
本文HTMLを作る前の設計段階については、ChatGPTでブログ記事構成を作る方法で詳しく解説しています。
使う装飾パーツ
記事内で使う装飾パーツも先に決めておくと、HTML化しやすくなります。
- 補足ボックス
- チェックリスト
- ステップカード
- コードブロック
- ブログカード
- FAQ
- CTAボックス
ただし、装飾を増やしすぎると記事が読みにくくなるため、必要な場所だけに使うのがおすすめです。
内部リンク
HTMLを作る前に、内部リンクも考えておきます。
AIは記事単体の本文だけでなく、内部リンク候補を整理する作業にも活用できます。
ただし、どの記事を主導線にするか、読者に次に何を読んでほしいかは、サイト全体の流れに合わせて人間が調整すると自然です。
AIで作った記事をそのまま投稿せず、公開前に確認する考え方は、AIで作った記事をそのまま投稿しない方がよい理由でもまとめています。
ChatGPTでWordPress記事HTMLを作る基本手順
ここからは、ChatGPTでWordPress記事HTMLを作る基本手順を紹介します。
大まかな流れは以下の通りです。
記事構成を用意する
先にH2・H3の流れを決めておきます。
HTML化の条件を伝える
WordPressのコードエディターに貼る前提で依頼します。
Cocoon向けの注意点を伝える
styleタグやWordPressブロックコメントを入れないようにします。
FAQやCTAを追加する
必要に応じてRank Math対応FAQや記事末CTAを入れます。
WordPressに貼り付ける
コードエディターにHTMLを貼り付けます。
プレビューで確認する
PC・スマホ表示、ブログカード、FAQ、内部リンクを確認します。
1. 記事構成を用意する
まずは、記事構成を用意します。
ChatGPTにいきなり本文HTMLを作ってもらうより、先にH2・H3の流れを決めておく方が安定します。
以下の記事タイトルで、ブログ記事のH2・H3構成を作ってください。
記事タイトル：
ChatGPTでWordPress記事HTMLを作る方法 初心者向けに貼り付け手順を解説
想定読者：
・WordPressでブログを運営している初心者
・ChatGPTで記事作成を効率化したい人
・HTMLをコードエディターに貼り付けたい人
条件：
・初心者向け
・WordPressブログ運営者向け
・H2とH3の階層を自然にする
・最後にFAQとまとめを入れる2. HTML化の条件を伝える
記事構成が決まったら、HTML化の条件を伝えます。
ここで重要なのは、WordPressのコードエディターに貼り付ける前提で作ってもらうことです。
上記の構成をもとに、WordPress投稿本文に貼り付けるHTMLを作成してください。
条件：
・記事全体を <div class="asl-report-article"> で囲む
・h2 / h3 / p / ul / li / div を使って整える
・記事内に style タグは入れない
・WordPressブロックコメントは入れない
・テーブルは必要な場合だけ使う
・コード例は pre / code で囲む
・ブログカードはCocoonで表示できるようにURL単体をdiv内に入れる
・FAQはRank Math対応のFAQ構造にする
・記事末にCTAボックスを入れる3. Cocoon向けの注意点を伝える
Cocoonで使う場合は、Cocoonの仕様に合わせた注意点も伝えておきます。
特に、ブログカードや目次に関係する部分は事前に指定しておくと、あとで修正する手間を減らせます。
- 記事内にstyleタグを入れない
- WordPressブロックコメントを入れない
- ブログカードはURL単体にする
- ステップカード内はh3ではなくp class=”asl-step-title”を使う
- CTAタイトルもh3ではなくp class=”asl-cta-title”を使う
- FAQはRank Math対応のHTML構造にする
Cocoonでは、h2やh3が目次に拾われることがあります。ステップカード内のタイトルまでh3にすると、目次が長くなりすぎる場合があるため注意が必要です。
4. FAQやCTAを追加する
記事本文ができたら、必要に応じてFAQやCTAも追加します。
FAQは、Rank Math対応のHTML構造にしておくと、後から管理しやすくなります。
CTAは、記事の最後に次に読んでほしい記事や、関連する行動へつなげるために入れます。
記事の最後に、Rank Math対応のFAQを3つ追加してください。
その後、関連記事へ誘導するCTAボックスを追加してください。
条件：
・FAQは div class="rank-math-faq faq-container" で囲む
・FAQの質問文は初心者向けにする
・CTAのタイトルは p class="asl-cta-title" にする
・CTA内には関連する記事へのリンクを入れる5. WordPressに貼り付ける
HTMLができたら、WordPressの投稿編集画面でコードエディターに貼り付けます。
貼り付ける前に、HTML全体が <div class="asl-report-article"> から始まり、最後に閉じタグで終わっているか確認します。
また、Cocoonのブログカードを使う場合は、URLの前後に余計な空白や不要なHTMLが入っていないか確認します。
Cocoonのブログカードは、URL単体の扱い方によって表示が崩れることがあります。AIで作ったHTMLを貼る場合でも、プレビューで必ず表示確認しておくと安心です。
6. プレビューで確認する
WordPressに貼り付けたら、公開前にプレビューで確認します。
HTMLとして問題がなさそうに見えても、実際の表示では余白、ブログカード、コードブロック、FAQ、スマホ表示などで気になる点が出ることがあります。
- 見出し階層が自然か
- 目次が長くなりすぎていないか
- ブログカードが表示されているか
- コードブロックが横にはみ出していないか
- FAQが開閉できるか
- スマホでカードやCTAが崩れていないか
- 内部リンクのURLが正しいか
ChatGPTに渡す指示文テンプレート
ここでは、ChatGPTでWordPress記事HTMLを作るときに使える指示文テンプレートを紹介します。
記事タイトルや想定読者の部分を、自分の記事に合わせて変更して使ってください。
以下の記事を、WordPress投稿本文に貼り付けるHTMLとして作成してください。
記事タイトル：
〇〇
目的：
〇〇について初心者向けに解説する記事です。
想定読者：
・WordPressでブログを運営している初心者
・ChatGPTで記事作成を効率化したい人
・記事本文をHTML形式で整えたい人
前提：
・WordPressテーマはCocoon
・投稿本文はWordPressのコードエディターに貼り付ける前提
・記事全体は <div class="asl-report-article"> で囲む
・記事内に style タグは入れない
・WordPressブロックコメントは入れない
・h2 / h3 / p / ul / li / div を使って構成する
・コード例は pre / code で囲む
・ブログカードは <div class="blogcard-type bct-detail"> の中にURLを入れる
・FAQはRank Math対応のHTML構造にする
・CTAタイトルは p class="asl-cta-title" にする
注意点：
・ステップカード内のタイトルは h3 ではなく p class="asl-step-title" を使う
・Cocoonの目次に不要な見出しが入りすぎないようにする
・初心者にも分かりやすい文章にする
・本文の意味を大きく飛ばさない
・内部リンクを自然な位置に入れる
以下の構成で本文HTMLを作成してください。このように、最初から条件を細かく伝えておくと、WordPressに貼り付けやすいHTMLになりやすいです。
貼り付け前にHTMLを確認する
ChatGPTが作ったHTMLは便利ですが、そのまま貼り付けて終わりではなく、公開前に確認することが大切です。
まずは自分で、HTML構造やCocoonで崩れやすい部分を確認します。
divの閉じ忘れ
divの閉じ忘れがあると、記事下部のレイアウトやサイト全体の表示が崩れることがあります。
見出し階層
h2とh3の順番が自然か、目次に不要な見出しが入りすぎていないか確認します。
ブログカード
Cocoonのブログカードは、URLの置き方によって表示されない場合があるためプレビュー確認が必要です。
コードブロック
長いコードや指示文は、スマホ表示で横にはみ出していないか確認します。
FAQ構造
FAQのitemscopeやitempropが崩れていないか、開閉表示に問題がないか確認します。
スマホ表示
カード、CTA、コードブロック、余白がスマホで読みにくくなっていないか確認します。
自分で確認して不安が残る場合は、CodexにHTML構造やCocoonとの相性を確認してもらうと安心です。
Codexには、HTML構造だけでなく、章同士の重複や、前半と後半で同じ説明を繰り返していないかも確認してもらうと、記事全体を整えやすくなります。
以下のWordPress記事HTMLをレビューしてください。
確認してほしいこと：
・HTML構造に不自然な点がないか
・divの閉じ忘れがないか
・h2 / h3 / p / ul / pre / code の使い方が適切か
・Cocoonの目次に不要な見出しが入りすぎないか
・ブログカードの配置が自然か
・FAQのRank Math構造がバリッドか
・記事内styleタグが入っていないか
・WordPressブロックコメントが入っていないか
・スマホ表示で崩れやすい箇所がないか
・H2同士で内容が重複していないか
・前半と後半で同じ説明を繰り返していないか
・削除または統合した方がよい章がないか
・追加CSSが必要か
条件：
・本文の意味は大きく変えない
・修正が必要な場合は修正版HTMLを出す
・CSS追加が不要な場合は「追加CSSなし」と明記するCodexというツール自体をまだ知らない場合は、先にCodexとは？WordPress記事HTMLレビューに使う理由を確認しておくと、HTMLレビューの流れを理解しやすくなります。
HTML構造やCocoonでの表示崩れが不安な場合は、以下の記事でCodexレビューの流れを確認できます。
HTML本文を貼り付けたあとは、アイキャッチ、メタディスクリプション、カテゴリー、タグなども公開前に確認します。ただし、この記事では本文HTMLの作成と貼り付け確認を中心に扱います。
HTML確認よりも先に、公開用のアイキャッチ画像や画像SEOを整えたい場合は、以下の記事も参考になります。
ChatGPTでWordPress記事HTMLを作るときによくある失敗
ここでは、実際にChatGPTへHTML作成を依頼するときに起きやすい失敗例を整理します。
ChatGPTでHTMLを作ると便利ですが、指示が曖昧だとWordPressで扱いにくい形になることがあります。
styleタグが記事内に入る
ChatGPTにHTML作成を依頼すると、記事内にstyleタグを入れてくることがあります。
一時的な装飾なら表示はできますが、記事ごとにstyleタグが増えると管理しにくくなります。
共通デザインは子テーマのstyle.cssで管理し、記事本文にはなるべくstyleタグを入れない方が運用しやすいです。
WordPressブロックコメントが入る
WordPressのブロックエディター向けに、ブロックコメントが入る場合があります。
AIサイトラボでは、記事本文HTMLをシンプルに管理したいため、WordPressブロックコメントは入れない方針にしています。
ブログカードがうまく表示されない
Cocoonのブログカードは、URLの置き方によって表示が変わることがあります。
AIが作ったHTMLでは、URLの前後に余計な空白や不要なタグが入ることもあるため、必ずプレビューで確認します。
目次が長くなりすぎる
h3を使いすぎると、Cocoonの目次が長くなりすぎることがあります。
ステップカード内の短いタイトルや、CTA内の見出し風テキストは、h3ではなくpタグにclassを付けて扱うと目次がすっきりします。
ChatGPTでWordPress記事HTMLを作るときによくある質問
貼り付けることはできますが、公開前に確認するのがおすすめです。divの閉じ忘れ、見出し階層、ブログカード、FAQ、スマホ表示などを確認してから公開すると、表示崩れを防ぎやすくなります。
一時的には使えますが、記事ごとにstyleタグを入れると管理しにくくなります。共通デザインは子テーマのstyle.cssで管理し、記事本文にはなるべくstyleタグを入れない方が運用しやすいです。
確認しておくと安心です。CodexにHTML構造、divの閉じ忘れ、見出し階層、Cocoonとの相性、FAQ構造などを見てもらうことで、公開前に気づきにくい問題を見つけやすくなります。Codexの役割を先に知りたい場合は、Codexとは？WordPress記事HTMLレビューに使う理由も参考になります。
まとめ
今回は、ChatGPTでWordPress記事HTMLを作る方法を解説しました。
ChatGPTを使えば、ブログ記事の本文だけでなく、WordPressのコードエディターに貼り付けやすいHTMLも作成できます。
ただし、HTML化するときは、styleタグを入れない、WordPressブロックコメントを入れない、Cocoonのブログカードや目次に配慮するなど、いくつかの注意点があります。
ChatGPTで作ったHTMLは、WordPressでプレビュー確認し、必要に応じてCodexでレビューすると、より安心して公開できます。
AIサイトラボでは、今後もChatGPTやCodexを使った記事作成、WordPress運用、ブログ改善の実践手順をまとめていきます。
次はCodexでHTMLを確認する流れを確認する
ChatGPTでWordPress記事HTMLを作成したら、公開前にHTML構造やCocoonでの表示崩れを確認しておくと安心です。
