サイト型トップページの作り方を公開しています！Check
テーマ共通
WEB素材

CSSコピペOK！見出しをカスタマイズ｜おしゃれデザインサンプル集【Cocoon対応】

アイキャッチ｜見出しデザイン テーマ共通
2022年06月16日
記事内に広告が含まれています

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

この記事では、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を記述

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

ChromeデベロッパーツールでCSSセレクタを調べる方法｜初心者向けに解説
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 {
  position: relative; /* 疑似要素の基準 */
  background: #a5c9c1; /* 背景色 */
  padding: .8em 1em; /* 余白 */
  color: #fff; /* 文字色（＝枠色の基準） */
}

h2::before {
  content: ""; /* 枠用 */
  position: absolute; /* 重ねる */
  inset: 5px; /* 内側 */
  border: dashed 1px currentColor; /* 点線枠（文字色と連動） */
}

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

背景色+上下にラインをつけた見出し

h2 {
  position: relative; /* 擬似要素の基準 */
  background-color: #a5c9c1; /* 背景色 */
  padding: .7em 1em; /* 余白 */
  color: #fff; /* 文字色（＝ライン色の基準） */
}

h2::before,
h2::after {
  position: absolute; /* 重ねる */
  left: 0;
  width: 100%;
  content: ""; /* 線用 */
  border-top: 1px solid currentColor; /* 上下ライン */
}

h2::before { 
  top: 3px; /* 上ライン位置 */
}

h2::after { 
  bottom: 3px; /* 下ライン位置 */
}

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 {
  position: absolute; /* 重ねる */
  content: ""; /* 三角用 */
  width: 0; /* 三角形用 */
  height: 0; /* 三角形用 */
  bottom: -10px; /* 下に出す */
  left: 1.5em; /* 左位置 */
  border-width: 10px 10px 0 10px; /* 三角サイズ */
  border-style: solid; /* 枠線 */
  border-color: var(--baloon-color) transparent transparent transparent; /* 吹き出し三角 */
}

4-2 白抜きの吹き出し

白抜き吹き出しの見出し

h2 {
  --baloon-color: #333;
  position: relative;
  padding: .7em 1em; /* 余白 */
  border: 3px solid var(--baloon-color); /* 枠線 */
  color: var(--baloon-color); /* 文字色 */
}

h2::before,
h2::after {
  position: absolute;
  content: "";
  left: 1em; /* 吹き出し位置 */
  width: 0;
  height: 0;
  border-width: 14px 12px 0;
  border-style: solid;
}

h2::before {
  bottom: -14px; /* 外側 */
  border-color: var(--baloon-color) transparent transparent;
}

h2::after {
  bottom: -10px; /* 内側 */
  border-color: #fff transparent transparent;
}

4-3 下線のみ吹き出し

下線のみ吹き出しをつけた見出し

h2 {
  --baloon-color: #333;
  position: relative;
  border-bottom: 3px solid var(--baloon-color); /* 下線 */
  padding: .3em 0; /* 余白 */
  color: var(--baloon-color); /* 文字色 */
}

h2::before,
h2::after {
  position: absolute;
  content: "";
  left: 1em; /* 吹き出し位置 */
  width: 0;
  height: 0;
  border-width: 14px 12px 0;
  border-style: solid;
}

h2::before {
  bottom: -14px; /* 外側三角 */
  border-color: var(--baloon-color) transparent transparent;
}

h2::after {
  bottom: -10px; /* 内側三角 */
  border-color: #fff transparent transparent;
}

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

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 {
  width: fit-content;
  padding: 0 3em; /* 余白 */
  margin: 0 auto;
  text-align: center;
  position: relative;
  color: #333; /* 文字色 */
}

h2::before,
h2::after {
  content: "";
  background: #a5c9c1; /* 線の色 */
  width: 2em;
  height: 2px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

h2::before {
  left: 0;
}

h2::after {
  right: 0;
}

カッコ型デザイン

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 {
  display: flex;
  align-items: baseline;
  column-gap: 8px; /* アイコンと文字の間隔 */
  padding: .7em 1em; /* 余白 */
  color: #333; /* 文字色 */
}

h2::before {
  content: '';
  width: .8em;
  height: .4em;
  border-bottom: 3px solid #a5c9c1; /* チェック線 */
  border-left: 3px solid #a5c9c1; /* チェック線 */
  transform: rotate(-45deg) translate(2px, -2px); /* 角度と位置調整 */
}

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

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

/* 先頭に丸いアクセント */
h2 {
  --accent-color: #607d8b; /* アクセント色 */
  position: relative;
  background: none; /* 背景なし */
  padding: .3em 1em 1em 40px; /* 内側余白（上・右・下・左） */
  color: #333; /* 文字色 */
}

h2::before,
h2::after {
  position: absolute;
  content: '';
  border-radius: 100%; /* 円形 */
}

h2::before {
  top: .6em;
  left: .2em;
  z-index: 2;
  width: 22px;
  height: 22px;
  background: var(--accent-color); /* アクセント色 */
  opacity: .5; /* 透明度 */
}

h2::after {
  top: 1.1em;
  left: .7em;
  width: 15px;
  height: 15px;
  background: var(--accent-color); /* アクセント色 */
  opacity: .5; /* 透明度 */
}

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

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

/* 先頭に四角のアクセント */
h2 {
  --accent-color: #607d8b; /* アクセント色 */
  position: relative;
  background: none; /* 背景なし */
  padding: .3em 1em 1em 40px; /* 内側余白（上・右・下・左） */
  color: #333; /* 文字色 */
}

h2::before,
h2::after {
  position: absolute;
  content: '';
}

h2::before {
  top: .6em;
  left: .2em;
  z-index: 2;
  width: 22px;
  height: 22px;
  background: var(--accent-color); /* アクセント色 */
  opacity: .5; /* 透明度 */
}

h2::after {
  top: 1.1em;
  left: .8em;
  width: 15px;
  height: 15px;
  background: var(--accent-color); /* アクセント色 */
  opacity: .5; /* 透明度 */
}
スポンサーリンク

まとめ

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

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

【コピペOK】おしゃれなボックスデザイン！ブログを彩るCSS囲み枠集
ブログで使えるボックスデザイン（囲み枠）を厳選してご紹介します。コードはコピペ対応で簡単！！
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
＼シェアはこちらから／
スポンサーリンク

About meこの記事を書いた人

はるみです
女性-1-gif

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

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

Shopping お買い物はこちら

Amazon

楽天市場

Yahoo!

Turicco

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

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

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

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

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

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