サイト型トップページの作り方を公開しています！Check

CSSで見出しデザインをカスタマイズする方法【簡単おしゃれ・コピペOK】

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

見出しデザインを工夫するだけで、記事の読みやすさや視認性がぐっと向上しサイト全体の印象も大きく変わります。

この記事では、WordPress（一部無料ブログ）全般で活用できる見出しデザインのサンプルを紹介します。初心者でもコピペで実装できるコード付きです。

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

スポンサーリンク

About meこの記事を書いた人

はるみです
吹き出し／女性

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

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

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

CSSを記述する場所

  • 子テーマの style.css（推奨）
  • 親テーマの更新で上書きされない
  • 子テーマがない場合は先に作成しておく必要あり
Cocoonカスタマイズの基本｜HTML・CSS・PHP・JavaScript編集方法
ブログのデザインや機能をもっと自由にカスタマイズしたいとき、Cocoonでは HTML・CSS・PHP・JavaScript を使って編集できます。ほんの少し手...
turicco.com

セレクタの指定方法

CSSでスタイルを適用する際には、どのHTML要素に適用するかを指定する必要があります。

この指定部分を「セレクタ」と呼びます。見出しの例だと、

h2 {
  color: #333333;
}
  • h2 がセレクタです
  • color: #333333; が適用するスタイル
  • この場合、すべての<h2>タグの文字色が変更されます

テーマによっては見出しにクラスが付与されているため、単純に h2 と書くだけでは反映されない場合があります。

▽ Cocoonの見出しセレクタ例

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

セレクタが合っていないとどんなにCSSを記述してもスタイルは反映されません。テーマや変更したい見出しによって、最適なセレクタを指定してください。

セレクタを調べる方法
  1. 対象の見出しを右クリック → 「検証」
  2. HTML構造とクラス名を確認
  3. .article h2 のように適切なセレクタでCSSを記述
CSSセレクタを調べる方法｜Chromeデベロッパーツール活用で初心者でも簡単！Webデザインに役立つ実践ガイド
Webデザインやサイトのカスタマイズに挑戦するとき、避けて通れないのが「CSSセレクタを調べる」作業です。実際、「デベロッパーツールを使えないとCSSは書けない...
turicco.com

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

Cocoonテーマでは、初期状態で見出しに背景色やボーダー、角丸などのスタイルが設定されています。必要に応じてリセットCSSを使うとシンプルな状態に戻せます。

/* Cocoon見出しデザインのリセット */
.article h2,
.article h3,
.article h4,
.article h5,
.article h6 {
    background: none; /* 背景色を削除 */
    border: none;     /* 枠線を削除 */
    border-radius: 0; /* 角丸を削除 */
}
  • すべてリセットする必要はありません。
  • 不要なプロパティだけを削除して調整するのがおすすめです。
スポンサーリンク
目次に戻る

見出しデザインサンプル

背景塗りつぶし

1-1 背景色

背景色をつけた見出し

h2 {
   background-color:#a5c9c1; /*カラーコードを入力*/
   color:#fff; /* 文字色（白）*/
}

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

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

h2 {
   background-color:#a5c9c1; /*カラーコードを入力*/
   box-shadow: 0px 0px 0px 5px #a5c9c1;
   border: dashed 1px #fff; /*線:点線・太さ・色（白）*/
   color:#fff; /* 文字色 */
}

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

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

h2 {
   position: relative;
   background-color:#a5c9c1;
   color:#fff;
}

h2:before,
h2:after {
   position: absolute;
   left: 0;
   width: 100%;
   content: '';
   border-top: 1px solid #fff; /*ライン：太さ・実線・色 */
}

h2:before {
   top: 3px;
}

h2:after {
   bottom: 3px;
}

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

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

h2 {
   background-color:#a5c9c1; /*カラーコードを入力*/
   display: inline-block;
   color:#fff; /* 文字色（白）*/
   border-radius: 0px 99px 99px 0px; /*角の丸み*/
}

1-5 背景色+影

背景色+影をつけた見出し

h2 {
   background-color:#a5c9c1; /*カラーコードを入力*/
   color:#fff; /* 文字色（白）*/
   box-shadow: 5px 5px 5px #ddd;
}

