WELCOME
当ブログを紹介いただいたサイトを掲載します受付中

Cocoon見出しデザインと装飾をリセットする方法/CSSコピペOK

アイキャッチ/見出しデザイン カスタマイズ
カスタマイズ
記事内に広告が含まれています
スポンサーリンク

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

今回は記事を読むときに必ず目にする、見出しのデザインについてご紹介します。

スポンサーリンク
この記事を書いた人
  • ブログ好きな40代主婦
  • CocoonサイトをCSSでカスタマイズ
  • JavaScriptを勉強中
  • ドメインパワー35
  • ワードプレスで2サイトを運営しています
はっちゃん
です
プロフィール

Cocoon見出し/デフォルトのデザイン

Cocoonのテーマを適用させたときの最初の見出し(h2~6)はこのようなシンプルなデザインになっています。

cocoon見出し

シンプルとは言えCSSで背景色やボーダーラインのスタイルが入っています。

ここで使われているプロパティ(スタイルを指定する部分)と、意味は下記の通りです。

  • background-color →背景色
  • border-top →上の線
  • border-right →右側の線
  • border-bottom →下の線
  • border-left →左側の線
  • border-radius → 角の丸み
スポンサーリンク

Cocoon見出し/装飾をリセットするCSS

CSSでこの装飾をリセットできます。

/*見出しデザインリセット*/
.article h2,
.article h3,
.article h4,
.article h5,
.article h6 {
	background-color:initial;/*背景色リセット*/
	border:initial;/*上下左右の枠線リセット*/
	border-radius:initial;/*角の丸みリセット*/
}
補足
  • initialを指定することでCSSプロパティを初期値に戻します。
  • .article h2~6のクラス名は,(半角カンマ)で区切り複数指定できます。
  • 枠線を引くプロパティはborderと記述することで上右下左を一括で指定できます。
上・右・下・左(個別)
border-top: initial;
border-right: initial;
border-bottom: initial;
border-left: initial;
上右下左(まとめる)
border: initial;

すっきり短く書けるんだね。

見出しを変更する場合、新しいスタイルで上書きできれば必ずしもリセットする必要はありません。

見出しの下準備は完了です。

これでデフォルトの見出し装飾が外れ真っ白の状態になりますので、お好みでカスタマイズを楽しんでみてください。

スポンサーリンク

CSSの書き方

まずはCSSの書き方について。

見出しデザインの変更にはCSSを使用します。

当記事ではコピペできるようにしていますが、CSSの基本的な書き方はこのようになっています。

  1. セレクタ・・・HTMLのどの部分にスタイルを反映するか
  2. プロパティ・・・スタイルの種類
  3. 値・・・具体的な数値やカラー等を指定

カスタマイズ/見出しでよく使うCSSプロパティの例

見出しはCSSプロパティでスタイルを指定し、背景色や文字の色等を自由に変更できます。

サンプルをそのまま使うのはもちろん、自分のサイトの雰囲気や配色に合わせてお気に入りの見出しを作ってみてくださいね。

背景色を設定background-color:#ここに6桁のカラーコード;
文字色を設定color:#ここに6桁のカラーコード;
枠線を引くborder:2px(太さ) solid(種類) #カラーコード;
文字の大きさを変えるfont-size:1em;/*pxやemで指定する*/
内側余白を調整するpadding:1em .5em .5em 1em;/*pxやemで指定する(順番は上・右・下・左)*/
角の丸みを設定border-radius:30px;/*pxや%で指定する*/

カラーコードを調べるときはこちらのサイトが参考になります。

スポンサーリンク

