ここまでのステップでHugoの基本的なテンプレート設定が完了し、サイトが機能するようになりました！しかし、今のままでは文字が羅列されるだけの「真っ白なサイト」です。
このチュートリアル最終ステップでは、自作したテーマにCSSファイルを読み込ませて、オリジナルのWebデザインへと本格的に装飾・カスタマイズしていく手順を解説します。仕上げとして一覧ページも作成し、Webサイトを完成させましょう！✨
1. CSSファイルの作成
themes/my-diy-theme/static/css/style.css というファイルを作ります。
ここで定義したスタイルが、baseof.html で読み込んだ <link> タグによって適用されます。
/* 全体のフォントや幅を調整 */
body {
font-family: 'Helvetica Neue', Arial, sans-serif;
line-height: 1.6;
color: #333;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #f9f9f9;
}
/* ヘッダーを目立たせる */
header {
text-align: center;
padding: 40px 0;
margin-bottom: 40px;
border-bottom: 2px dashed #ff6b6b;
}
header h1 a {
color: #ff6b6b;
text-decoration: none;
font-size: 2.5rem;
}
/* 記事へのリンクをおしゃれに */
a {
color: #007bff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* 記事のスタイル */
article h2 {
border-left: 5px solid #ff6b6b;
padding-left: 10px;
}
保存してブラウザを見てみてください。
おおっ！一気にブログっぽくなりましたね！😲
ここまでは基本的なスタイルの設定でした。
さらに、Markdownで書いた記事（画像、表、引用など）をきれいに見せるための「必須CSS」については、以下の記事でまとめて紹介しています。あわせて設定しておくことを強くおすすめします！
2. 最後に：リストページも忘れずに
そういえば、記事一覧ページ（トップページとは別の、タグ一覧など）のテンプレートを忘れていました。themes/my-diy-theme/layouts/list.html も作っておきましょう。
{{ define "main" }}
<h2>記事一覧</h2>
<ul>
{{ range .Pages }}
<li>
<a href="{{ .RelPermalink }}">{{ .Title }}</a>
<span style="color: #999;">({{ .Date.Format "2006/01/02" }})</span>
</li>
{{ end }}
</ul>
{{ end }}
CSSカスタマイズで世界に一つだけのオリジナルテーマを完成させよう！
これで、CSSによる装飾と一覧リスト（list.html）の追加が完了しました。
機能面もデザイン面も整い、あなた自身の手でコーディングした**「世界に一つだけのオリジナルテーマ」**によるHugoブログの完成です！
ここから先は、hugo new content でどんどん新しい記事を投稿したり、CSSを書き換えて自分好みの配色やレイアウトにアップデートしたりと、自由自在にサイトを育てていくことができます。
Happy Hacking! 🚀
🚀 次のステップ：世界に公開しよう！
テーマが完成したら、インターネット上に公開して誰でも見られるようにしましょう！
GitHub PagesやFirebase Hostingを使えば、無料で簡単に公開できます。
