ブログサイトは「読みやすさ・更新しやすさ・回遊性」を同時に満たす構成が重要
ブログサイトは、オウンドメディアよりも“個人の発信”に寄った構成になります。 記事が主役であり、読者がストレスなく読み進められること、そして次の記事へ自然に回遊できることが最も大切です。 ここでは、実務で使われるブログサイトの王道構成を、初心者向けにかみ砕いて解説しながら、CSSとSCSSのテンプレートを提示します。
ブログサイトの基本構成
ブログサイトは大きく ヘッダー（ロゴ・メニュー） 記事一覧（カード型 or リスト型） 記事詳細（本文＋サイドバー） フッター（プロフィール・SNS） という流れで構成されます。 この構成は「読者が記事を探す順番」に沿っているため、どのブログでもほぼ共通です。
ヘッダー（シンプルで読み物らしい世界観を作る）
ヘッダーの役割
ブログのヘッダーは、ロゴとメニューだけのシンプルな構成が好まれます。 派手にすると記事の世界観を邪魔するため、余白を広めに取り、落ち着いたデザインにします。
CSS例
header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.2rem 2rem;
background: #ffffff;
border-bottom: 1px solid #e5e7eb;
}
header .logo {
font-size: 1.8rem;
font-weight: bold;
}
header nav a {
margin-left: 1.5rem;
text-decoration: none;
color: #374151;
font-size: 1rem;
}
SCSS例
header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.2rem 2rem;
background: #fff;
border-bottom: 1px solid #e5e7eb;
.logo {
font-size: 1.8rem;
font-weight: bold;
}
nav {
a {
margin-left: 1.5rem;
text-decoration: none;
color: #374151;
font-size: 1rem;
}
}
}
深掘り
ブログは「文章」が主役なので、ヘッダーは控えめにするのが正解です。 ロゴを大きくしすぎると記事より目立ってしまうため、フォントサイズは 1.6〜1.8rem が実務の最適値です。
記事一覧（カード型で視線を安定させる）
役割
記事一覧は、読者が記事を選ぶ場所です。 ブログではカード型とリスト型のどちらも使われますが、視線誘導がしやすいカード型が実務で人気です。
CSS例
.blog-list {
padding: 3rem 2rem;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
.blog-card {
background: #ffffff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
transition: transform 0.2s ease;
}
.blog-card:hover {
transform: translateY(-4px);
}
.blog-card img {
width: 100%;
height: 180px;
object-fit: cover;
}
.blog-card .content {
padding: 1.2rem;
}
.blog-card h3 {
font-size: 1.2rem;
margin-bottom: 0.6rem;
}
.blog-card p {
color: #4b5563;
font-size: 0.95rem;
}
SCSS例
.blog-list {
padding: 3rem 2rem;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
.blog-card {
background: #fff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
transition: transform 0.2s ease;
&:hover {
transform: translateY(-4px);
}
img {
width: 100%;
height: 180px;
object-fit: cover;
}
.content {
padding: 1.2rem;
h3 {
font-size: 1.2rem;
margin-bottom: 0.6rem;
}
p {
color: #4b5563;
font-size: 0.95rem;
}
}
}
}
深掘り
ブログカードは「画像の印象」がクリック率を左右します。 画像が魅力的だと記事のクリック率が大きく上がるため、横長よりも“縦長の比率”が実務で好まれます。
記事詳細（本文の読みやすさが最重要）
役割
記事詳細ページは、読者が最も長く滞在する場所です。 本文の読みやすさ、余白、行間、フォントサイズが非常に重要になります。
CSS例
.blog-detail {
max-width: 720px;
margin: 3rem auto;
padding: 0 1.5rem;
}
.blog-detail h1 {
font-size: 2rem;
margin-bottom: 1.5rem;
}
.blog-detail p {
font-size: 1.05rem;
line-height: 1.8;
color: #374151;
margin-bottom: 1.5rem;
}
.blog-detail img {
width: 100%;
border-radius: 12px;
margin: 2rem 0;
}
SCSS例
.blog-detail {
max-width: 720px;
margin: 3rem auto;
padding: 0 1.5rem;
h1 {
font-size: 2rem;
margin-bottom: 1.5rem;
}
p {
font-size: 1.05rem;
line-height: 1.8;
color: #374151;
margin-bottom: 1.5rem;
}
img {
width: 100%;
border-radius: 12px;
margin: 2rem 0;
}
}
深掘り
本文は「行間」が命です。 行間を広めに設定することで、読者が疲れずに読み進められます。 実務では line-height: 1.7〜1.9 が最も読みやすいとされています。
サイドバー（回遊性を高める）
役割
ブログのサイドバーは、読者を次の記事へ誘導するための重要なパーツです。 人気記事・最新記事・カテゴリ・プロフィールなどを配置します。
CSS例
.sidebar {
max-width: 300px;
padding: 2rem 1rem;
}
.sidebar h3 {
font-size: 1.2rem;
margin-bottom: 1rem;
}
.sidebar a {
display: block;
margin-bottom: 0.8rem;
color: #2563eb;
text-decoration: none;
}
SCSS例
.sidebar {
max-width: 300px;
padding: 2rem 1rem;
h3 {
font-size: 1.2rem;
margin-bottom: 1rem;
}
a {
display: block;
margin-bottom: 0.8rem;
color: #2563eb;
text-decoration: none;
}
}
深掘り
サイドバーは「回遊性」を作る場所。 記事詳細ページの右側に置くことで、読者が自然に次の記事へ進めます。
フッター（ブログの個性を出す）
役割
ブログのフッターは、プロフィールやSNSリンクを置くことで“個人の世界観”を作ります。
CSS例
footer {
padding: 2rem;
background: #1f2937;
color: #e5e7eb;
text-align: center;
font-size: 0.9rem;
}
SCSS例
footer {
padding: 2rem;
background: #1f2937;
color: #e5e7eb;
text-align: center;
font-size: 0.9rem;
}
深掘り
ブログは「人」が主役なので、フッターにプロフィールを置くと読者との距離が縮まります。
まとめ
ブログサイトは ヘッダーで世界観を示す 記事一覧で選びやすくする 記事詳細で読みやすさを極める サイドバーで回遊性を高める フッターで個性を出す という流れが鉄板です。
CSSとSCSSで構造を整理することで、 初心者でも迷わずに実務レベルのブログサイトを作れるようになります。
