Codex用プロンプト例まとめ

#指示

新規記事ページを1つ作成してください。

#新規記事タイトル

【AIブログ初心者向け】画像が表示されなかったときの確認ポイント

#新規ファイル名

ai-blog-image-display-check.html

#記事の目的

この記事は、AIブログやHTMLサイトで画像を挿入したのに表示されないとき、初心者が確認するべきポイントを分かりやすく説明する記事です。

#本文に入れる内容

以下の内容を初心者向けに分かりやすく記事化してください。

・画像ファイル本体がHP制作フォルダ内にあるか
・画像が images フォルダに入っているか
・HTMLの src と画像の保存場所が一致しているか
・ファイル名が一致しているか
・拡張子が一致しているか
・日本語名や空白入りファイル名を使っていないか
・CSSで非表示になっていないか
・ブラウザを更新して確認すること

#記事構成

以下の構成で作成してください。

1. はじめに
2. 画像が表示されないときに最初に見るところ
3. 画像ファイル本体があるか確認する
4. HTMLのsrcと画像の保存場所を確認する
5. ファイル名と拡張子を確認する
6. CSSで非表示になっていないか確認する
7. 初心者向けチェックリスト
8. まとめ

#重要ルール

1. 既存記事を削除しないでください。
2. 既存リンクを壊さないでください。
3. 既存画像を削除しないでください。
4. 新しい画像を勝手に生成しないでください。
5. 既存サイトのデザインに合わせて新規記事を作成してください。
6. スマホ表示でも読みやすくしてください。
7. 記事本文を短く省略しすぎないでください。
8. 記事一覧ページは、まだ変更しないでください。
9. 今回は新規記事ページの作成だけを行ってください。

#指示

記事一覧ページに、新しい記事カードを1つ追加してください。

#追加する記事

タイトル：
【AIブログ初心者向け】画像が表示されなかったときの確認ポイント

説明文：
HTMLに画像を入れたのに表示されないとき、初心者が確認するべき画像パス・ファイル名・保存場所を分かりやすくまとめた記事です。

リンク先：
ai-blog-image-display-check.html

カテゴリ：
AIブログ初心者向け

#重要ルール

1. 新しい記事カードを1つだけ追加してください。
2. 既存の記事カードを削除しないでください。
3. 既存の記事カードの順番を勝手に大きく変えないでください。
4. 既存デザインに合わせて追加してください。
5. リンク先のファイル名を間違えないでください。
6. 新しい画像を勝手に生成しないでください。
7. 記事一覧ページ全体を丸ごと書き換えないでください。
8. 既存リンクを壊さないでください。

#指示

記事一覧ページと新しい記事ページのリンク確認をしてください。

#確認してほしいこと

・記事一覧から新しい記事へ移動できるか
・リンク先のファイル名が正しいか
・新しい記事からトップページへ戻れるか
・新しい記事から記事一覧ページへ戻れるか
・関連リンクが切れていないか

#重要ルール

1. リンク先URLを勝手に変更しないでください。
2. 文章を変更しないでください。
3. 記事カードの順番を変更しないでください。
4. リンク切れがある場合は、原因と修正箇所を報告してください。
5. 必要な場合だけ、リンク先の誤りを最小限で修正してください。

#指示

記事内の画像が正しく表示されるか確認してください。

#確認してほしいこと

・画像ファイル本体が指定フォルダ内にあるか
・HTMLの src と画像の保存場所が一致しているか
・ファイル名が一致しているか
・拡張子が一致しているか
・大文字と小文字の違いがないか
・スマホ表示で画像が横にはみ出していないか

#重要ルール

1. 画像ファイル名を勝手に変更しないでください。
2. 画像パスを変更する場合は、実際の保存場所と一致させてください。
3. 既存画像を削除しないでください。
4. 新しい画像を勝手に生成しないでください。
5. 本文を変更しないでください。

#指示

記事ページと記事一覧ページのスマホ表示を確認してください。

#確認してほしいこと

・文字が小さすぎないか
・画像が横にはみ出していないか
・記事カードが縦にきれいに並んでいるか
・ボタンやリンクが押しやすいか
・余白が狭すぎないか
・横スクロールが出ていないか

#重要ルール

1. 本文を変更しないでください。
2. 記事タイトルや説明文を変更しないでください。
3. 画像パスを変更しないでください。
4. CSSを調整する場合は、必要最小限にしてください。
5. PC表示も崩れていないか確認してください。

#指示

既存記事の本文内に、指定した画像を自然な位置へ挿入してください。

#画像

保存場所：
images/example-guide.png

#挿入位置

画像の内容を説明している本文の直後に配置してください。

#表示ルール

・PCでは大きすぎないサイズにする
・スマホでは横にはみ出さないようにする
・画像全体が切れないようにする
・alt属性を入れる
・短いキャプションを入れる

#重要ルール

1. 既存本文を削除しないでください。
2. 既存リンクを壊さないでください。
3. 既存画像を削除しないでください。
4. 新しい画像を勝手に生成しないでください。
5. 画像パスと実際の保存場所を一致させてください。

#指示

直前の修正で表示が崩れた可能性があります。
新しいデザインを作らず、原因を確認して必要最小限で修正してください。

#確認してほしいこと

・変更したHTML
・変更したCSS
・画像パス
・リンク先URL
・スマホ表示
・PC表示

#重要ルール

1. 文章を勝手に変更しないでください。
2. 記事タイトルを変更しないでください。
3. リンク先URLを変更しないでください。
4. 画像パスを変更しないでください。
5. 他ページに不要な変更を入れないでください。
6. 原因が分からない場合は、勝手に修正せず報告してください。