1-6 背景ドット

薄いドット背景の見出し

h2 {
   --dot-color: #aaa; /* 背景ドットの色 */
   color: #333; /* 文字色 */
   background-image: repeating-linear-gradient(90deg, #fff 0 1px, transparent 1px 2px), repeating-linear-gradient(#fff 0 1px, var(--dot-color) 1px 2px);
}

1-7 背景ストライプ

背景にストライプをつけた見出し

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

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

背景に細かいストライプをつけた見出し

h2 {
   --stripe-color: #eee; /*ストライプの色 */
   color: #333; /* 文字色 */
   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: 0.3em 0; /* 内側余白調整 */
   border-bottom: solid 3px #a5c9c1; /* 下線：実線・太さ・色 */
   color:#333; /* 文字色（黒）*/
}

2-2 ２色の下線

２色の下線をつけた見出し

h2 {
   position: relative;
   padding: 0.3em 0; /* 内側余白調整 */
   border-bottom: solid 3px #eee; /* 下線１：実線・太さ・色 */
   color:#333; /* 文字色（黒）*/
}

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

2-3 破線

下線（破線）をつけた見出し

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

2-4 点線

下線（点線）をつけた見出し

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

2-5 二重線

下線（二重線）をつけた見出し

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

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

斜めストライプの下線をつけた見出し

h2 {
   position:relative;
   padding:.5em 0; /* 内側余白　上下・左右*/   
   color:#333; /* 文字色（黒）*/  
}

h2:after{
   --stripe-color:#b2aba1; /*ストライプの色 */
   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; /* 文字色（黒）*/   
}

3-2 左側に二重線

左側に二重線をつけた見出し

h2 {
   border-left: double 10px #a5c9c1; /* 左線：実線・太さ・色 */
   color:#333; /* 文字色（黒）*/  
}

3-3 左側に二色の線

左側に二色の線をつけた見出し

/*左側に２色の線*/
h2 {
   position: relative;
   border-left: 8px solid #eee;
}
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: 1rem 2rem;
   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;
   border: 3px solid var(--baloon-color);
   color:#333; /* 文字色（黒）*/  
}
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:#333; /* 文字色（黒）*/  
}
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;
   text-align:center;
   color:#333; /* 文字色（黒）*/
   padding-bottom:1rem; /*見出し下の余白調整 */
}

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

5-2 下に丸い飾り

下に丸い飾りをつけた見出し

/*中央に丸い飾り*/
h2 {
   position: relative;
   text-align:center;
   color:#333; /* 文字色（黒）*/  
   padding-bottom:1rem; /*見出し下の余白調整 */
}

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

5-3 上下に飾り線

上下に飾り線をつけた見出し

h2 {
   position: relative;
   text-align: center;
   padding: 1em;
   color:#333; /* 文字色（黒）*/  
}
h2::before,
h2::after {
   position: absolute;
   content: '';
   width: 30%; /*線の幅*/
   height: 2px; /*線の高さ*/
   background: #a5c9c1; /*線の色 */
}

h2::before {
   left: 0;
   top: 0;
}
h2::after {
   right: 0;
   bottom: 0;
}

5-4 左右に飾り線

左右に飾り線をつけた見出し

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%);
   -webkit-transform: translateY(-50%);
}
h2::before {
   left: 0;
}
h2::after {
   right: 0;
}

カッコ型デザイン

6-1 かぎ括弧

かぎ括弧の見出し

/*かぎ括弧*/
h2 {
   --border-color:#333; /*カッコの色 */
   position: relative;
   color:#333; /* 文字色（黒）*/  
}

h2::before,
h2::after {
   content: '';
   width: 20px;
   height: 30px;
   position: absolute;
}

h2::before {
   border-left: solid 2px var(--border-color);
   border-top: solid 2px var(--border-color);
   top: 0;
   left: 0;
}
h2::after {
   border-right: solid 2px var(--border-color);
   border-bottom: solid 2px var(--border-color);
   bottom: 0;
   right: 0;
}

6-2 角括弧

角括弧の見出し

/*角括弧*/
h2 {
   --border-color:#333; /*カッコの色 */
   position: relative;
   color:#333; /* 文字色（黒）*/  
}

