ChatGPTでWordPress用HTMLを作る方法｜コードが分からない私が実際に使った手順

1．完成した原稿をWordPressへ載せる方法が分からなかった

Wordで原稿を完成させましたが、それをWordPressへ読みやすい形で掲載する方法が分かりませんでした。

文章をそのまま貼り付けるだけでは、見出しや囲み枠、表、記事同士のリンクがなく、読みにくい記事になってしまいます。

私はHTMLという言葉や基本的なタグは知っていましたが、記事全体のHTMLコードを自分で作ることはできませんでした。

そこで、完成したWord原稿をChatGPTへ添付し、次のように依頼しました。

この記事では、私がChatGPTへHTML作成を依頼し、WordPressへ貼り付けて公開するまでに実際に行った手順と、途中で困ったことを紹介します。

2．そもそもHTMLを使おうと思った理由

原稿を文章のまま掲載するだけでは、見栄えがよくありませんでした。

HTMLを使い、次のようなことを実現したかったのです。

• 見出しを分かりやすく表示したかった
• 重要な内容を囲み枠で目立たせたかった
• 手順や注意点を箇条書きにしたかった
• 経過や役割分担を表にしたかった
• 前後の記事へ移動できるリンクを入れたかった
• 21記事でデザインをある程度統一したかった

HTMLとは何かを詳しく理解していたわけではありません。

読者が読みやすい形に整えるために、ChatGPTへ作成を依頼しました。

3．HTMLを依頼する前に原稿を完成させた

まず、掲載したい原稿をWordで作成しました。

自分なりに誤字や事実関係を確認し、ChatGPTにチェック、添削、評価を依頼しました。

すると、誤字の指摘や構成を改善するための提案が示されました。

この原稿を自分で確認して校正し、本文が固まってから、今度はChatGPTに次のように依頼しました。

このとき、HTMLを作成する際に、原稿の内容や自分の体験を勝手に変更しないよう伝えました。

原稿の修正とHTML作成を同時に進めると、どこが変わったのか分かりにくくなります。

4．実際にChatGPTへ送った依頼文

最初は、次のように短く依頼しました。

しかし、これだけでは希望どおりにならないことがあったため、少しずつ条件を追加しました。

投稿を重ねる中で、実際に使うようになった依頼文は次のとおりです。

最初からこのような具体的な依頼をしていたわけではありません。

投稿を繰り返す中で、必要な条件が増えていきました。

5．HTML生成時に伝えるようになった条件

タイトルを二重に表示させない

• WordPressのタイトル欄に記事タイトルを入力する
• HTML本文の中には同じタイトルを入れない
• h1を使わず、本文の大見出しはh2から始める

実際にタイトルが二重に表示されたことがあったため、この条件を伝えるようになりました。

本文を省略しない

ChatGPTが長い文章をまとめたり、一部を省略したりしないよう、次のように伝えました。

見出しを分ける

• 大きな項目はh2
• 項目内の小さな見出しはh3

表や箇条書きを使う

• 手順は番号や箇条書きにする
• 比較や作業の流れは表にする
• 重要な注意は囲み枠にする

スマートフォンでも見やすくする

記事末尾にリンクを入れる

記事の内容に応じて、次のリンクや案内を入れるように指定しました。

• 前の記事
• カテゴリー一覧
• 次回予告
• 心臓手術体験記の記事では、シリーズの目次へのリンク

6．ChatGPTが生成したHTMLをコピーした

ChatGPTが表示したHTMLコードを確認し、コード全体を最初から最後までコピーしました。

一部だけをコピーすると、表示やレイアウトが崩れる可能性があるためです。

私が作成してもらったHTMLでは、<style>から最後の</article>までを一つのまとまりとして、途中を省略せずにコピーしました。

長いコードでも、途中を省略しないよう注意しました。

7．WordPressのカスタムHTMLブロックへ貼り付けた

次の手順で実施しました。

1. WordPressで「新規投稿」を開く
2. タイトル欄へ記事タイトルを入力する
3. カテゴリーを選ぶ
4. 本文部分で「カスタムHTML」ブロックを追加する
5. ChatGPTが生成したHTMLをすべて貼り付ける
6. プレビューを開く
7. 表示を確認してから公開する

これは、私が利用しているWordPress環境で行った方法です。

HTML作成から公開まで

8．貼り付け後に確認した項目

貼り付け後にプレビューを開き、次の点を確認しました。

公開前のチェック項目

9．実際に困ったこと

タイトルが二重に表示されることがあった

ChatGPTがタイトルも含めてHTMLを作ることがあり、WordPressのタイトルと本文内タイトルが重なりました。

そのため、h1を使わないよう依頼するようになりました。

本文の一部が省略されることがあった

長い原稿の場合、要約されたり、「以下同様」といった形で省略されたりすることがありました。

そのため、次のように伝えるようになりました。

リンク先が正しくない場合があった

URLが古い、予定している次の記事のURLがまだ存在しない、目次ページへのリンクが違う、といったことがありました。

このため、リンクを実際にクリックし、正しいページへ移動するか自分で確認するようにしました。

表示はテーマによって変わる

ChatGPTの説明と自分のWordPress画面が一致しないことがありました。

このときは、自分の画面のスクリーンショットを添付し、表示されている項目を確認しながら、操作方法を案内し直してもらいました。

ChatGPTによる公開ページの確認にも限界があった

最新の修正が取得されない、古いキャッシュが表示される、実際の画面と取得結果が違う、といったことがありました。

10．うまく表示されないときに使った修正依頼

タイトルが重複するとき

本文が省略されたとき

表が見切れるとき

リンクを修正するとき

デザインを統一するとき

こうした問題が見つかったときに、必要な依頼を追加しました。

最初からすべての依頼文を使ったわけではありません。

11．HTMLを作ってもらって便利だったこと

ChatGPTにHTMLを作ってもらうことで、次のことができました。

• HTMLを自分で書かなくても記事を整えられた
• 見出しや表のデザインをある程度統一できた
• 長い記事を読みやすく整理できた
• 記事末尾に内部リンクを入れられた
• 投稿準備にかかる時間を減らせた
• 21記事を継続して公開する助けになった

ただし、HTMLが生成された時点で完成ではありません。

12．ChatGPTに任せきりにしなかったこと

ChatGPTに依頼したことと、自分で確認したことを整理すると、次のようになります。

13．まとめ

私は、完成したWord原稿をChatGPTへ添付し、WordPressのカスタムHTMLブロックへ貼り付けられるHTMLを作ってもらいました。

HTMLコードを自分で書くことはできませんでしたが、見出し、囲み枠、表、内部リンクを含む記事を公開できました。

ただし、本文が省略されていないか、タイトルが重複していないか、リンクが正しいか、表示が崩れていないかは、自分で確認しました。