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

見出しを好きなデザインに変えたいな～

ウェブサイトの見出しデザインをカスタマイズすると、読みやすさや視認性が向上しサイト全体のデザイン性も高まります。この記事では、簡単に実装できる見出しデザインのサンプルを紹介します。

CSSを活用して、自分のサイトに合った見出しを作成しましょう。

この記事で分かること

どのテーマにもお使いいただけます

INDEX

見出しデフォルトのスタイルをリセットする方法
1. Cocoonテーマのデフォルト見出しスタイル
2. CSSでデフォルトスタイルをリセットする方法
CSSの基本的な書き方
1. CSSプロパティ解説
見出しカスタマイズの注意点
1. セレクタの変更について
2. 注意点
見出しデザインサンプル
まとめ

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

Cocoonテーマのデフォルト見出しスタイル

ワードプレスのCocoonテーマを適用すると、初期状態ではH2～H6の見出しがシンプルなデザインになります。

Cocoonの見出しデザインの特徴

背景色が設定されている
上下左右にボーダーラインが入っている
角に丸み（border-radius）がある

以下は、Cocoonのデフォルト見出しに使用されているCSSプロパティとその役割です。

プロパティ	説明
`background-color`	背景色の設定
`border-top`	上の線の設定
`border-right`	右側の線の設定
`border-bottom`	下の線の設定
`border-left`	左側の線の設定
`border-radius`	角の丸みを設定

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

デフォルトの見出しスタイルをリセットするには、以下のCSSを使用します。

/* 見出しデザインのリセット */
.article h2,
.article h3,
.article h4,
.article h5,
.article h6 {
    background-color: transparent; /* 背景色を透明に */
    border: none; /* 枠線なし */
    border-radius: 0; /* 角の丸みなし */
}

これでデフォルトの見出しスタイルが外れ完全にシンプルな状態になります。なお、新しいスタイルを適用する場合、必ずしもすべてリセットする必要はなく、不要な部分だけリセットすればOK です。

目次に戻る

CSSの基本的な書き方

見出しデザインの変更にはCSSを使用します。当記事ではコピペで使えるコードを紹介しますが、CSSの基本的な構造を理解しておくとカスタマイズがしやすくなります。

セレクタ {
    プロパティ: 値;
}

セレクタ：HTMLのどの部分にスタイルを適用するか指定
プロパティ：スタイルの種類（色、線、形など）
値：具体的な数値やカラーコードなど

CSSプロパティ解説

見出しのデザインを変更するための主要なCSSプロパティを紹介します。

プロパティ	説明
`background-color`	背景色を指定（例：`#ffcc00`）
`color`	文字色を指定（例：`#333333`）
`border`	枠線を指定（例：`2px solid #ccc`）
`font-size`	文字の大きさを指定（例：`16px`、`1em`）
`padding`	内側の余白を指定（例：`10px 20px`）
`border-radius`	角の丸みを指定（例：`5`px)

見出しデザインはサイトの雰囲気に大きく影響します。サンプルコードをそのまま使うのはもちろん、自分のサイトに合うように調整してみましょう。

参考

カラーコードを調べる際は以下のサイトが便利です。

目次に戻る

見出しカスタマイズの注意点

セレクタの変更について

セレクタ部分はすべて h2 に統一していますが、ご利用のテーマ見出しに合わせて変更してください。詳細はセレクタの調べ方をご参照ください。

Cocoonテーマの場合（例）

以下は、Cocoonテーマにおける見出しのセレクタ例です。

記事内の見出し：.article h2 ～ .article h6
サイドバーの見出し：.sidebar h3
ウィジェット見出し共通：.widget-title（サイドバー見出しも含まれます）
関連記事見出し：.related-entry-heading
コメント欄見出し：.comment-title

注意点

文字色（例 color:#fff;）をすべてに指定しています。テーマで設定された文字色をそのまま使用したい場合は color プロパティを削除してください。
内側余白（padding）は必要なものだけ設定しています。テーマのデフォルト余白から変更したい場合は適宜追加してください。
CSSの編集は子テーマのスタイルシートを使用してください。

テーマCocoonの場合

CSSの記述について

子テーマのスタイルシートを使用します。

管理画面の「外観」から「テーマファイルエディター」をクリック
- Cocoon Child: スタイルシート (style.css) のページが開きます
元から書いているコード（テーマ情報）は消さずにCSSを記述します
- /* 子テーマ用のスタイルを書く*/から下の行に追加しましょう

子テーマ（Cocoon child）が選択されていることを確認してください。

参考記事 Cocoonカスタマイズ｜HTML・CSSの編集とワードプレスをバックアップする方法

これらの設定を適用することで、テーマに合わせた柔軟な見出しデザインのカスタマイズが可能になります。

目次に戻る

見出しデザインサンプル

見出しデザインのサンプルを掲載します。

CSSコピペOKです

背景塗りつぶし

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;
}

目次に戻る