サイト型トップページの作り方を公開しています！Check
Webカスタマイズ
WEBデザイン素材

見出しデザインをおしゃれにカスタマイズ【Cocoon対応・CSSサンプル付き】

アイキャッチ｜見出しデザイン
2022年06月16日
記事内に広告が含まれています
更新情報（2026/02/08）

一部CSSを微調整しました

見出しデザインを変えるだけで、記事の読みやすさや視認性は大きく変わりサイト全体の印象もアップします。

この記事では、WordPress（無料ブログ含む）で使える見出しデザインのサンプルを、コピペで実装できるコード付きで紹介します。初心者ブロガーの方でもすぐに導入できる内容です。

CSSを使って色・枠線・余白・角丸などを自由に調整し、自分のブログにぴったりの見出しデザインを作ってみましょう。

スポンサーリンク

CSSで見出しを変更する前に知っておきたいこと

見出しデザインをCSSで変更する前に、

  • 「どこにCSSを書くのか」
  • 「どの見出しに適用されるのか」

を理解していないと、コードを書いても反映されないことがよくあります。

まずは、初心者がつまずきやすい基本ポイントから整理していきましょう。

CSSを記述する場所

スタイルは 子テーマの style.css（または追加CSS） に記述するのが基本です。

  • 親テーマの更新による上書きを防げる
  • 子テーマがない場合は先に作成しておきましょう
Cocoonカスタマイズ｜HTML・CSS・JavaScript・PHPの使い分けと編集方法
Cocoonは無料テーマの中でも柔軟にカスタマイズできるテーマですが、「どこを編集すればいいの？」「HTMLとCSSとPHPの違いがわからない…」という初心者は...
turicco.com

セレクタとは？

CSSでスタイルを適用する対象のHTML要素を指定する部分を「セレクタ」と呼びます。

h2 {
  color: #333333;
}
  • h2 がセレクタ
  • color: #333333; が適用するスタイル

テーマでは見出しに独自のクラスや構造が追加されていることが多く、単純に h2 だけ指定しても「テーマ側のCSS」の方が優先されてしまう場合があります。

▽ Cocoonの見出しセレクタ例

適用場所セレクタ
記記事本文内の見出し.article h2 〜 .article h6
サイドバー内の見出し.sidebar h3
ウィジェット見出し
（サイドバーも共通）		.widget-title

セレクタが正しくないとCSSを記述しても反映されません。対象の見出しに合わせて最適なセレクタを指定しましょう。

セレクタを調べる方法
  1. 対象の見出しを右クリック → 「検証」
  2. HTML構造とクラス名を確認
  3. .article h2 のように適切なセレクタでCSSを記述

デベロッパーツールを使うと、初心者でも簡単にセレクタを調べられます。

CSSセレクタの調べ方｜Chromeデベロッパーツール（検証）でクラス・IDを確認する方法【初心者向け】
CSSでカスタマイズしてみたいけれど、「どの要素を指定すればいいのかわからない…」「書いたCSSが思った通りに反映されない…」そんな経験はあると思います。見た目...
turicco.com

デフォルトスタイルをリセットする方法

cocoon見出し

Cocoonテーマでは、初期状態で見出しに背景色・ボーダー・角丸などが設定されています。最初にデフォルトデザインをリセットすることで、「テーマの装飾」と「自分のデザイン」が混ざらずCSS設計がシンプルになります。

/* Cocoon見出しデザインのリセット */
.article h2,
.article h3,
.article h4,
.article h5,
.article h6 {
  background: none; /* 背景色なし */
  border: none;     /* 枠線なし */
  border-radius: 0; /* 丸みなし */
}
  • 必ずしもすべてリセットする必要はありません
  • 不要なプロパティだけを調整可能です
  • この後に、自分好みの見出しデザインをCSSで追加していきます
スポンサーリンク

見出しデザインサンプル

背景塗りつぶし

1-1 背景色

背景色をつけた見出し

h2 {
  background-color: #a5c9c1; /* 背景色 */
  padding: .7em 1em; /* 余白 */
  color: #fff; /* 文字色 */
}

1-2 背景色+ステッチ風

背景色+ステッチ風の見出し

h2 {
  padding: .8em 1em; /* 内側余白 */
  background-color: #a5c9c1; /* 背景色 */
  color: #fff; /* 文字色 */
  outline: 1px dashed currentColor; /* 点線アウトライン */
  outline-offset: -5px; /* 内側に5pxずらす */
}

1-3 背景色+上下にライン

背景色+上下にラインの見出し