見出しデザインサンプル

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

  • 文字色(例 color:#ffffff;)をすべてに入れていますがテーマで設定されたデフォルトの色のまま使いたいときはcolorプロパティを一行削除してもかまいません。
  • セレクタ部分はすべて.article h2(h2見出し)に統一しているので、変更したい見出しやご利用のテーマに合わせて変更してください
  • 最初に見出しデザインリセットのCSSをコピペしておくとカスタマイズしやすいかと思います。
  • CSS編集は子テーマのスタイルシートをご利用ください。

CSSコピペOKなのでご利用くださいね。

スポンサーリンク

見出しデザイン/背景塗りつぶし

1-1 背景色

背景色をつけた見出し

.article h2{
	background:#a5c9c1;/*カラーコードを入力*/
	color:#fff;/*文字色(白)*/
}

1-2 背景色+ステッチ風(白文字)

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

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

1-3 背景色+上下にライン(白文字)

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

.article h2 {
       position: relative;
	background:#a5c9c1;/*カラーコードを入力*/
	color:#fff;/*文字色(白)*/
}

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

.article h2:before {
      top: 4px;
}

h2:after {
       bottom: 4px;
}

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

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

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

1-5 背景色+影

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

.article h2{
	background:#a5c9c1;/*カラーコードを入力*/
	color:#fff;/*文字色(白)*/
	box-shadow: 5px 5px 5px gray;
}

1-6 背景ストライプ

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

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

見出しデザイン/下線

2-1 シンプルな下線

シンプルな下線をつけた見出し

.article h2{
	padding: 0.2em 0;/*内側余白調整*/
       border-bottom: solid 5px #a5c9c1;/*下線:実線・太さ・色*/
       color:#333;/*文字色(黒)*/
}

2-2 2色の下線

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

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

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

2-3 破線

下線(破線)をつけた見出し

.article h2{
 	padding: 0.2em 0;/*内側余白調整*/
       border-bottom: dashed 5px #a5c9c1; /*破線・太さ・色*/
       color:#333;/*文字色(黒)*/
}

2-4 点線

下線(点線)をつけた見出し

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

2-5 二重線

下線(二重線)をつけた見出し

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

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

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

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

.article h2:after{
	--stripe-color:#808080;/*ストライプの色*/
	position:absolute;
	content: "";
	width: 100%;
	height: 7px;
	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 左側に実線

左側に実線をつけた見出し

.article h2{
       border-left: solid 5px #a5c9c1;/*左線:実線・太さ・色*/
       color:#333;/*文字色(黒)*/    
}

3-2 左側に二重線

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

.article h2{
       border-left: double 10px #a5c9c1;/*左線:実線・太さ・色*/
       color:#333;/*文字色(黒)*/  
}

3-3 左側に二色の線

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

/*左側に2色の線*/
.article h2{
    position: relative;
    border-left: 8px solid #eee;
}
.article h2::before {
    position: absolute;
    content: '';
    left: -8px;
    bottom: 0;
    width: 8px;
    height: 50%;
    background-color: #a5c9c1;
}

見出しデザイン/吹き出し

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

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

.article h2 {
	--baloon-color:#a5c9c1;
	position: relative;
	padding: 1rem 2rem;
	background: var(--baloon-color);
	color: #fff;
}
.article 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 白抜きの吹き出し

白抜き吹き出しの見出し

.article h2{
	--baloon-color:#333;
	position: relative;
	border: 3px solid var(--baloon-color);
       color:#333;/*文字色(黒)*/  
}
.article h2:before, h2:after {
	position: absolute;
	content: '';
	left: 1em;
	width: 0;
	height: 0;
	border-width: 14px 12px 0;
	border-style: solid;
}
.article h2:before {	
	bottom: -14px;    
	border-color:var(--baloon-color) transparent transparent;
}
.article h2:after {
	bottom: -10px;
	border-color: #fff transparent transparent;
}

4-3 下線のみ吹き出し

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

.article h2{
	--baloon-color:#333;
	position: relative;
	border-bottom: 3px solid var(--baloon-color);
	padding:.3em 0;
       color:#333;/*文字色(黒)*/  
}
.article h2:before, h2:after {
	position: absolute;
	content: '';
	left: 1em;
	width: 0;
	height: 0;
	border-width: 14px 12px 0;
	border-style: solid;
}
.article h2:before {	
	bottom: -14px;    
	border-color:var(--baloon-color) transparent transparent;
}
.article h2:after {
	bottom: -10px;
	border-color: #fff transparent transparent;
}

見出しデザイン/中央揃え

5-1 下に短く実線

下に短く実線をつけた見出し

.article h2{
	position: relative;
	text-align:center;
       color:#333;/*文字色(黒)*/  
}

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

5-2 下に丸い飾り

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

/*中央に丸い飾り*/
.article h2{
	position: relative;
	text-align:center;
       color:#333;/*文字色(黒)*/  
}

.article 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 上下に飾り線

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

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

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

5-4 左右に飾り線

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

.article h2 {
	width: fit-content;
	padding: 0 3em;
	margin: 0 auto;
	text-align: center;
	position: relative;
       color:#333;/*文字色(黒)*/  
}
.article h2::before, 
.article h2::after {
	content: '';
	background: #a5c9c1;
	width: 2em;
	height: 3px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
}
.article h2::before {
	left: 0;
}
.article h2::after {
	right: 0;
}

見出しデザイン/カッコ型

6-1 かぎ括弧

かぎ括弧の見出し

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

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

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

6-2 角括弧

角括弧の見出し

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

.article h2::after,
.article 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);
}

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

見出しデザイン/重なりを使う

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

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

.article h2 {
	border: 2px solid #333;
	position: relative;
       color:#333;/*文字色(黒)*/  
}
.article h2:after {
	content: '';
	background:#C6DDDD;
	width: calc(100% + 3px);
	height: calc(100% + 3px);
	position: absolute;
	top: -7px;
	left: 4px;
	z-index: -1;
}

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

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

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

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

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

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

見出しデザイン/アイコンをつける

8-1 先頭にチェック

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

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

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

まとめ

イメージ画像

個人的にシンプルイズベストなので、奇抜すぎないデザインを厳選して紹介しました。

記事を読むときに必ず目に入る部分なのでお好みの見出しデザインにしてみてはいかがでしょうか。

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

参考サイト

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

COMMENT

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