目次
- 1. はじめに
- 2. 共通化したいところって？
- 3. サイト全体の土台を作る（default.html）
- 4. 記事専用のレイアウトを作る（post.html）
- 5. 記事（Markdown）からテンプレートを呼び出す
1. はじめに
前回、GithubPagesでブログ記事をJekyllを使ってMarkDownで書いてみるでページを作成してみました。 これから記事が増えていくことを考えると、ヘッダー・フッターやCSSなどの共通部分を毎回書くのは効率が悪く、メンテナンス性も高くありません。 そこで、Jekyllの「レイアウト（テンプレート）」機能を使って、全ページのデザインを統一する方法を解説します。
2. 共通化したいところって？
ページを複数作成する際、以下の部分を共通化しておくと便利です。
-
ヘッダー: サイトタイトルやロゴを全ページ同じ場所に表示する。
-
フッター: プライバシーポリシーやお問い合わせへのリンクを統一する。
-
サイドバー: 人気ツールや全ツールへのナビゲーションを表示する。
-
デザイン: CSSを一箇所で管理し、フォントや色を全ページで統一する。
3. サイト全体の土台を作る（default.html）
まず、すべてのページの「外枠」となるHTML構造を定義します。
[ファイルパス: _layouts/default.html]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>{{ page.title }}</title>
<link rel="stylesheet" href="{{ site.baseurl }}/css/style.css">
</head>
<body>
<div class="site-header">
<a href="{{ site.baseurl }}">便利ツール集</a>
</div>
<div class="layout">
<div class="main">
{{ content }} </div>
<aside class="sidebar">
</aside>
</div>
<footer class="footer">
</footer>
</body>
</html>
※{{ content }} の部分には、ブログ記事の内容が表示されます。
default.htmlファイルを作成したら、Githubリポジトリのディレクトリにファイルをアップロードします。
4. 記事専用のレイアウトを作る（post.html）
次に、ブログ記事特有の「タイトル表示」や「日付表示」などを定義します。このレイアウトは、先ほどの default.html を継承（入れ子に）します。
[ファイルパス: _layouts/post.html]
---
layout: default #ここで親のテンプレートを指定しています
---
<div class="blog-header">
<span class="blog-label">📘 技術ブログ</span>
<h1 class="blog-title">{{ page.title }}</h1>
<p class="post-date">{{ page.date | date: "%Y-%m-%d" }}</p>
</div>
<article class="blog-content">
{{ content }} </article>
※{{ content }} の部分には、ブログ記事の内容が表示されます。
post.htmlファイルを作成したら、Githubリポジトリのディレクトリにファイルをアップロードします。
5. 記事（Markdown）からテンプレートを呼び出す
各記事ページで共通テンプレートファイルを使用する為には設定が必要となります。 各記事のファイル（.md）の冒頭で、どのレイアウトを使用するかを指定します。
[ファイルパス: _posts/2026-03-13-sample.md]
---
layout: post #post.htmlのテンプレートを使う指定
title: "sampleページ"
date: 2026-03-13
---
## 本文
ここから記事を書き始めます。
各記事ページの.mdファイルを更新します。
すると、以下の順番でテンプレートファイルが読み込まれてブログ記事ページが表示されます。
💡 反映されない場合は？ もしも正しく反映されない場合は、記事ページ（.md ファイル）のレイアウト指定で layout: post と正しく指定されているか確認しましょう。 ここには、テンプレートファイル名のpost.htmlの
postを指定してください。