このページでは、画像を記事に入れるときに省略されやすい用語や確認ポイントを分けました。
画像が表示されないときに、どこを確認すればよいかを言葉で説明できるようにします。
12
【完全初心者向け】省略されやすい用語と確認文
この記事では、画像を入れる流れや、表示されないときの確認方法をすでに説明しています。
ここでは重複を避けて、Codexに記事を書かせるときに「短くまとめられやすい用語」と「記事に残してほしい確認文」を整理します。
初心者向けに短く説明しておきたい用語
専門用語を使う場合は、本文の近くに短い説明を添えると読みやすくなります。
拡張子：ファイルの種類を表す文字です。画像なら.png、.jpg、.jpeg、.webpなどがあります。画像パス：HTMLが画像を探しに行く場所です。たとえばimages/sample-image.pngは、imagesフォルダ内の画像を探す指定です。src：画像の場所を書く部分です。初心者向けには「画像の住所」と考えると分かりやすいです。imagesフォルダ：HPで使う画像をまとめて置くためのフォルダです。実際のサイト構成ではassets/imagesなど別名の場合もあります。ファイル名：画像やHTMLにつける名前です。HTMLに書いた名前と実際のファイル名が1文字でも違うと、表示されないことがあります。
画像が表示されないときに記事へ残したい確認文
画像が表示されないときは、同じ画像を何度も入れ直す前に、次の確認文を記事内に残すようにCodexへ依頼すると親切です。
画像が表示されない場合は、まず次の順番で確認してください。
□ 画像ファイル本体がHP制作フォルダ内にあるか
□ 画像が指定した画像フォルダに入っているか
□ HTMLのsrcと画像の保存場所が一致しているか
□ ファイル名が完全に一致しているか
□ 拡張子が一致しているか
□ 日本語名や空白入りのファイル名を使っていないか
□ 大文字と小文字が違っていないか
□ CSSで画像が非表示になっていないか
□ ブラウザを更新して確認したか
□ 画像を入れたページを正しく開いているか画像が表示されない原因は、画像そのものではなく、保存場所、名前、拡張子、HTMLの指定がずれていることもあります。
Codexに省略させないための追加プロンプト例
既存の記事作成プロンプトに、次の一文を追加すると、専門用語や確認ポイントが消えにくくなります。
完全初心者向けの記事にするため、専門用語を使う場合は短い説明を付けてください。
特に、拡張子、画像パス、src、ファイル名、imagesフォルダという言葉は、
初心者にも分かるように説明してください。
「確認してください」だけで終わらせず、
どのファイルの、どの部分を、何と比べて確認するのかまで書いてください。テーマの下に入れる短いアシスト文
記事内に複数のテーマがある場合は、各テーマの説明の下に短い補足文を入れると、読者が「ここで何を見ればよいのか」を理解しやすくなります。
- 画像を使うテーマでは、「画像ファイル本体がHP制作フォルダ内にあるか確認しましょう」と添える。
- リンクを使うテーマでは、「
hrefに書いたファイル名と、実際のファイル名が一致しているか確認しましょう」と添える。 - 記事一覧カードを追加するテーマでは、「既存カードと同じHTML構造、同じclass名で追加するように指示しましょう」と添える。
- CSSを調整するテーマでは、「本文追加とデザイン変更は分けて依頼すると、原因を確認しやすくなります」と添える。
画像が表示されない原因は、図にするとさらに確認しやすくなります。必要に応じて、後からチェックの流れを示す説明画像を追加すると分かりやすくなります。