【Hugoテーマ開発】トップページ(index.html)をカスタマイズして魅力的なサイトの顔を作ろう

{{ define "main" }}
<!-- ヒーローエリア: サイトの第一印象を決める大事な部分 -->
<div class="hero">
    <h1>{{ .Site.Title }}</h1>
    <p>完全オリジナルのHugoテーマを作ってみませんか？</p>
    
    <!-- 小話＆導入 -->
    <div style="margin-top: 20px; font-size: 0.95rem; color: #555;">
        <p>HugoはGo言語で作られた爆速の静的サイトジェネレーターです。<br>
        このサイトは、ゼロからテーマを作る過程を解説するチュートリアルサイトです。</p>
    </div>

    <!-- Basicカテゴリーへの誘導ボタンエリア -->
    <div style="margin-top: 30px;">
        <p style="font-weight: bold; color: #333; margin-bottom: 10px;">
            \ たった5ステップで完成！ /
        </p>
        <!-- .Site.GetPage で確実にパスを取得 -->
        <a href="{{ ( .Site.GetPage "/categories/basic" ).RelPermalink }}" style="display: inline-block; background-color: #ff6b6b; color: #fff; padding: 12px 30px; text-decoration: none; border-radius: 30px; font-weight: bold; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
            🔰 オリジナルテーマ作成ツアーへ出発
        </a>
        <p style="font-size: 0.9rem; color: #666; margin-top: 15px; line-height: 1.6;">
            インストールからテーマ自作、そして画面表示まで。<br>
            最短ルートで「自分のテーマ」を完成させましょう！
        </p>
    </div>
</div>

<!-- 最新記事エリア -->
<div class="latest-posts">
    <h2>Latest Posts</h2>
    <ul>
        {{ range first 5 .Site.RegularPages }}
        <li>
            <!-- 日付も見やすく配置 -->
            <span class="date">{{ .Date.Format "2006.01.02" }}</span>
            <a href="{{ .RelPermalink }}">{{ .Title }}</a>
        </li>
        {{ end }}
    </ul>
    <!-- アーカイブへのリンク -->
    <div style="text-align: right; margin-top: 10px;">
        <a href="{{ ( .Site.GetPage "section" "posts" ).RelPermalink }}">すべての記事を見る &rarr;</a>
    </div>
</div>
{{ end }}

/* ヒーローエリア */
.hero {
    background-color: #e9ecef; /* 薄いグレーの背景 */
    padding: 60px 20px;        /* 余白をたっぷり */
    text-align: center;        /* 真ん中寄せ */
    border-radius: 8px;        /* 角丸 */
    margin-bottom: 40px;
}

.hero h1 {
    font-size: 3rem;           /* 文字を大きく！ */
    margin-bottom: 20px;
    color: #333;
}

.hero p {
    font-size: 1.2rem;
    color: #666;
}

/* 最新記事リスト */
.latest-posts ul {
    list-style: none; /* 点々を消す */
    padding: 0;
}

.latest-posts li {
    padding: 10px 0;
    border-bottom: 1px solid #eee; /* 下線で区切る */
    display: flex; /* 横並びにする */
    justify-content: space-between; /* 両端に配置 */
    align-items: center;
}

.latest-posts .date {
    font-size: 0.9rem;
    color: #999;
    margin-right: 15px;
    min-width: 90px; /* 日付の幅を確保 */
}