Hugoで実践！Gatsby風ブログカードレイアウトを完全再現するカスタマイズ手順

{{ define "main" }}
<div class="container" role="main">
  {{ $pages := where .Site.RegularPages "Draft" false }}
  {{ $paginator := .Paginate (sort $pages "Lastmod" "desc") 12 }}
  <div class="blog-grid">
    {{ range $page := $paginator.Pages }}
      <article class="blog-card">
        <!-- 画像 -->
        {{ with resources.Get (printf "images/%s" $page.Params.image) }}
          {{ with .Resize (printf "%dx%d webp" .Width .Height) }}
            <img src="{{ .RelPermalink }}" alt="{{ $page.Title }}" class="u-photo blog-card-image" style="width:100%;height:170px;object-fit:cover;">
          {{ end }}
        {{ end }}

        <!-- タグ（リンク化、後述） -->
        {{ if $page.Params.tags }}
          <div class="blog-card-tags">
            {{ range $page.Params.tags }}
              <a href="{{ (print "/tags/" (. | urlize) "/") | relLangURL }}" class="tag p-category">{{ . }}</a>
            {{ end }}
          </div>
        {{ end }}

        <!-- タイトル -->
        <h2 class="blog-card-title">
          <a href="{{ $page.Permalink }}">{{ $page.Title }}</a>
        </h2>

        <!-- メタ情報（partial呼び出しで全部出すスタイルが推奨） -->
        <div class="blog-card-meta">
          {{ partial "post_meta.html" $page }}
        </div>

        <!-- 抜粋 -->
        <div class="blog-card-excerpt">
          {{ if $page.Params.excerpt }}
            {{ $page.Params.excerpt | plainify | truncate 80 }}
          {{ else }}
            {{ $page.Summary | plainify | truncate 80 }}
          {{ end }}
        </div>

        <!-- 続きを読む -->
        <a href="{{ $page.Permalink }}" class="blog-card-readmore">続きを読む &rarr;</a>
      </article>
    {{ end }}
  </div>
  ...（省略。ページネーション/profile box等は必要に応じて）
</div>
{{ end }}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2em;
}
@media (max-width: 900px) { .blog-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .blog-grid { grid-template-columns: 1fr; } }

.blog-card {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
  border-radius: 10px;
  padding: 1em;
  color: #222;
  display: flex;
  flex-direction: column;
}
.blog-card-image img { object-fit: cover; width: 100%; height: 170px; border-radius: 8px 8px 0 0; }
.blog-card-tags a.tag { background: #f3f3f3; border-radius: 12px; font-size: 0.9em; margin-right: 0.4em; padding: 1px 0.8em; text-decoration: none; color: #555; }
.blog-card-title { font-size: 1.22em; margin: 0.2em 0 0.12em 0; }
.blog-card-excerpt { margin-bottom: auto; margin-top: 0.7em; }
.blog-card-readmore { color: #ff8300; font-weight: bold; text-decoration: none; }

/* Dark (night) mode! */
@media (prefers-color-scheme: dark), body.night-mode {
  .blog-card { background: #1a1a1a; color: #f9f9f9; }
  .blog-card-title a { color: #ffa134; }
  .blog-card-tags a.tag { background: #292929; color: #ffa134; }
}

title = "記事タイトル"
date = 2025-09-07T19:00:00+09:00
lastmod = 2025-09-08T09:00:00+09:00
tags = ["ビート販売サイト","AI音楽"]
author = "Genx"
excerpt = "この記事は、HugoでGatsby風カード式レイアウトを再現する実践記です。Bootstrap混在でもOK！"
image = "sample-thumb.jpg"

[params.author]
name = "Genx"