ニュースカードリストセクション

このパーツの使いどころと実装ポイント

このパーツは、日付・カテゴリバッジ・タイトル・概要文をひとまとめにしたニュースカードを縦に並べるお知らせセクションです。各カードは article 要素で、日付には time 要素と datetime 属性を使い、機械にも日付として読み取れる形にしています。カードは表示時に下からフェードインし、2件目以降は animation-delay で少しずつ遅らせることで、順番に現れる印象を与えます。

向いている場面

コーポレートサイトの「お知らせ」、店舗の更新情報、ブログの新着一覧などに向きます。「お知らせ」「ブログ」「プレスリリース」といったカテゴリをバッジで色分けすれば、訪問者が読みたい種類の記事を見分けやすくなります。情報発信を続けるサイトのトップページに置くのに適しています。

カスタマイズと注意点

• カテゴリバッジは色違いのクラスで用意されています。種類を増やすときは新しいバッジ用クラスを追加し、配色を決めてください。
• 日付は表示用の文字列と datetime の値の両方を更新します。datetime は西暦の正しい形式にしておくと、検索エンジンにも更新日が伝わりやすくなります。
• タイトルがリンクになっているため、リンク先は実際の記事ページに差し替えてください。