ブログ 6 グリッド
アイキャッチ・日付・タイトルをセットにした記事カードを 3 列 × 2 行で並べる、ブログ一覧用のグリッドです。外枠は display:grid の repeat(3,1fr) で 6 枚を均等配置し、各カードは a 要素全体をリンクにして「どこを押しても記事に飛べる」UI にしています。
このパーツの使いどころと実装ポイント
アイキャッチ・日付・タイトルをセットにした記事カードを 3 列 × 2 行で並べる、ブログ一覧用のグリッドです。外枠は display:grid の repeat(3,1fr) で 6 枚を均等配置し、各カードは a 要素全体をリンクにして「どこを押しても記事に飛べる」UI にしています。サムネイルは overflow:hidden の枠内で object-fit:cover を効かせ、ホバー時に translateY でわずかに浮く演出を加えています。
向いている場面
更新を続けるオウンドメディアやお知らせ一覧に向きます。Web 制作会社のジャーナル、店舗のスタッフブログ、企業のプレスリリース一覧、採用サイトの社員インタビュー一覧などが典型です。記事タイトルと日付を前面に出すことで、サイトが「動いている」印象を与えられます。
カスタマイズの勘所
- 日付は
time要素で表し、機械可読にしておくと検索エンジンにも新しさが伝わります。 - タイトルはカードごとに
h3で統一し、見出し階層を保ちます。 - 記事が 6 件に満たないときは
gridの列数を減らすか、件数に応じた表示にして空白を残さないようにします。
レスポンシブでは 3 列→2 列→1 列と段階的に折り返します。サムネイルは loading="lazy" で遅延読み込みし、6 枚分の画像で初期表示が重くならないよう配慮してください。alt には記事内容が伝わる説明を入れます。
よくある質問
記事が6件未満のときはどう表示すればよいですか。
空のカードを並べると未完成な印象になります。件数に応じてグリッドの列数を減らすか、ある分だけを表示してください。3列のレイアウトでも、2件なら2列にするなど、余白が不自然に空かないよう調整するのがおすすめです。
カード全体をリンクにする利点は何ですか。
サムネイルでもタイトルでも、どこを押しても記事に飛べるためタップ範囲が広がり、特にスマートフォンで操作しやすくなります。aタグでカード全体を囲い、内部にtimeやh3を入れる構成にすると、構造も保てます。