h2::after,
h2::before {
   content: "";
   height: 100%;
   width: 0.75em;
   position: absolute;
   bottom: 0;
   border-top: 2px solid var(--border-color);
   border-bottom: 2px solid var(--border-color);
}

h2::before {
   border-left: 2px solid var(--border-color);
   left: 0;
}
h2::after {
   border-right: 2px solid var(--border-color);
   right: 0;
}

重なりを使ったデザイン

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

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

/* 背景をずらしたデザイン */
h2 {
   position: relative;
   border: 1px solid #333; /*枠線*/
   color:#333; /* 文字色（黒）*/  
}
h2:after {
   content: '';
   background: #a5c9c1;
   width: calc(100% + 1px);
   height: calc(100% + 1px);
   position: absolute;
   top: 5px;
   left: 5px;
   z-index: -1;
}

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

ずらした線でアクセントをつけた見出し

/*ずらした線でアクセントをつけたデザイン */
h2 {
   position: relative;
   box-shadow: 6px 6px #333;
   outline: 5px solid #fff;
   border: 1px solid #333;
   background: #C6DDDD; /* 背景色 */
   color:#333; /* 文字色（黒）*/  
}

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

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

/*くっきりとした影を重ねた見出し*/
h2 {
   border: 1px solid #a5c9c1;
   box-shadow: 5px 5px #a5c9c1;
   color:#333; /* 文字色（黒）*/
}

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

8-1 先頭にチェック

先頭にチェックマークをつけた見出し

/* 先頭にチェック */
h2 {
   display: flex;
   align-items: baseline;
   column-gap: 8px;
   color: #333;
   padding-left:0;
}

h2::before {
   width: 0.8em;
   height: 0.4em;
   border-bottom: 3px solid #a5c9c1;
   border-left: 3px solid #a5c9c1;
   transform: rotate(-45deg) translate(2px, -2px);
   content: '';
}

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

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

/* 先頭に丸いアクセント*/
h2 {
   background:none;
   color: #333;
   position: relative;
   padding: .3em 1em 1em 40px;
  }

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

h2::before {
   top: .6em;
   left: .2em;
   z-index: 2;
   width: 22px;
   height: 22px;
   background: #607d8b;
   opacity: .5;
}
h2::after{
   top: 1.1em;
   left: .7em;
   width: 15px;
   height: 15px;
   background: #607d8b;
   opacity: .5;
}

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

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

/* 先頭に四角のアクセント*/
h2 {
   background:none;
   color: #333;
   position: relative;
   padding: .3em 1em 1em 40px;
  }

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

h2::before {
   top: .6em;
   left: .2em;
   z-index: 2;
   width: 22px;
   height: 22px;
   background: #607d8b;
   opacity: .5;
}
h2::after{
   top: 1.1em;
   left: .8em;
   width: 15px;
   height: 15px;
   background: #607d8b;
   opacity: .5;
}
スポンサーリンク
目次に戻る

まとめ

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

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

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

一部CSSを、下記のサイトを参考にさせていただきました。こちらの紹介でお礼とさせていただきます。

CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選
h1〜h6タグの美しくおしゃれなデザインサンプルをたくさん紹介します。どれもコピペで使うことができます。
saruwakakun.com
SEOタイムズ | AI時代に選ばれる情報をつくる
SEOタイムズは、Webマーケティングに取り組むWeb担当者向けのSEO対策特化型の情報メディアです。SEOタイムズが、あなたのWebマーケティング戦略を成功に...
seotimes.jp
CSS見出しデザイン参考100選！コピペ可！どこよりも詳しく解説！
今回はCSSのみで作れる見出しデザインについて100個サンプルを作ってみました。見出しなどで使えるデザイン例についてどこよりも詳しく紹介・解説しています。すべて...
jajaaan.co.jp
コピペで使える見出しタイトルのCSSデザイン＆サンプルコード35選
見出し・タイトルで使えるデザインサンプルを35種類、どどどっとご紹介します。このデザインサンプルでは、h1タグに対してCSSを適用しています。詳しいコードの解説...
www.naaavi.com
目次に戻る

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

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