写真 + 一言メモカード
上部に写真、下に日付と一言メモ、いいね数を添えたインスタ風のカードです。写真エリアはサンプルとして linear-gradient のプレースホルダになっていますが、実運用では background-image や img に差し替えて使います。
解説
上部に写真、下に日付と一言メモ、いいね数を添えたインスタ風のカードです。写真エリアはサンプルとして linear-gradient のプレースホルダになっていますが、実運用では background-image や img に差し替えて使います。日付は Georgia のセリフ体で小さく、メモ本文は読みやすい line-height:1.7 でゆったり組まれ、ハートはインライン SVG で表示されます。CSS のみで動き、JavaScript は不要です。
こんな場面に
- ブログやお知らせのフィード型一覧
- SNS風のタイムライン表示や日記コンテンツ
- 写真と短文を組み合わせたギャラリー
写真部分のグラデーションを実際の画像に置き換えるだけで本物のカードになります。角丸や影の強さ、カード幅は数値を変えて調整でき、複数並べればフィードになります。注意点として、写真を入れる際は img に width height と意味のある alt を付け、loading="lazy" を添えると表示のガタつきと無駄な読み込みを防げます。メモ本文は長すぎると崩れるため、文字数の上限を決めておくと整います。
使用例・適したシーン
- サービス紹介セクション
- メンバー紹介・スタッフ一覧
- 料金プラン比較
- 実績・事例カード
よくある質問
見本の写真部分を本物の画像に変えるには
写真エリアに敷かれているグラデーションを、背景画像の指定や画像タグに置き換えるだけです。画像には幅と高さ、内容を説明するalt文を付けると、表示のずれを防ぎ読み上げにも対応できます。
いいねの数を押して増やせますか
このパーツは見た目だけなので、数字は固定の表示です。クリックで増減させたい場合は、数値を更新する短いJavaScriptを足す必要がありますが、フィードの飾りとしてはそのままでも十分機能します。