Skip to content

fix: 記事カード画像のレイアウトシフトを抑制 - #321

Merged
Arata1202 merged 1 commit into
masterfrom
fix/article-card-image-layout-shift
Aug 2, 2026
Merged

fix: 記事カード画像のレイアウトシフトを抑制#321
Arata1202 merged 1 commit into
masterfrom
fix/article-card-image-layout-shift

Conversation

@Arata1202

Copy link
Copy Markdown
Owner

概要

記事一覧で画像の読み込み前から表示領域を確保し、画像表示時のレイアウトシフトを抑制します。

変更内容

  • ブログ記事カードの画像領域に固定幅とアスペクト比を設定
  • Zenn記事カードにも同じ画像フレームを追加
  • 読み込み中の画像領域へ控えめなプレースホルダー背景を表示
  • 優先表示対象の外部画像を eager loading に統一
  • モバイルと既存のレスポンシブ幅を維持

確認

  • Vitest: 225件成功
  • TypeScript型チェック成功
  • ESLint成功

@vercel

vercel Bot commented Aug 2, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment
Project Deployment Actions Updated (UTC)
api-next-blog-app Ignored Ignored Aug 2, 2026 9:17am

@cloudflare-workers-and-pages

cloudflare-workers-and-pages Bot commented Aug 2, 2026

Copy link
Copy Markdown

Deploying next-blog-app with  Cloudflare Pages  Cloudflare Pages

Latest commit: f923e6f
Status: ✅  Deploy successful!
Preview URL: https://dfe358ad.next-blog-app-8ai.pages.dev
Branch Preview URL: https://fix-article-card-image-layou.next-blog-app-8ai.pages.dev

View logs

@Arata1202
Arata1202 force-pushed the fix/article-card-image-layout-shift branch from e574ebb to f923e6f Compare August 2, 2026 09:17
@Arata1202
Arata1202 merged commit fb22d84 into master Aug 2, 2026
10 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant