WordPress記事を作成するとき、本文そのものはChatGPTで作れても、HTML構造やCSSの扱いで迷うことがあります。
特にCocoonのようなWordPressテーマを使っている場合、記事内のHTML、表、ボックス、CTA、子テーマCSSなどをどう整理するかで、表示の安定性や今後のメンテナンス性が変わります。
この記事では、実際にAIサイトラボで行ったように、CodexにWordPress記事HTMLをレビューしてもらう手順をまとめます。実際に使った指示文も紹介します。
この記事は、Codexを使ったWordPress記事制作の実践編です。
HTML構造・見出し階層・CocoonとのCSS競合・スマホ表示・子テーマCSSへの整理など、Codexに何を見てもらえばよいかを具体的に解説します。
Codexというツール自体をまだ知らない場合は、先にCodexとは？WordPress記事HTMLレビューに使う理由を確認しておくと、この後のレビュー手順を理解しやすくなります。
CodexにWordPress記事HTMLをレビューしてもらう理由
WordPress記事は、ビジュアルエディターだけでも作成できます。
ただし、表、補足ボックス、CTA、コード表示、内部リンクなどを使う記事では、HTML構造が複雑になりやすくなります。
そのまま記事を増やしていくと、記事ごとにデザインがバラついたり、記事内にstyleタグが増えたり、スマホ表示で表が崩れたりすることがあります。
そこでCodexを使うと、HTMLやCSSの構造を確認しながら、WordPressで使いやすい形に整理できます。
Codexにレビューしてもらう目的は、記事本文を丸ごと作らせることではなく、WordPressに貼り付けるHTMLを安定運用しやすい形に整えることです。
AIサイトラボでは、記事本文を作ったあとにCodexへHTMLを渡し、Cocoonで表示崩れが起きにくい構造になっているか確認しています。
Codexに見てもらう前に準備するもの
Codexに記事HTMLをレビューしてもらう前に、最低限以下の情報を用意しておくとスムーズです。
- 記事タイトル
- WordPressに貼り付けるHTML本文
- 使用しているテーマ
- 記事内で使っているCSSクラス
- 確認してほしいポイント
- 修正してよい範囲
記事タイトル
まず、対象の記事タイトルを伝えます。
記事タイトルを伝えることで、Codex側も「この記事が何を目的にしたものか」を把握しやすくなります。
たとえば、AIサイトラボでは以下のように記事タイトルを伝えました。
対象記事：
CodexでWordPressサイト制作はどこまでできる？実際に使って分かった向き・不向き
WordPressに貼り付けるHTML
次に、実際にWordPress投稿へ貼り付けるHTMLを用意します。
Codexは、HTML本文がなければ具体的なレビューができません。
そのため、WordPressのコードエディターに貼る予定のHTMLをそのまま渡すのが基本です。
ChatGPTで作った本文を、WordPressのコードエディターに貼り付けやすいHTMLへ整える流れは、以下の記事で詳しく解説しています。
ChatGPTで作った記事HTMLをCodexに自動で共有できるわけではありません。Codex側には、レビューしたいHTMLを明示的に貼り付ける必要があります。
使用テーマや前提条件
WordPressテーマによって、見出し、表、ボックス、余白などのCSSは異なります。
そのため、Codexには使用テーマも伝えた方が良いです。
AIサイトラボの場合は、以下のように伝えています。
使用テーマ：Cocoon
子テーマ：Cocoon Child
記事用CSS：.asl-report-article 配下で管理
こうして前提条件を伝えることで、Cocoon標準CSSとの競合や、子テーマstyle.cssに移すべきCSSを確認してもらいやすくなります。
確認してほしいポイント
Codexには、ただ「確認してください」と送るよりも、確認してほしい項目を具体的に伝える方が効果的です。
たとえば、以下のような項目です。
- HTML構造に不自然な点がないか
- h2・h3の見出し階層が自然か
- p・ul・tableの使い方が適切か
- 表がスマホで崩れないか
- Cocoon標準CSSと競合しないか
- 記事内styleタグを外せるか
- 子テーマstyle.cssに移すCSSがあるか
- CTAや内部リンクの配置が自然か
実際にCodexへ送った指示文
ここからは、AIサイトラボで実際に使ったCodexへの指示文を紹介します。
そのまま使っても良いですし、自分のサイト名やテーマ名に合わせて調整してもOKです。
1本目の記事で使った指示文
1本目の記事では、AIサイトラボの立ち上げレポートHTMLをCodexに確認してもらいました。
AIサイトラボの記事本文HTMLを確認してください。
対象記事：
AIサイトラボ運営レポート 新規AIサイトを立ち上げた理由と初期設定まとめ
目的：
WordPressテーマCocoonで表示崩れなく、読みやすい記事にしたいです。
確認してほしいこと：
・HTML構造に不自然な点がないか
・h2 / h3 / p / ul / table の使い方が適切か
・記事内の <style> をこのまま使ってよいか
・再利用できるCSSは子テーマ style.css に移した方がよいか
・Cocoon標準CSSと競合しそうな箇所がないか
・スマホ表示で表やボックスが崩れないか
・運営レポート用テンプレートとして今後も流用しやすいか
条件：
・本文内容は大きく変えない
・文章の意味は変えない
・WordPressブロックコメントは不要
・修正する場合は「修正版HTML」と「子テーマstyle.cssに追加するCSS」を分けて出してください
・記事内CSSを外す場合は、HTML側から <style> を削除した版を出してください
以下が記事HTMLです。この指示では、記事内styleタグをそのまま使うか、子テーマstyle.cssに移すかをCodexに判断してもらいました。
結果として、記事全体を .asl-report-article で囲み、CSSを子テーマ側へ移す形に整理しました。
2本目の記事で使った指示文
2本目の記事では、すでに共通CSSを使う前提だったため、HTML構造と表の表示を中心に確認してもらいました。
AIサイトラボの2本目の記事HTMLをレビューしてください。
対象記事：
CodexでWordPressサイト制作はどこまでできる？実際に使って分かった向き・不向き
目的：
AIサイトラボの「Codexサイト制作」カテゴリーの記事として使います。
CodexだけでWordPressサイトを1から作る記事ではなく、CodexをWordPressサイト制作の補助としてどこまで使えるか、向いている作業・向いていない作業を整理する記事です。
確認してほしいこと：
・HTML構造に不自然な点がないか
・h2 / h3 / p / ul / table の使い方が適切か
・見出し階層が自然か
・表の th / scope 指定が適切か
・スマホ表示で崩れやすい箇所がないか
・既存の共通CSS .asl-report-article 系で問題なく表示できるか
・Cocoon標準CSSと競合しそうな箇所がないか
・CTAや内部リンクの配置が自然か
・記事内容が「CodexをWordPressサイト制作の補助としてどう使うか」という目的からズレていないか
・Codexだけでサイト制作を丸投げできるように見える表現がないか
・ChatGPTで作る → Codexで確認する → 必要に応じてChatGPTへ戻す流れが自然に伝わるか
条件：
・本文の意味は大きく変えない
・WordPressブロックコメントは不要
・記事内styleタグは追加しない
・必要があれば修正版HTMLを出してください
・CSS追加が必要な場合だけ、子テーマstyle.cssに追加するCSSを分けて出してください
・1本目の記事と同じ .asl-report-article 系の共通CSSを使う前提です
以下が記事HTMLです。この指示では、3カラム表に対して既存CSSの幅指定が合わない可能性をCodexが指摘しました。
その結果、対象の表だけ asl-table-compare というクラスを追加し、3カラム表用のCSSを子テーマstyle.cssに追加しました。
このように、Codexに具体的な前提と確認項目を渡すと、単なる文章修正ではなく、HTML・CSS運用上の改善点まで拾いやすくなります。
Codexに確認してもらうべきポイント
WordPress記事HTMLをCodexにレビューしてもらうときは、以下のポイントを確認してもらうと効果的です。
HTML構造
タグの抜けや階層崩れを見つけやすい
見出し階層
H2・H3の順番を整理できる
表の構造
th・scope・スマホ崩れを確認できる
CSS競合
Cocoon標準CSSとの衝突を減らせる
CTA配置
記事構造として強すぎないか確認できる
内部リンク
導線の自然さを確認できる
HTML構造
HTML構造では、divの閉じ忘れ、tableの階層、ul・liの使い方などを確認してもらいます。
WordPressのコードエディターに貼り付ける場合、HTMLの閉じタグが抜けていると、記事下部やサイドバーの表示に影響することがあります。
見出し階層
見出し階層では、H2とH3の使い方が自然か確認します。
H2は大きな章、H3はその中の補足や手順に使うのが基本です。
CTA内の見出しをH3にするか、pタグにするかも確認対象になります。目次にCTA見出しが入ってしまう場合は、pタグ化することもあります。
表のスマホ対応
WordPress記事で表を使う場合、スマホ表示で横にはみ出しやすくなります。
Codexには、表を横スクロールで包むべきか、列幅指定が不自然になっていないかを見てもらうと便利です。
AIサイトラボでは、表を .asl-table-scroll で包み、スマホでも崩れにくい形にしています。
CocoonとのCSS競合
Cocoonには、見出し、表、ボックス、サイドバーなどに標準CSSが用意されています。
記事側で独自CSSを追加する場合、Cocoon標準CSSと競合する可能性があります。
そのため、記事用デザインは .asl-report-article のような親クラス配下に限定しておくと安全です。
子テーマstyle.cssへ移すべきCSS
記事内にstyleタグを入れると、1記事だけなら簡単です。
しかし、同じデザインを複数記事で使う場合は、子テーマstyle.cssに移した方が管理しやすくなります。
Codexには、どのCSSを共通化できるか、どのCSSは記事固有のままでよいかを確認してもらうと便利です。
Codexから返ってきた内容の見方
Codexからは、修正版HTML、追加CSS、レビューコメントなどが返ってきます。
それぞれの見方を整理しておきます。
修正版HTML
修正版HTMLは、WordPress投稿本文に貼り付ける内容です。
ただし、Codexが返した内容に html・head・body タグが含まれている場合は注意が必要です。
WordPress投稿本文に貼るのは、基本的に記事本文のHTMLだけです。
WordPress本文に貼るのは、<div class=”asl-report-article”> から始まる記事本文部分だけでOKです。html・head・bodyタグは通常不要です。
追加CSS
追加CSSは、子テーマのstyle.cssに入れる内容です。
AIサイトラボでは、記事用の共通CSSを子テーマstyle.cssにまとめています。
追加CSSを入れる場合は、既存CSSと重複していないか、対象範囲が広すぎないかを確認します。
レビューコメント
Codexは、修正が不要な箇所や、今後の注意点もコメントしてくれることがあります。
たとえば、1本目の記事では「記事内styleタグは子テーマstyle.cssに移す方がよい」という方針が出ました。
2本目の記事では「3カラム表だけ別クラスを付けた方がよい」という指摘がありました。
採用する修正と見送る修正
Codexの提案は便利ですが、すべてを採用する必要はありません。
サイト全体のデザイン方針や、記事の目的に合うものだけを採用します。
特にCSS追加は増えすぎると管理が難しくなるため、本当に必要なものだけ追加するのがおすすめです。
実際にAIサイトラボで反映した修正例
AIサイトラボでは、Codexのレビューをもとに、いくつかの修正を反映しました。
記事内styleタグを削除した
1本目の記事では、最初は記事内にstyleタグを入れていました。
しかし、今後も運営レポートで同じ装飾を使う可能性が高いため、Codexの提案をもとに子テーマstyle.cssへ移しました。
記事全体を親クラスで囲んだ
記事用CSSの影響範囲を限定するために、記事全体を以下のクラスで囲む形にしました。
<div class="asl-report-article">
記事本文
</div>これにより、AIサイトラボの記事用CSSが、Cocoon全体や他の固定ページに影響しにくくなりました。
3カラム表に専用クラスを追加した
2本目の記事では、3カラム表に既存の2カラム表用CSSが当たり、列幅が不自然になる可能性がありました。
そこで、3カラム表だけ以下のようにクラスを追加しました。
<table class="asl-table asl-table-compare">これにより、2カラム表と3カラム表でCSSを分けて管理できるようになりました。
CodexにHTMLレビューを依頼するときの注意点
CodexにHTMLレビューを依頼するときは、いくつか注意点があります。
記事HTMLを必ず渡す
Codexは、レビュー対象のHTMLがなければ具体的な確認ができません。
「この記事を見てください」だけではなく、WordPressに貼り付けるHTML本文をそのまま渡すようにします。
使用テーマを伝える
WordPressテーマによってCSSの前提が違うため、使用テーマは必ず伝えます。
AIサイトラボではCocoonを使っているため、毎回「Cocoonテーマで使う前提」と伝えています。
修正してよい範囲を決める
Codexに本文まで大きく書き換えられると、記事の意図が変わってしまうことがあります。
そのため、本文の意味は変えず、HTMLとCSSの整理を中心にしてほしい場合は、その条件を明記します。
例：
本文の意味は大きく変えないでください。必要があれば、HTML構造とCSS整理を中心に修正してください。
最後は必ずプレビューで確認する
Codexが出したHTMLやCSSを反映したあとも、必ずWordPressのプレビューで確認します。
PC表示、スマホ表示、表、ボックス、CTA、内部リンク、サイドバー、フッターまで確認してから公開するのが安全です。
PageSpeed Insightsでも表示状態を確認した
WordPressのプレビュー確認に加えて、PageSpeed Insightsでもページの状態を確認しました。
今回の確認では、デスクトップ表示でパフォーマンス、ユーザー補助、おすすめの方法、SEOの各項目が大きく崩れていないことを確認できました。
もちろん、PageSpeed InsightsのスコアだけでHTMLやCSSが完全に正しいと判断できるわけではありません。 ただ、Codexで整理したHTMLやCSSが、少なくともページ表示や基本的なパフォーマンス面で大きな問題を起こしていないかを確認する材料になります。
AIサイトラボでは、CodexでHTML構造を確認し、WordPressのプレビューで表示を見たうえで、必要に応じてPageSpeed Insightsでも状態を確認する流れにしています。
AIで作った記事をそのまま投稿せず、公開前に確認・修正するポイントは、AIで作った記事をそのまま投稿しない方がよい理由でも詳しくまとめています。
まとめ
今回は、CodexにWordPress記事HTMLをレビューしてもらう手順についてまとめました。
CodexにHTMLをレビューしてもらうと、見出し階層、表の構造、スマホ表示、CocoonとのCSS競合、子テーマstyle.cssへの整理などを確認しやすくなります。
特に、記事内styleタグを減らし、共通CSSを子テーマ側に移すことで、今後の記事テンプレート運用がしやすくなります。
ただし、Codexの出力をそのまま信じるのではなく、最終的にはWordPressのプレビューで人間が確認することが大切です。
AIサイトラボでは、今後もCodexを使ったWordPress記事HTMLの確認、HTML整形、CSS改善の実践記録をまとめていきます。
CodexでWordPressサイト制作にできることを確認する
CodexをWordPressサイト制作の補助としてどこまで使えるのか、向いている作業・向いていない作業を整理しています。
