このページでは、新しく作った記事ページを記事一覧へ追加する手順を説明します。記事を作っただけでは読者に見つけてもらいにくいため、一覧ページへの追加まで行います。
01
記事を作っただけでは一覧に出ない
記事一覧ページに追加する理由
新しいHTML記事を作ったら、articles.html に記事カードを追加します。カードには、リンク先、画像、カテゴリー、タイトル、短い説明文を入れます。
記事カードに必要な情報
リンク先 / アイキャッチ画像 / カテゴリー / 記事タイトル / 説明文 / 続きを読む表示
記事一覧にカードを追加することで、読者がトップページやブログ一覧から記事へ移動できるようになります。
02
【2】記事一覧に追加する
新しい記事ページを作っただけでは、読者がその記事を見つけにくい場合があります。
そのため、記事一覧ページに新しい記事へのリンクを追加します。
記事一覧には、次の情報を入れると分かりやすくなります。
- 記事タイトル
- 短い説明文
- カテゴリ
- 公開日または更新日
- 記事へのリンク
- 必要であれば画像
03
記事一覧に追加するHTML例
HTML例：
<article class="blog-card">
<h3>【ChatGPT初心者向け】使い始める前に知っておきたい画面操作と注意点</h3>
<p>ChatGPTを初めて使う前に知っておきたい画面操作や注意点を、初心者向けにまとめた記事です。</p>
<a href="chatgpt-beginner-screen-guide.html">記事を読む</a>
</article>既存の記事カードのデザインがある場合は、その形に合わせて追加してください。
記事一覧ページに追加するときは、新しいカードだけを追加し、既存の記事カードを削除したり、リンクを変更したりしないように注意します。
04
カテゴリで整理する
記事が増えると、ただ並べるだけでは探しにくくなります。このHPでは、学習記録、作成プロセス、ツール導入、サイト制作のようにカテゴリを分けています。
現在あるカテゴリ
- 学習記録
- AI画像生成
- ツール導入
- サイト制作
今後増やしやすいカテゴリ
- Excel
- Googleスプレッドシート
- ブログ運営
- 収益化準備
05
追加後の確認チェックリスト
- □ 記事一覧ページに新しい記事を追加した
- □ 記事一覧から新しい記事へ移動できる
- □ 記事カードのタイトルが分かりやすい
- □ 記事カードの説明文が短くまとまっている
- □ リンク先のファイル名を間違えていない
- □ 既存の記事カードを削除していない
- □ 既存の記事カードの順番を大きく変えていない
- □ 既存リンクを壊していない