【ブログCSS】見出しをおしゃれに！境界線・背景・擬似要素のカスタマイズ術

第3回では、クリック率を高める「ボタンとリンク」の動きについて学びました。ブログに「反応」があるだけで、一気にサイトとしての完成度が上がりますよね。

記事の顔を整える！「見出し」カスタマイズの基本と応用

第4回となる今回は、記事の構造を分かりやすく伝える最重要パーツ、「見出し（h2・h3）」のカスタマイズに挑戦しましょう！標準の素っ気ない見出しを、CSSの力で「記事の顔」に変えていきます。

第11章：境界線（border）で見出しを仕切る
第12章：背景色（background）と角丸（border-radius）
第13章：疑似要素（::before）でアイコンを添える
まとめ：見出しが変われば「読みやすさ」が変わる

第11章：境界線（border）で見出しを仕切る

見出しをデザインする上で最も使い勝手が良いのが「border（境界線）」プロパティです。上下左右、好きな場所に線を引くことができます。

例えば、左側に太い線を引き、下に細い線を引く「エンジニアブログ」でよく見かけるスタイルは以下の通りです。

/* 大見出し(h2)の左と下に線を引く */
.entry-content h2 {
    padding: 10px 15px;      /* 内側の余白 */
    border-left: 8px solid #0000ff; /* 左側の太い線（青） */
    border-bottom: 1px solid #ddd;  /* 下側の細い線（グレー） */
    background: #f8f8f8;     /* ほんのり背景色をつける */
}

第12章：背景色（background）と角丸（border-radius）

中見出し（h3）などは、背景色をベタ塗りにして文字を白抜きにする「リボン風」や「タグ風」のデザインにすると、視覚的なメリハリがつきます。

/* 中見出し(h3)を吹き出し・カプセル風にする */
.entry-content h3 {
    padding: 8px 20px;
    background-color: #333333; /* 背景を濃いグレーに */
    color: #ffffff;           /* 文字を白に */
    border-radius: 50px;      /* 両端を丸くする */
}

これだけで、ゲームの「クエスト名」や「装備カテゴリ」を表示するような、パッと目を引くデザインになりますね。

第13章：疑似要素（::before）でアイコンを添える

少し高度なテクニックですが、見出しの前に小さな四角やチェックマークなどの装飾を自動でつける方法があります。これには「::before」という擬似要素を使います。

/* 見出しの前に小さなアクセントをつける */
.entry-content h2::before {
    content: "";              /* 中身は空でOK */
    display: inline-block;
    width: 15px;
    height: 15px;
    background-color: #ff6600; /* オレンジのアクセント */
    margin-right: 10px;
}