h2 {
  --bg-color: #a5c9c1; /* 見出しの基調色 */
  background: var(--bg-color); /* 背景色 */
  color: #fff; /* 文字色 */
  padding: .5em 1em; /* 内側余白 */
  margin: 3px 0; /* 影用スペース */
  border-top: 1px solid currentColor; /* 上の区切り線 */
  border-bottom: 1px solid currentColor; /* 下の区切り線 */
  box-shadow: 0 3px var(--bg-color), 0 -3px var(--bg-color); /* 外側拡張 */
}

1-4 文字数分の幅にフィット

文字数幅にフィットした見出し

h2 {
  display: inline-block; /* 文字幅にフィット */
  padding: .7em 1em; /* 余白 */
  background-color: #a5c9c1; /* 背景色 */
  color: #fff; /* 文字色 */
  border-radius: 0 99px 99px 0; /* 右だけ丸く */
}

1-5 背景色+影

背景色+影の見出し

h2 {
  background-color: #a5c9c1; /* 背景色 */
  padding: .7em 1em; /* 余白 */
  color: #fff; /* 文字色 */
  box-shadow: 5px 5px 5px #ddd; /* 影 */
}

1-6 背景ドット

薄いドット背景の見出し

h2 {
  color: #222; /* 文字色 */
  padding: .7em 1em; /* 余白 */
  background:
    repeating-linear-gradient(90deg, #fff 0 1px, transparent 1px 2px),
    repeating-linear-gradient(#fff 0 1px, #aaa 1px 2px);
}

1-7 背景ストライプ

背景にストライプの見出し

h2 {
  color: #333; /* 文字色 */
  padding: .7em 1em; /* 余白 */
  background-image: repeating-linear-gradient(-45deg, #eee 0 6px, transparent 6px 12px);
}

1-8 背景ストライプ（細かい）

背景に細かいストライプの見出し

h2 {
  --stripe-color: #eee; /* ストライプの色 */
  color: #333; /* 文字色 */
  padding: .7em 1em; /* 余白 */
  background: linear-gradient(
    135deg,
    transparent 25%,
    var(--stripe-color) 26%,
    var(--stripe-color) 50%,
    transparent 51%,
    transparent 75%,
    var(--stripe-color) 76%,
    var(--stripe-color)
  );
  background-size: 4px 4px;
}

下線

2-1 シンプルな下線

シンプルな下線の見出し

h2 {
  padding: .3em 0; /* 内側余白 */
  border-bottom: solid 3px #a5c9c1; /* 下線: 実線・太さ・色 */
  color: #333; /* 文字色 */
}

2-2 ２色の下線

色の下線の見出し

h2 {
  position: relative;
  padding: .3em 0; /* 内側余白 */
  border-bottom: solid 3px #eee; /* 下線1: 実線・太さ・色 */
  color: #333; /* 文字色 */
}

h2::after {
  position: absolute;
  content: "";
  display: block;
  border-bottom: solid 3px #a5c9c1; /* 下線2: 実線・太さ・色 */
  bottom: -3px;
  width: 30%; /* 下線2の幅 */
}

2-3 破線

下線（破線）の見出し

h2 {
  padding: .3em 0; /* 内側余白 */
  border-bottom: 3px dashed #a5c9c1; /* 太さ・破線・色 */
  color: #333; /* 文字色 */
}

2-4 点線

下線（点線）の見出し

h2 {
  padding: .3em 0; /* 内側余白 */
  border-bottom: dotted 6px #a5c9c1; /* 点線・太さ・色 */
  color: #333; /* 文字色 */
}

2-5 二重線

下線（二重線）の見出し

h2 {
  padding: .3em 0; /* 内側余白 */
  border-bottom: double 7px #a5c9c1; /* 二重線・太さ・色 */
  color: #333; /* 文字色 */
}

2-6 斜めストライプの下線

斜めストライプ下線の見出し

h2 {
  --stripe-color: #b2aba1; /* ストライプの色 */
  position: relative;
  padding: .5em 0; /* 余白 */
  color: #333; /* 文字色 */
}

h2::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 5px;
  bottom: 0;
  left: 0;
  background: linear-gradient(
    135deg,
    transparent 25%,
    var(--stripe-color) 25%,
    var(--stripe-color) 50%,
    transparent 50%,
    transparent 75%,
    var(--stripe-color) 75%,
    var(--stripe-color)
  );
  background-size: 4px 4px;
}

左側に線

3-1 左側に実線

左側に実線の見出し

h2 {
  border-left: solid 5px #a5c9c1; /* 左線: 実線・太さ・色 */
  color: #333; /* 文字色 */
  padding: .5em 1em; /* 余白 */
}

3-2 左側に二重線

左側に二重線の見出し

h2 {
  border-left: double 10px #a5c9c1; /* 左線: 二重線・太さ・色 */
  color: #333; /* 文字色 */
  padding: .5em 1em; /* 余白 */
}

3-3 左側に二色の線

左側に二色線の見出し

h2 {
  position: relative;
  border-left: 8px solid #eee; /* 左線: 実線・太さ・色 */
  color: #333; /* 文字色 */
  padding: .5em 1em; /* 余白 */
}

h2::before {
  position: absolute;
  content: "";
  left: -8px;
  bottom: 0;
  width: 8px;
  height: 50%;
  background-color: #a5c9c1; /* アクセント線 */
}

吹き出し

4-1 背景色あり吹き出し

背景色あり吹き出しの見出し

h2 {
  --baloon-color: #a5c9c1; /* 吹き出し色 */
  position: relative; /* 基準要素 */
  padding: .7em 1em; /* 余白 */
  background: var(--baloon-color); /* 背景 */
  color: #fff; /* 文字色 */
}

/* 吹き出し（三角形） */
h2::after {
  content: ''; /* 擬似要素 */
  position: absolute; /* 絶対配置 */
  bottom: -9px; /* 下に配置 */
  left: 1.5em; /* 位置 */
  width: 18px; /* 幅 */
  height: 9px; /* 高さ */
  background-color: var(--baloon-color); /* 色 */
  clip-path: polygon(0 0, 100% 0, 50% 100%); /* 三角形 */
}

4-2 白抜きの吹き出し

白抜き吹き出しの見出し

h2 {
  --baloon-color: #333; /* 枠・吹き出し色 */
  position: relative; /* 基準要素 */
  padding: .7em 1em; /* 余白 */
  border: 3px solid var(--baloon-color); /* 枠線 */
  background: #fff; /* 背景（白抜き） */
  color: var(--baloon-color); /* 文字色 */
}

/* 吹き出し（共通） */
h2::before,
h2::after {
  content: ''; /* 擬似要素 */
  position: absolute; /* 絶対配置 */
  clip-path: polygon(0 0, 100% 0, 50% 100%); /* 三角形 */
}

/* 枠三角 */
h2::before {
  bottom: -12px; /* 下に配置 */
  left: 1.5em; /* 位置 */
  width: 22px; /* 幅 */
  height: 11px; /* 高さ */
  background: var(--baloon-color); /* 枠色 */
}

/* 白抜き三角 */
h2::after {
  bottom: -8px; /* 内側位置 */
  left: calc(1.5em + 2px); /* 枠分オフセット */
  width: 18px; /* 幅 */
  height: 9px; /* 高さ */
  background: #fff; /* 白抜き */
}

4-3 下線のみ吹き出し

下線のみ吹き出しの見出し

/*下線のみの吹き出し*/
h2 {
  --baloon-color: #333; /* 下線・矢印色 */
  position: relative; /* 基準要素 */
  padding: .5em 0; /* 余白 */
  border-bottom: 3px solid var(--baloon-color); /* 下線 */
  background: transparent; /* 背景なし */
  color: var(--baloon-color); /* 文字色 */
}

/* 吹き出し（共通） */
h2::before,
h2::after {
  content: ''; /* 擬似要素 */
  position: absolute; /* 絶対配置 */
  clip-path: polygon(0 0, 100% 0, 50% 100%); /* 三角形 */
}

/* 枠三角 */
h2::before {
  bottom: -12px; /* 下に配置 */
  left: 1.5em; /* 位置 */
  width: 22px; /* 幅 */
  height: 11px; /* 高さ */
  background: var(--baloon-color); /* 枠色 */
}

/* 白抜き三角 */
h2::after {
  bottom: -8px; /* 内側位置 */
  left: calc(1.5em + 2px); /* 枠分オフセット */
  width: 18px; /* 幅 */
  height: 9px; /* 高さ */
  background: #fff; /* 白抜き */
}

中央揃えにおすすめのデザイン

5-1 下に短く実線

下に短い実線の見出し

h2 {
  position: relative;
  padding: .7em 1em; /* 余白 */
  text-align: center;
  color: #333; /* 文字色 */
}

h2::before {
  content: "";
  position: absolute;
  bottom: 0;
  height: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px; /* 線の幅 */
  background: #a5c9c1; /* 線の色 */
}

5-2 下に丸い飾り

下に丸い飾りの見出し

h2 {
  position: relative;
  text-align: center;
  color: #333; /* 文字色 */
  padding: 1em 0; /* 余白 */
}

h2::before {
  content: "";
  position: absolute;
  border-bottom: 10px dotted #a5c9c1; /* 点の高さ・種類・色 */
  width: 50px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

5-3 左右に飾り線

左右に飾り線の見出し

h2 {
  display: flex; /* 横並びレイアウト */
  align-items: center; /* 縦中央揃え */
  justify-content: center; /* 中央配置 */
  gap: 1em; /* 文字と線の間隔 */
  color: #333; /* 文字色 */
  background-color: transparent; /* 背景なし */
}

h2::before,
h2::after {
  content: ""; /* 疑似要素生成 */
  flex: 1; /* 左右の線を伸縮させる */
  height: 2px; /* 線の太さ */
  background: currentColor; /* 線の色 */
}

カッコ型デザイン

6-1 かぎ括弧

かぎ括弧の見出し

/* かぎ括弧見出し */
h2 {
  position: relative; /* 擬似要素の基準 */
  padding: .8em 1em; /* 余白 */
  color: #333; /* 文字色 */
}

h2::before,
h2::after {
  content: ""; /* 装飾用 */
  width: 20px; /* サイズ */
  height: 30px; /* サイズ */
  position: absolute; /* 重ねる */
}

h2::before {
  border-left: solid 2px currentColor; /* 左線 */
  border-top: solid 2px currentColor; /* 上線 */
  top: 0; /* 上 */
  left: 0; /* 左 */
}

h2::after {
  border-right: solid 2px currentColor; /* 右線 */
  border-bottom: solid 2px currentColor; /* 下線 */
  bottom: 0; /* 下 */
  right: 0; /* 右 */
}

6-2 角括弧

角括弧の見出し

/* 角括弧見出し */
h2 {
  position: relative; /* 擬似要素の基準 */
  padding: .7em 1em; /* 余白 */
  color: #333; /* 文字色 */
}

h2::before,
h2::after {
  content: ""; /* 装飾用 */
  position: absolute; /* 重ねる */
  bottom: 0; /* 下基準 */
  height: 100%; /* 高さ */
  width: 0.75em; /* 括弧幅 */
  border-top: 2px solid currentColor; /* 上線 */
  border-bottom: 2px solid currentColor; /* 下線 */
}

h2::before {
  left: 0; /* 左配置 */
  border-left: 2px solid currentColor; /* 左線 */
}

h2::after {
  right: 0; /* 右配置 */
  border-right: 2px solid currentColor; /* 右線 */
}

重なりを使ったデザイン

7-1 背景をずらしたデザイン

背景をずらしたデザインの見出し

/* 背景をずらしたデザイン */
h2 {
  position: relative;
  padding: .7em 1em; /* 余白 */
  border: 1px solid currentColor; /* 枠線 */
  color: #333; /* 文字色（黒） */
}

h2::after {
  content: '';
  position: absolute;
  top: 5px;
  left: 5px;
  width: calc(100% + 1px);
  height: calc(100% + 1px);
  background: #c6dddd; /* 背景アクセント色 */
  z-index: -1;
}

7-2 ずらした線でアクセントをつけたデザイン

ずらした線でアクセントの見出し

/* ずらした線でアクセントをつけたデザイン */
h2 {
  position: relative;
  padding: .7em 1em; /* 余白 */
  box-shadow: 6px 6px #333; /* ずらし影 */
  outline: 5px solid #fff; /* 外枠ライン */
  border: 1px solid #333; /* 枠線 */
  background: #c6dddd; /* 背景色 */
  color: #333; /* 文字色 */
}

7-3 くっきりとした影を重ねる

くっきりとした影を重ねた見出し

/* くっきりとした影を重ねた見出し */
h2 {
  padding: .7em 1em; /* 余白 */
  border: 1px solid #a5c9c1; /* 枠線 */
  box-shadow: 5px 5px #a5c9c1; /* 影 */
  color: #333; /* 文字色 */
}

アクセントをつけるデザイン

8-1 先頭にチェック

先頭にチェックマークの見出し

/* 先頭にチェック */
h2 {
  position: relative; /* 擬似要素の基準 */
  padding: 0 0 0 1.5em; /* 左にチェック分スペース確保 */
  color: #333;
  line-height: 1.8;
}

h2::before {
  content: '';
  position: absolute;
  top: .6em; /* 上からの位置固定 */
  left: 0; /* 左端 */
  width: .8em;
  height: .3em;
  border-bottom: 3px solid #a5c9c1;
  border-left: 3px solid #a5c9c1;
  transform: rotate(-45deg); /* チェック形状 */
}

8-2 先頭に丸いアクセント

先頭に丸いアクセントを重ねた見出し

/* 先頭に丸いアクセント */
h2 {
  position: relative; /* 擬似要素の基準 */
  background: none; /* 背景なし */
  padding: 0 0 .3em 2em; /* 余白 */
  color: #333; /* 文字色 */
  line-height: 1.8; /* 行高 */
  border-bottom: 1px solid currentColor; /* 下線 */
}

/* アクセント（共通） */
h2::before,
h2::after {
  content: '';
  position: absolute;
  background: #607d8b;
  border-radius: 50%;
  opacity: .5;
}

/* 大きい丸 */
h2::before {
  top: .3em;
  left: .2em;
  width: 1.1em;
  height: 1.1em;
  z-index: 2;
}

/* 小さい丸 */
h2::after {
  top: .8em;
  left: .8em;
  width: .7em;
  height: .7em;
}

8-3 先頭に四角のアクセント

先頭に四角のアクセントを重ねた見出し

/* 先頭に四角のアクセント */
h2 {
  position: relative; /* 擬似要素の基準 */
  background: none; /* 背景なし */
  padding: 0 0 .3em 2em; /* 余白 */
  color: #333; /* 文字色 */
  line-height: 1.8; /* 行高 */
  border-bottom: 1px solid currentColor; /* 下線 */
}

/* 四角アクセント（共通） */
h2::before,
h2::after {
  content: '';
  position: absolute;
  background: #607d8b;
  opacity: .5;
}

/* 大きい四角 */
h2::before {
  top: .3em;
  left: .2em;
  width: 1em;
  height: 1em;
  z-index: 2;
}

/* 小さい四角 */
h2::after {
  top: .8em;
  left: .8em;
  width: .7em;
  height: .7em;
}
スポンサーリンク

まとめ

シンプルイズベストで奇抜すぎないデザインを厳選しました。記事を読むときに必ず目に入る部分なのでお好みの見出しデザインにしてみてはいかがでしょうか。

こちらでボックスデザインも公開しているので見てくださいね。

ボックスデザイン｜ブログをおしゃれに彩るCSS囲み枠集【コピペOK】
ブログで使えるボックスデザイン（囲み枠）を厳選してご紹介します。コードはコピペ対応で簡単！！
turicco.com

見出しデザイン作成の参考にさせていただいたサイトをご紹介します。

CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選
h1〜h6タグの美しくおしゃれなデザインサンプルをたくさん紹介します。どれもコピペで使うことができます。
saruwakakun.com
CSSで作る見出しデザイン46選｜コピペで即使えるサンプル集 | SEOタイムズ
この記事では、SEOタイムズのデザイナーが様々なCSSを使った見出しデザインを作成し、ユーザーの皆様にご紹介させていただきます。 全てソースコードも記載しており...
seotimes.jp
CSS見出しデザイン参考100選！コピペ可！どこよりも詳しく解説！
今回はCSSのみで作れる見出しデザインについて100個サンプルを作ってみました。見出しなどで使えるデザイン例についてどこよりも詳しく紹介・解説しています。すべて...
jajaaan.co.jp
コピペで使える見出しタイトルのCSSデザイン＆サンプルコード35選
見出し・タイトルで使えるデザインサンプルを35種類、どどどっとご紹介します。このデザインサンプルでは、h1タグに対してCSSを適用しています。詳しいコードの解説...
www.naaavi.com
＼シェアはこちらから／
スポンサーリンク
背景画像｜PC

About meこの記事を書いた人

はるみです
女性-1-gif

ブログ好きな40代主婦です。
2020年1月1日にWordPressを始め、
Cocoonをスキンなしでカスタマイズ。

  • ドメインパワー : 40
  • 2023年より有料記事公開
    累計550件のご購入実績
  • カスタマイズを丁寧にサポート

Shopping お買い物はこちら

Amazon

楽天市場

Yahoo!

Turicco

Comment 記事の感想を書き込んでいただけると幸いです

  1. ひかり より:
    2025年11月18日 02:12

    はるみさん！Xのひかりです。いつ見ても素敵なサイト。見出しデザイン変えたかったのでためになりました！他の記事も参考にしますッ！応援( ･ᴗ･ )⸝⚑⚐゛︎︎︎

    返信
    • はるみ はるみ より:
      2025年11月18日 07:38

      > ひかりさん
      　
      こちらにもコメントありがとうございます。
      　
      ぜひぜひお待ちしています～♪
      またエックスでもよろしくお願いします(^-^)

タイトルとURLをコピーしました