記事ページを増やして
ブログ化する手順

毎回ゼロから作らない

このプロジェクトには、記事追加用の article-template.html があります。新しい記事を作るときは、このテンプレートを複製して、タイトル、説明文、カテゴリー、画像、本文を入れ替えます。

記事を作っただけでは一覧に出ない

新しいHTML記事を作ったら、articles.html に記事カードを追加します。カードには、リンク先、画像、カテゴリー、タイトル、短い説明文を入れます。

記事一覧にカードを追加することで、読者がトップページやブログ一覧から記事へ移動できるようになります。

記事を増やす
↓
記事一覧に追加する
↓
リンクを確認する
↓
スマホ表示を確認する

【1】記事を増やす

まず、新しい記事ページを作成します。

HTMLでブログを作っている場合は、新しいHTMLファイルを1つ作ります。

例：

ai-blog-beginner-learning-record.html
chatgpt-beginner-screen-guide.html
codex-prompt-guide.html

記事ファイル名は、日本語や空白を使わず、英数字とハイフンで分かりやすく付けると安全です。

例：

chatgpt-beginner-guide.html

日本語名や空白入りのファイル名は、リンクミスや表示トラブルの原因になることがあります。

記事が増えてくると、どのHTMLファイルがどの記事なのか分からなくなりやすいです。そのため、最初からファイル名のルールを決めておくと、あとから整理しやすくなります。

【一例】新しい記事ページを作るCodex用プロンプト

新しい記事ページを作るときは、Codexに「どんな記事を作るのか」「ファイル名をどうするのか」「既存ページを壊さないこと」をはっきり伝えると安全です。

以下は、新しい記事ページを1つ作るときのプロンプト例です。

#指示

新規記事ページを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. 今回は新規記事ページの作成だけを行ってください。

このように、Codexへ指示するときは、「新規記事を作る」「ファイル名を指定する」「記事に入れる内容を指定する」「既存記事を壊さない」をセットで書くと分かりやすくなります。

【一例】記事一覧ページに追加するCodex用プロンプト

新しい記事ページを作ったあとは、記事一覧ページにも追加する必要があります。

記事一覧に追加しないと、読者が新しい記事を見つけにくくなります。

以下は、記事一覧ページに新しい記事カードを追加するときのプロンプト例です。

#指示

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

#追加する記事

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

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

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

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

#重要ルール

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

記事ページを作ったあとに記事一覧へ追加することで、読者が新しい記事へ移動しやすくなります。

【補足】最初は作業を分けると安全

初心者の場合、Codexに一度で全部を任せようとすると、どこで問題が起きたのか分かりにくくなることがあります。

そのため、最初は作業を分けると安全です。

1. 新しい記事ページを作る
2. 記事一覧ページに追加する
3. リンクを確認する
4. スマホ表示を確認する

このように分けると、もし表示が崩れたりリンクが切れたりしても、原因を見つけやすくなります。

【2】記事一覧に追加する

新しい記事ページを作っただけでは、読者がその記事を見つけにくい場合があります。

そのため、記事一覧ページに新しい記事へのリンクを追加します。

記事一覧には、次の情報を入れると分かりやすくなります。

• 記事タイトル
• 短い説明文
• カテゴリ
• 公開日または更新日
• 記事へのリンク
• 必要であれば画像

HTML例：

<article class="blog-card">
  <h3>【ChatGPT初心者向け】使い始める前に知っておきたい画面操作と注意点</h3>
  <p>ChatGPTを初めて使う前に知っておきたい画面操作や注意点を、初心者向けにまとめた記事です。</p>
  <a href="chatgpt-beginner-screen-guide.html">記事を読む</a>
</article>

既存の記事カードのデザインがある場合は、その形に合わせて追加してください。

記事一覧ページに追加するときは、新しいカードだけを追加し、既存の記事カードを削除したり、リンクを変更したりしないように注意します。

【3】リンクを確認する

記事一覧にリンクを追加したら、必ずクリックして確認します。

確認するポイントは以下です。

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

たとえば、HTMLに以下のように書いた場合、

<a href="chatgpt-beginner-screen-guide.html">記事を読む</a>

実際に同じ場所に、

chatgpt-beginner-screen-guide.html

というファイルが存在していないと、リンク切れになります。

リンクは、書いただけで安心せず、必ずブラウザでクリックして確認してください。

リンク確認は、ブログ化でとても大切です。記事ページを増やしても、読者がそこへ移動できなければ、記事がないのと同じ状態になってしまいます。

【4】スマホ表示を確認する

ブログはパソコンだけでなく、スマホで読まれることもあります。

そのため、新しい記事を追加したら、スマホ表示も確認してください。

確認するポイントは以下です。

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

画像を使っている場合は、CSSで以下のようにしておくと安全です。

img {
  max-width: 100%;
  height: auto;
}

記事カードが横並びの場合は、スマホでは縦並びになるように調整してください。

スマホ表示では、パソコンでは問題なく見えていた画像やカードが、横にはみ出すことがあります。記事を追加したあとは、必ず画面幅を小さくして確認してください。

【初心者向けチェックリスト】

記事を増やしたあとは、以下を確認してください。

• □ 新しい記事ページを作成した
• □ 記事ファイル名を英数字で分かりやすく付けた
• □ 記事一覧ページに新しい記事を追加した
• □ 記事一覧から新しい記事へ移動できる
• □ 新しい記事からトップページへ戻れる
• □ 新しい記事から記事一覧ページへ戻れる
• □ 画像が表示されている
• □ 画像が大きすぎない
• □ スマホで横にはみ出していない
• □ 既存記事や既存リンクが壊れていない

【この流れを毎回確認する】

初心者向けにブログ化の手順を説明するなら、「記事を増やす」だけでは不十分です。

大切なのは、次の流れです。

記事を増やす
↓
記事一覧に追加する
↓
リンクを確認する
↓
スマホ表示を確認する

この流れで確認すれば、記事を増やしたあとも読者が迷わず読めるブログにしやすくなります。

記事ページは、作っただけでは読まれにくいです。記事一覧に追加し、リンクを確認し、スマホでも読みやすいか確認することで、ブログとして使いやすくなります。