ブログの見出しデザインを制覇せよ！CSS貼り付けだけの簡単素材で記事を彩る

2021.04.13

ブログデザインの中でも大きな要素を占めるものの1つが「見出し」。

トップページや個々の記事、またサイドバーなど、ブログのいたるところで使われるものですね。

見出しはテーマごとにいろいろとデザインがされていて、テーマの特徴がとてもよく出るものですが、そうであるからこそ逆に人気のテーマでは「あ、これはあのテーマ使ってるな」と見出しのデザインからすぐ分かり、他のブログと見栄えが代わり映えしなくなることからデザインの差別化も必要となって来ます。

ここではそんな重要な位置づけである見出し用のデザインで、特徴があり過ぎず、すぐにブログに馴染んで使用できるものを紹介と、CSSの簡単貼り付け（コピペ）で利用する使い方の解説です。

ブログの見出しは勿論、タイトルやその他のタグなどに適用して、是非個性あるブログ運営に生かしてくださいね。

Contents

初期設定用CSS

見出しサンプル - 塗りつぶし01
見出しサンプル - 塗りつぶし02
見出しサンプル - 塗りつぶし03
見出しサンプル - 塗りつぶし04
見出しサンプル - 塗りつぶし05
見出しサンプル - 塗りつぶし06
見出しサンプル - ワク01
見出しサンプル - ワク02
見出しサンプル - ワク03
見出しサンプル - ワク041
見出しサンプル - ワク042
見出しサンプル - ワク05
見出しサンプル - ワク06
見出しサンプル - ワク07
見出しサンプル - ワク08
見出しサンプル - ワク09
見出しサンプル - ワク10
見出しサンプル - グラデ01
見出しサンプル - グラで02
見出しサンプル - グラで03
見出しサンプル - グラで04
見出しサンプル - 特徴的01
見出しサンプル - 特徴的02
見出しサンプル - 特徴的03
見出しサンプル - 特徴的04
見出しサンプル - 特徴的051
見出しサンプル - 特徴的052
見出しサンプル - 特徴的06
見出しサンプル - 特徴的071
見出しサンプル - 特徴的072
見出しサンプル - 特徴的073
見出しサンプル - 特徴的081
見出しサンプル - 特徴的082
見出しサンプル - 特徴的083
見出しサンプル - 特徴的09
見出しサンプル - 特徴的101
見出しサンプル - 特徴的102
見出しサンプル - 特徴的111
見出しサンプル - 特徴的112
見出しサンプル - 特徴的121
見出しサンプル - 特徴的122

簡単動画解説

動画で簡単にポイントを解説をしていますので御覧ください。

詳しくは以下を御覧ください。

CSSの利用の仕方

では早速見ていきましょう。

ここではWordpressの記事作成で通常使われる「見出し２」（h2タグの見出し）に対するCSSを紹介しています。

どれもそのままコピーしてブログのCSSに追加すればすぐ使えるようになっていますので、是非いろいろと試してみてくださいね！

１．基本の利用法
- コレが使いたい！というデザインのCSSをブログのCSSに貼り付けてください。
- 貼り付けても変な表示になる等あれば、下方にある初期設定用のCSSも貼り付けてください。
２．記事本文だけへの適用
- ブログのテーマごとに、記事本文の見出し２（h2タグ）への指定が変わります。
- 詳しくは下方の関連記事で解説しますが、有名どころのテーマで言えば、以下のようにしてみてください。
  （全てのh2 を以下の "" 内に置き換える）
  - 賢威"#main-contents .contents h2"
  - Simplicity"div.article h2"
  - Stinger5"div.post h2"
  - Twenty Fifteen"div.entry-content h2"
- 関連記事　ブログのデザインカスタマイズの決め手！CSSの適用範囲を確認する技
３．見出し２以外の見出しへの利用
- 見出し２以外の見出しに利用したい場合、例えば「見出し３」では h2 を h3 に、「見出し４」では h2 を h4 に全て変更します。
４．記事タイトルへの利用
- 記事のタイトルは基本 h1 タグが使われます。h2 を全て h1 に置き換えます。
５．見出し以外への利用
- 見出し以外に追加たい場合には、h2 を適用したいHMTLタグに置き換えます。
６．ブログのCSSへの反映
- ブログのCSSへの貼り付けの仕方がわからない場合は、以下の記事を参照してみてください。
- WordPressのCSSカスタマイズ！読み込み用プラグインとCSS反映の具体例！
  ※）開発ツールの実践例も書いてありますが、前半にあるプラグインの導入だけでOKです
７．色変更などのデザインカスタマイズ
- 文字の大きさや、文字の色、背景色などを変えたい場合には、コメントが振ってありますので該当箇所の値を変更してみてください。
- Google Chrome の開発ツールを使うと、リアルタイムで確認できるのでとっても便利です。
  Google Chromeの開発者ツールでCSSを思いのままに操る！
  ※）このページではプロテクトがかかっていて開発ツールは使えません。以下のテストサイトでお試しください。
  http://tabibitocafe.com/theme-keni-heading-design/sample001/
- 色の数値については、以下のサイトなどを参考にしてみてください。
  WEB色見本原色大辞典 – HTMLカラーコード

初期設定用CSS

WordPressのテーマでは既に見出し２（h2）がいろいろとデザインされている（CSSが設定されているため）ことから、なにか表示が変だ、という場合には、以下の初期設定をCSSの最初に貼り付けてみてください。

CSSの初期設定

/* ----------------------------------------------------
h2 initialize
----------------------------------------------------*/
h2:before {
    border-top: 0px solid transparent;
}
h2:after {
    border-top: 0px solid transparent;
}
h2 {
    position: initial;
    background: initial;
    color: initial;
    font-size: initial;
    line-height: initial;

    margin: initial;
    padding: initial;
    box-sizing: border-box;

    border:initial;	
    border-radius: initial;
    box-shadow: initial;
    text-shadow: initial;
}

またモバイルでの文字の大きさを調整したい（少し小さく表示したい）という場合には、以下のコードをCSSの一番最後に貼り付けてみてください。

CSS - モバイル用

/* media Queries モバイル用 */
@media only screen and (max-width: 480px) {
	h2 {
		font-size: 1.5em;
	}
}

前置き長すぎ！それでは順番に見てみましょう！

標準タイプ（塗りつぶし）

標準的に使える見出しデザインです。

塗りつぶし基本

見出しサンプル – 塗りつぶし01

h2{
    border-width: 1px;			/* 枠の太さ */
    border-style: solid;		/* 線の種類 */
    border-color: gray;			/* 枠の色 */
    font-size: 2em;				/* 文字の大きさ */
    color: white;				/* 文字の色 */
    background-color: gray;		/* 背景の色 */
    padding: .25em .25em .25em .5em;	/* 内側余白 上、右、下、左 */
    margin: 1em 0;				/* 外側の余白　上下　左右 */
}

角丸

見出しサンプル – 塗りつぶし02

h2{
    border-width: 1px;			/* 枠の太さ */
    border-style: solid;		/* 線の種類 */
    border-color: gray;			/* 枠の色 */
    font-size: 2em;				/* 文字の大きさ */
    color: white;				/* 文字の色 */
    background-color: gray;		/* 背景の色 */
    padding: .25em .25em .25em .5em;	/* 内側余白 上、右、下、左 */
    margin: 1em 0;				/* 外側の余白　上下　左右 */

    border-radius: 10px;		/* 角の丸み */
}

影付き（ボックス）

見出しサンプル – 塗りつぶし03

h2{
    border-width: 1px;			/* 枠の太さ */
    border-style: solid;		/* 線の種類 */
    border-color: gray;			/* 枠の色 */
    font-size: 2em;				/* 文字の大きさ */
    color: white;				/* 文字の色 */
    background-color: gray;		/* 背景の色 */
    padding: .25em .25em .25em .5em;	/* 内側余白 上、右、下、左 */
    margin: 1em 0;				/* 外側の余白　上下　左右 */

    box-shadow: 2px 2px 12px gray;
	/* 影 水平方向 垂直方向 影の幅 色 */
    width: 98%;
}

影付き（ボックス – 内側）

見出しサンプル – 塗りつぶし04

h2{
    border-width: 1px;			/* 枠の太さ */
    border-style: solid;		/* 線の種類 */
    border-color: gray;			/* 枠の色 */
    font-size: 2em;				/* 文字の大きさ */
    color: white;				/* 文字の色 */
    background-color: gray;		/* 背景の色 */
    padding: .25em .25em .25em .5em;	/* 内側余白 上、右、下、左 */
    margin: 1em 0;				/* 外側の余白　上下　左右 */

    box-shadow: 4px 4px 10px #636363 inset;
	/* 影 水平方向 垂直方向 影の幅 色 内向き指定 */
}

影付き（テキスト）

見出しサンプル – 塗りつぶし05

h2{
    border-width: 1px;			/* 枠の太さ */
    border-style: solid;		/* 線の種類 */
    border-color: gray;			/* 枠の色 */
    font-size: 2em;				/* 文字の大きさ */
    color: white;				/* 文字の色 */
    background-color: gray;		/* 背景の色 */
    padding: .25em .25em .25em .5em;	/* 内側余白 上、右、下、左 */
    margin: 1em 0;				/* 外側の余白　上下　左右 */

    text-shadow: 2px 2px 2px #5D5252;
	/* 影：水平方向 垂直方向 影の幅 色 */
}

影付き（ボックス – 内側 + テキスト）

見出しサンプル – 塗りつぶし06

h2{
    border-width: 1px;			/* 枠の太さ */
    border-style: solid;		/* 線の種類 */
    border-color: gray;			/* 枠の色 */
    font-size: 2em;				/* 文字の大きさ */
    color: white;				/* 文字の色 */
    background-color: gray;		/* 背景の色 */
    padding: .25em .25em .25em .5em;	/* 内側余白 上、右、下、左 */
    margin: 1em 0;				/* 外側の余白　上下　左右 */

    text-shadow: 2px 2px 2px #5D5252;
	/* 影：水平方向 垂直方向 影の幅 色 */
    box-shadow: 4px 4px 10px #636363 inset;
	/* 影：水平方向 垂直方向 影の幅 色 */
}

標準タイプ（ワク）

標準的に使えるワクで囲ったタイプの見出しデザインです。

枠デザイン基本

見出しサンプル – ワク01

h2 {
    border-width: 3px;		/* 枠の太さ */
    border-style: solid;	/* 線の種類 */
    border-color: gray;		/* 線の色 */
    font-size: 2em;			/* 文字の大きさ */
    color: gray;			/* 文字の色 */
    background-color: white; /* 背景色 */
    padding: .25em .25em .25em .5em;
	/* 内側余白：上、右、下、左 */
    margin: 1em 0; /* 外側の余白　上下　左右 */
}

角丸

見出しサンプル – ワク02

h2 {
    border-width: 3px;		/* 枠の太さ */
    border-style: solid;	/* 線の種類 */
    border-color: gray;		/* 線の色 */
    font-size: 2em;			/* 文字の大きさ */
    color: gray;			/* 文字の色 */
    background-color: white; /* 背景色 */
    padding: .25em .25em .25em .5em;
	/* 内側余白：上、右、下、左 */
    margin: 1em 0; /* 外側の余白　上下　左右 */

    border-radius: 10px;　/* 角の丸み */
}

影付き（ボックス）

見出しサンプル – ワク03

h2 {
    border-style: solid;	/* 線の種類 */
    font-size: 2em;			/* 文字の大きさ */
    color: gray;			/* 文字の色 */
    background-color: white; /* 背景色 */
    padding: .25em .25em .25em .5em;
	/* 内側余白：上、右、下、左 */
    margin: 1em 0; /* 外側の余白　上下　左右 */

    box-shadow: 5px 5px 10px #929292;
	/* 影：水平方向 垂直方向 影の幅 色 */
    width: 98%;

    border-top-color: #E1E1E1;		/* 枠の色（上） */
    border-right-color: #A7A7A7;	/* 枠の色（右） */
    border-bottom-color: #B2B2B2;	/* 枠の色（下） */
    border-left-color: #E9E9E9;		/* 枠の色（左） */
    border-width: 1px;	/* 枠の太さ */
}

影付き（ボックス – 内側１）

見出しサンプル – ワク041

h2 {
    border-style: solid;	/* 線の種類 */
    font-size: 2em;			/* 文字の大きさ */
    color: gray;			/* 文字の色 */
    background-color: white; /* 背景色 */
    margin: 1em 0; /* 外側の余白　上下　左右 */

    box-shadow: 4px 4px 10px #787878 inset;
	/* 影：水平方向 垂直方向 影の幅 色 */

    border-top-color: #E1E1E1;		/* 枠の色（上） */
    border-left-color: #E1E1E1;		/* 枠の色（右） */
    border-right-color: #D7D7D7;	/* 枠の色（下） */
    border-bottom-color: #C4C4C4;	/* 枠の色（左） */
    border-width: 1px;	/* 枠の太さ */
	
    padding: .4em .5em .2em .75em;	/* 内側余白：上 右 下 左 */
}

影付き（ボックス – 内側２）

見出しサンプル – ワク042

h2 {
    border-style: solid;	/* 線の種類 */
    font-size: 2em;			/* 文字の大きさ */
    color: gray;			/* 文字の色 */
    background-color: white; /* 背景色 */
    padding: .25em;	/* 内側余白 */
    margin: 1em 0; /* 外側の余白　上下　左右 */

    border-width: 0 0 1px 0;	/* 枠の太さ：上　右　下　左 */
    border-color: #C7C7C7;		/* 枠の色 */
	
    text-align: center;		/* 文字の配置（中央寄せ） */
	
    box-shadow: 0px 10px 15px gray inset;
	/* 影：水平方向 垂直方向 影の幅 色 */
    padding-top: .5em;	/* 余白（上）*/
}

影付き（テキスト）

見出しサンプル – ワク05

h2 {
    border-width: 3px;		/* 枠の太さ */
    border-style: solid;	/* 線の種類 */
    border-color: gray;		/* 線の色 */
    font-size: 2em;			/* 文字の大きさ */
    color: gray;			/* 文字の色 */
    background-color: white; /* 背景色 */
    padding: .25em .25em .25em .5em;
	/* 内側余白：上、右、下、左 */
    margin: 1em 0; /* 外側の余白　上下　左右 */

    text-shadow: 4px 2px 3px #CFCFCF;
	/* 影：水平方向 垂直方向 影の幅 色 */
}

影付き（ボックス – 内側 + テキスト）

見出しサンプル – ワク06

h2 {
    border-style: solid;	/* 線の種類 */
    font-size: 2em;			/* 文字の大きさ */
    color: gray;			/* 文字の色 */
    background-color: white; /* 背景色 */
    margin: 1em 0; /* 外側の余白　上下　左右 */

    box-shadow: 4px 4px 10px #787878 inset;
	/* 影：水平方向 垂直方向 影の幅 色 内向き指定 */
	
    border-top-color: #E1E1E1;		/* 枠の色（上） */
    border-left-color: #E1E1E1;		/* 枠の色（右） */
    border-right-color: #D7D7D7;	/* 枠の色（下） */
    border-bottom-color: #C4C4C4;	/* 枠の色（左） */
    border-width: 1px;				/* 枠の太さ */
    padding: .4em .5em .2em .75em;	/* 内側余白：上 右 下 左 */

    text-shadow: 4px 2px 3px #CFCFCF;
	/* 文字の影：水平方向 垂直方向 影の幅 色 内向き指定 */
}

左＋下

見出しサンプル – ワク07

h2 {
    border-style: solid;	/* 線の種類 */
    font-size: 2em;			/* 文字の大きさ */
    color: gray;			/* 文字の色 */
    background-color: white; /* 背景色 */
    padding: .25em .25em .25em .5em;
	/* 内側余白：上、右、下、左 */
    margin: 1em 0; /* 外側の余白　上下　左右 */

    border-width: 0 0 2px .75em;	/* 枠の太さ：上　右　下　左 */
    border-color: gray;				/* 枠の色 */
}

左＋下（背景色あり）

見出しサンプル – ワク08

h2 {
    border-style: solid;	/* 線の種類 */
    font-size: 2em;			/* 文字の大きさ */
    padding: .25em .25em .25em .5em;
	/* 内側余白：上、右、下、左 */
    margin: 1em 0; /* 外側の余白　上下　左右 */

    border-width: 0 0 2px .75em;	/* 枠の太さ：上　右　下　左 */
    border-color: #474747;			/* 枠の色 */
    background-color: #898989;		/* 背景色 */
    color: white;					/* 文字色 */
}

左＋右

見出しサンプル – ワク09

h2 {
    border-style: solid;	/* 線の種類 */
    font-size: 2em;			/* 文字の大きさ */
    color: gray;			/* 文字の色 */
    background-color: white; /* 背景色 */
    padding: .25em; /* 内側余白 */
    margin: 1em 0; /* 外側の余白　上下　左右 */

    border-width: 1px .75em 1px .75em;	/* 枠の太さ：上　右　下　左 */
    border-color: gray;				/* 枠の色 */
    border-top-color: #CACACA;		/* 枠の色（上） */
    border-bottom-color: #F3F3F3;	/* 枠の色（下） */
	
    text-align: center;				/* 文字の配置（中央寄せ） */
    box-shadow: 2px 2px 12px gray;
	/* 影：水平方向 垂直方向 影の幅 色 内向き指定 */
}

上＋下（シンプル）

見出しサンプル – ワク10

h2 {
    border-style: solid;	/* 線の種類 */
    border-color: gray;		/* 線の色 */
    font-size: 2em;			/* 文字の大きさ */
    color: gray;			/* 文字の色 */
    background-color: white; /* 背景色 */
    padding: .25em;	/* 内側余白：上、右、下、左 */
    margin: 1em 0; /* 外側の余白　上下　左右 */

    border-width: 8px 0 3px 0;		/* 枠の太さ：上　右　下　左 */
    border-top-color: #B3B3B3;		/* 枠の色（上） */
    border-bottom-color: #D9D9D9;	/* 枠の色（下） */

    text-align: center;				/* 文字の配置（中央寄せ） */
}

グラデーション

グラデーションは設定が結構あります。
CSSの多さにびっくりしないでくださいね（笑）
（少し古いブラウザなど考慮しなければそんなでもないんですけど）

ネット上で簡単にシミュレーションできるサービス（以下のURL）がありますので、そちらでグラデーションのかかり具合や色の組み合わせを試してCSSのコードを取得してみてください。

Ultimate CSS Gradient Generator
- 色々と触ればグラデーションの作り方がわかると思いますが、最後のコードの取得が分かりづらいかも知れません。
- CSSコードの上にマウスを持って行くと、右下に小さく「copy」とでるので、そこをクリック！するとコピーできます。

取得したコードは、以下の箇所に貼り付けてください。

h2{
    border-width: 0;		/* 枠の太さ */
    border-radius: 5px;		/* 角の丸み */

    font-size: 2em;			/* 文字の大きさ */
    color: white;			/* 文字の色 */

    background-color: gray; /* 背景色 */
    padding: .25em .25em .25em .5em;
	/* 内側余白：上、右、下、左 */
    margin: 1em 0; /* 外側の余白　上下　左右 */

    取得したコードはここに貼る！
}

以下はそのジェネレーターで作成した例です。こんな感じのが簡単にできるんですね。嬉しすぎ ^◇^)

取得したコードの位置も見てみてください。

ふっくらグラデーション

見出しサンプル – グラデ01

CSSコード - グラデ01

h2{
    border-width: 0;		/* 枠の太さ */
    border-radius: 5px;		/* 角の丸み */

    font-size: 2em;			/* 文字の大きさ */
    color: white;			/* 文字の色 */

    background-color: gray; /* 背景色 */
    padding: .25em .25em .25em .5em;
	/* 内側余白：上、右、下、左 */
    margin: 1em 0; /* 外側の余白　上下　左右 */

/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b5bdc8+0,828c95+36,28343b+100 */
background: rgb(181,189,200); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(181,189,200,1) 0%, rgba(130,140,149,1) 36%, rgba(40,52,59,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(181,189,200,1)), color-stop(36%,rgba(130,140,149,1)), color-stop(100%,rgba(40,52,59,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(40,52,59,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(40,52,59,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(40,52,59,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(40,52,59,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=0 ); /* IE6-9 */
}

左右グラデーション１

見出しサンプル – グラで02

CSSコード - グラデ02

h2{
    border-width: 0;		/* 枠の太さ */
    border-radius: 5px;		/* 角の丸み */

    font-size: 2em;			/* 文字の大きさ */
    color: white;			/* 文字の色 */

    background-color: gray; /* 背景色 */
    padding: .25em .25em .25em .5em;
	/* 内側余白：上、右、下、左 */
    margin: 1em 0; /* 外側の余白　上下　左右 */

/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#3c2c28+1,958883+57,c9bdb5+100 */
background: rgb(60,44,40); /* Old browsers */
background: -moz-linear-gradient(left,  rgba(60,44,40,1) 1%, rgba(149,136,131,1) 57%, rgba(201,189,181,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(1%,rgba(60,44,40,1)), color-stop(57%,rgba(149,136,131,1)), color-stop(100%,rgba(201,189,181,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  rgba(60,44,40,1) 1%,rgba(149,136,131,1) 57%,rgba(201,189,181,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  rgba(60,44,40,1) 1%,rgba(149,136,131,1) 57%,rgba(201,189,181,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  rgba(60,44,40,1) 1%,rgba(149,136,131,1) 57%,rgba(201,189,181,1) 100%); /* IE10+ */
background: linear-gradient(to right,  rgba(60,44,40,1) 1%,rgba(149,136,131,1) 57%,rgba(201,189,181,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3c2c28', endColorstr='#c9bdb5',GradientType=1 ); /* IE6-9 */
}

左右グラデーション２

見出しサンプル – グラで03

CSSコード - グラデ03

h2{
    border-width: 0;		/* 枠の太さ */
    border-radius: 5px;		/* 角の丸み */

    font-size: 2em;			/* 文字の大きさ */
    color: white;			/* 文字の色 */

    background-color: gray; /* 背景色 */
    padding: .25em .25em .25em .5em;
	/* 内側余白：上、右、下、左 */
    margin: 1em 0; /* 外側の余白　上下　左右 */

color: gray;

/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#feffe8+0,d6dbbf+100;Wax+3D+%231 */
background: rgb(254,255,232); /* Old browsers */
background: -moz-linear-gradient(-45deg,  rgba(254,255,232,1) 0%, rgba(214,219,191,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(254,255,232,1)), color-stop(100%,rgba(214,219,191,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg,  rgba(254,255,232,1) 0%,rgba(214,219,191,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg,  rgba(254,255,232,1) 0%,rgba(214,219,191,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg,  rgba(254,255,232,1) 0%,rgba(214,219,191,1) 100%); /* IE10+ */
background: linear-gradient(135deg,  rgba(254,255,232,1) 0%,rgba(214,219,191,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffe8', endColorstr='#d6dbbf',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

２色ふっくらグラデーション

見出しサンプル – グラで04

CSSコード - グラデ04

h2{
    border-width: 0;		/* 枠の太さ */
    border-radius: 5px;		/* 角の丸み */

    font-size: 2em;			/* 文字の大きさ */
    color: white;			/* 文字の色 */

    background-color: gray; /* 背景色 */
    padding: .25em .25em .25em .5em;
	/* 内側余白：上、右、下、左 */
    margin: 1em 0; /* 外側の余白　上下　左右 */

/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4f1201+0,934445+47,4f1201+100 */
background: rgb(79,18,1); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(79,18,1,1) 0%, rgba(147,68,69,1) 47%, rgba(79,18,1,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(79,18,1,1)), color-stop(47%,rgba(147,68,69,1)), color-stop(100%,rgba(79,18,1,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(79,18,1,1) 0%,rgba(147,68,69,1) 47%,rgba(79,18,1,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(79,18,1,1) 0%,rgba(147,68,69,1) 47%,rgba(79,18,1,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(79,18,1,1) 0%,rgba(147,68,69,1) 47%,rgba(79,18,1,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(79,18,1,1) 0%,rgba(147,68,69,1) 47%,rgba(79,18,1,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f1201', endColorstr='#4f1201',GradientType=0 ); /* IE6-9 */
}

特徴的な形 – 下三角

吹き出し調の枠です。人気のテーマ「Stinger5」に取り入れられてますね。

下三角

見出しサンプル – 特徴的01

h2{
    border-width: 1px;			/* 枠の太さ */
    border-style: solid;		/* 線の種類 */
    border-color: gray;			/* 枠の色 */
    font-size: 2em;				/* 文字の大きさ */
    color: white;				/* 文字の色 */
    background-color: gray;		/* 背景の色 */
    padding: .25em .25em .25em .5em;/* 内側余白 上、右、下、左 */
    margin: 1em 0; /* 外側の余白：上下　左右 */
}

h2 {
    position: relative;
}
h2:before {
    content: '';
    position: absolute;
    border-top: 10px solid #f3f3f3;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    bottom: -10px;
    left: 50px;
}
h2:after {
    content: '';
    position: absolute;
     border-top: 10px solid gray;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    bottom: -10px;
    left: 50px;
}

下三角 – 白背景

見出しサンプル – 特徴的02

h2{
    border-width: 1px;			/* 枠の太さ */
    border-style: solid;		/* 線の種類 */
    border-color: gray;			/* 枠の色 */
    font-size: 2em;				/* 文字の大きさ */
    color: white;				/* 文字の色 */
    background-color: gray;		/* 背景の色 */
    padding: .25em .25em .25em .5em;/* 内側余白 上、右、下、左 */
    margin: 1em 0; /* 外側の余白：上下　左右 */
}

h2{
    position: relative;
    background-color: white;	/* 背景色 */
    color: gray;				/* 文字色 */
    border-radius: 5px;			/* 角の丸み */
    border-width: 2px;			/* 枠の太さ */
}
h2:before {
    content: '';
    position: absolute;
    border-top: 15px solid #f3f3f3;
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
    bottom: -15px;
    left: 50px;
}
h2:after {
    content: '';
    position: absolute;
    border-top: 15px solid gray;	/* 枠（上）：太さ 線種 色 */
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
    bottom: -15px;
    left: 50px;
}

下三角 – 輪郭のみ

見出しサンプル – 特徴的03

h2{
    border-width: 1px;			/* 枠の太さ */
    border-style: solid;		/* 線の種類 */
    border-color: gray;			/* 枠の色 */
    font-size: 2em;				/* 文字の大きさ */
    color: white;				/* 文字の色 */
    background-color: gray;		/* 背景の色 */
    padding: .25em .25em .25em .5em;/* 内側余白 上、右、下、左 */
    margin: 1em 0; /* 外側の余白：上下　左右 */
}

h2{
    position: relative;
    background-color: white;	/* 背景色 */
    color: gray;				/* 文字色 */
    border-radius: 5px;			/* 角の丸み */
    border-width: 2px;			/* 枠の太さ */
}
h2:before {
    content: '';
    position: absolute;
    border-top: 15px solid gray;
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
    bottom: -15px;
    left: 50px;
}
h2:after {
    content: '';
    position: absolute;
    border-top: 14px solid white;	/* 枠（上）：太さ 線種 色 */
    border-right: 14px solid transparent;
    border-left: 14px solid transparent;
    bottom: -12px;
    left: 51px;
}

下三角 – 上下のみ

見出しサンプル – 特徴的04

h2{
    border-width: 1px;			/* 枠の太さ */
    border-style: solid;		/* 線の種類 */
    border-color: gray;			/* 枠の色 */
    font-size: 2em;				/* 文字の大きさ */
    color: white;				/* 文字の色 */
    background-color: gray;		/* 背景の色 */
    padding: .25em .25em .25em .5em;/* 内側余白 上、右、下、左 */
    margin: 1em 0; /* 外側の余白：上下　左右 */
}

h2 {
    position: relative;
    background-color: white;	/* 背景色 */
    color: gray;				/* 文字色 */
    border-radius: 0;			/* 角の丸み */
    border-width: 4px 0 2px;	/* 枠の太さ： 上　左右　下 */
}
h2:before {
    content: '';
    position: absolute;
    border-top: 15px solid gray;
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
    bottom: -15px;
    left: 50px;
}
h2:after {
    content: '';
    position: absolute;
    border-top: 14px solid white;	/* 枠（上）：太さ 線種 色 */
    border-right: 14px solid transparent;
    border-left: 14px solid transparent;
    bottom: -12px;
    left: 51px;
}

特徴的な形 – 前後に丸

先頭に丸

見出しサンプル – 特徴的051

h2{
    border-width: 1px;			/* 枠の太さ */
    border-style: solid;		/* 線の種類 */
    border-color: gray;			/* 枠の色 */
    font-size: 2em;				/* 文字の大きさ */
    color: white;				/* 文字の色 */
    background-color: gray;		/* 背景の色 */
    padding: .25em .25em .25em .5em;/* 内側余白 上、右、下、左 */
    margin: 1em 0; /* 外側の余白：上下　左右 */
}

h2 {
    position: relative;
    padding-left: 2em;
    border-radius: 1em 0 0 1em; /* 角の丸み */
}
h2:before {
    content: "";
    position: absolute;
    background: white;		/* 丸の背景色 */
    top: 50%;
    left: .5em;
    margin-top: -.5em;
    height: 1em;
    width: 1em;
    border-radius: 50%;
    box-shadow: 1px 1px 2px gray inset;
    border-width: 1px;
}

先頭に丸

見出しサンプル – 特徴的052

h2 {
    border-width: 2px;			/* 枠の太さ */
    border-style: solid;		/* 線の種類 */
    border-color: gray;			/* 枠の色 */
    font-size: 2em;				/* 文字の大きさ */

    padding: .25em .25em .25em .5em;/* 内側余白 上、右、下、左 */
    margin: 1em 0; /* 外側の余白：上下　左右 */
}

h2 {
    position: relative;
    padding-left: 2em;
    border-radius: 1em 0 0 1em;
    color: gray;				/* 文字色 */
    background-color: white;	/* 背景色 */
}
h2:before {
    content: "";
    position: absolute;
    background: #B8B8B8;		/* 丸の背景色 */
    top: 50%;
    left: .5em;
    margin-top: -.5em;
    height: 1em;
    width: 1em;
    border-radius: 50%;
    box-shadow: 1px 1px 2px #4E4E4E inset;
    border-width: 1px;
}

左右に丸

見出しサンプル – 特徴的06

h2{
    border-width: 1px;			/* 枠の太さ */
    border-style: solid;		/* 線の種類 */
    border-color: gray;			/* 枠の色 */
    font-size: 2em;				/* 文字の大きさ */

    padding: .25em .25em .25em .5em;/* 内側余白 上、右、下、左 */
    margin: 1em 0; /* 外側の余白：上下　左右 */
}

h2 {
    position: relative;
    padding-left: 2em;
    padding-right: 2em;
    border-radius: 1em;
    color: gray;				/* 文字色 */
    background-color: white;	/* 背景色 */
    border-width: 2px;
    text-align: center;
}
h2:before {
    content: "";
    position: absolute;
    background: #B8B8B8;		/* 左の丸の背景色 */
    top: 50%;
    left: .5em;
    margin-top: -.5em;
    height: 1em;
    width: 1em;
    border-radius: 50%;
    box-shadow: 1px 1px 2px gray inset;
    border-width: 1px;
}
h2:after {
    content: "";
    position: absolute;
    background: #B8B8B8;		/* 右の丸の背景色 */
    top: 50%;
    left:initial;
    right: .5em;
    margin-top: -.5em;
    height: 1em;
    width: 1em;
    border-radius: 50%;
    box-shadow: 1px 1px 2px gray inset;
    border-width: 1px;
}

特徴的な形 – 前後に三角

先頭に三角

見出しサンプル – 特徴的071

h2{
    border-width: 1px;			/* 枠の太さ */
    border-style: solid;		/* 線の種類 */
    border-color: gray;			/* 枠の色 */
    font-size: 2em;				/* 文字の大きさ */
    color: gray;				/* 文字の色 */
    background-color: white;		/* 背景の色 */
    padding: .25em .25em .25em .5em;/* 内側余白 上、右、下、左 */
    margin: 1em 0; /* 外側の余白：上下　左右 */
}

h2 {
    position: relative;
    padding-left: 2em;
    border-width: 2px;
}
h2:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    border: 1em solid transparent;
    border-left: 1em solid gray;	/* 三角：太さ 線種 色 */
    border-left-width: 1.5em;
}

最後に三角

見出しサンプル – 特徴的072

h2{
    border-width: 1px;			/* 枠の太さ */
    border-style: solid;		/* 線の種類 */
    border-color: gray;			/* 枠の色 */
    font-size: 2em;				/* 文字の大きさ */
    color: gray;				/* 文字の色 */
    background-color: white;		/* 背景の色 */
    padding: .25em .25em .25em .5em;/* 内側余白 上、右、下、左 */
    margin: 1em 0; /* 外側の余白：上下　左右 */
}

h2 {
    position: relative;

    padding-right: 2em;
    border-width: 2px;

}
h2:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: initial;
    right: 0;
    border: 1em solid transparent;
    border-right: 1em solid gray;	/* 三角：太さ 線種 色 */
    border-right-width: 1.5em;
}

左右にに三角

見出しサンプル – 特徴的073

h2{
    border-width: 1px;			/* 枠の太さ */
    border-style: solid;		/* 線の種類 */
    border-color: gray;			/* 枠の色 */
    font-size: 2em;				/* 文字の大きさ */
    color: gray;				/* 文字の色 */
    background-color: white;		/* 背景の色 */
    padding: .25em .25em .25em .5em;/* 内側余白 上、右、下、左 */
    margin: 1em 0; /* 外側の余白：上下　左右 */
}

h2 {
    position: relative;

    padding-left: 2em;
    padding-right: 2em;
    border-width: 2px;
    text-align: center;
}
h2:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    border: 1em solid transparent;
    border-left: 1em solid gray;	/* 三角（左）：太さ 線種 色 */
    border-left-width: 1.5em;
}
h2:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: initial;
    right: 0;
    border: 1em solid transparent;
    border-right: 1.5em solid gray;	/* 三角（右）：太さ 線種 色 */
}

先頭に三角（反転）

見出しサンプル – 特徴的081

h2{
    border-width: 1px;			/* 枠の太さ */
    border-style: solid;		/* 線の種類 */
    border-color: gray;			/* 枠の色 */
    font-size: 2em;				/* 文字の大きさ */
    color: white;				/* 文字の色 */
    background-color: gray;		/* 背景の色 */
    padding: .25em .25em .25em .5em;/* 内側余白 上、右、下、左 */
    margin: 1em 0; /* 外側の余白：上下　左右 */
}

h2 {
    position: relative;

    padding-left: 2em;
    border-width: 2px;
}
h2:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    border: 1em solid transparent;
    border-left: 1.5em solid white;	/* 三角：太さ 線種 色 */
}

最後に三角（反転）

見出しサンプル – 特徴的082

h2{
    border-width: 1px;			/* 枠の太さ */
    border-style: solid;		/* 線の種類 */
    border-color: gray;			/* 枠の色 */
    font-size: 2em;				/* 文字の大きさ */
    color: white;				/* 文字の色 */
    background-color: gray;		/* 背景の色 */
    padding: .25em .25em .25em .5em;/* 内側余白 上、右、下、左 */
    margin: 1em 0; /* 外側の余白：上下　左右 */
}

h2 {
    position: relative;

    padding-right: 2em;
    border-width: 2px;
}
h2:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: initial;
    right: 0;
    border: 1em solid transparent;
    border-right: 1.5em solid white;	/* 三角：太さ 線種 色 */
}

左右にに三角（反転）

見出しサンプル – 特徴的083

h2{
    border-width: 1px;			/* 枠の太さ */
    border-style: solid;		/* 線の種類 */
    border-color: gray;			/* 枠の色 */
    font-size: 2em;				/* 文字の大きさ */
    color: white;				/* 文字の色 */
    background-color: gray;		/* 背景の色 */
    padding: .25em .25em .25em .5em;/* 内側余白 上、右、下、左 */
    margin: 1em 0; /* 外側の余白：上下　左右 */
}

h2 {
    position: relative;

    padding-left: 2em;
    padding-right: 2em;
    border-width: 2px;
    text-align: center;
}
h2:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    border: 1em solid transparent;
    border-left: 1.5em solid white;	/* 三角（左）：太さ 線種 色 */
}
h2:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: initial;
    right: 0;
    border: 1em solid transparent;
    border-right: 1.5em solid white;	/* 三角（右）：太さ 線種 色 */
}

右に三角リボン

見出しサンプル – 特徴的09

h2{
    border-width: 1px;			/* 枠の太さ */
    border-style: solid;		/* 線の種類 */
    border-color: gray;			/* 枠の色 */
    font-size: 2em;				/* 文字の大きさ */
    color: white;				/* 文字の色 */
    background-color: gray;		/* 背景の色 */
    padding: .25em .25em .25em .5em;/* 内側余白 上、右、下、左 */
    margin: 1em 0; /* 外側の余白：上下　左右 */
}

h2 {
    position: relative;

    padding-right: 2em;
    border-width: 2px;
    border-right-width: 0;
}
h2:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: initial;
    right: 0;
    border: 1em solid transparent;
    border-right: 1.5em solid white;	/* 三角（右）：太さ 線種 色 */
}

特徴的な形 – 前後/上下に棒

先頭に棒

見出しサンプル – 特徴的101

h2{
    border-width: 1px;			/* 枠の太さ */
    border-style: solid;		/* 線の種類 */
    border-color: gray;			/* 枠の色 */
    font-size: 2em;				/* 文字の大きさ */
    color: gray;				/* 文字の色 */
    background-color: white;		/* 背景の色 */
    padding: .25em .25em .25em .5em;/* 内側余白 上、右、下、左 */
    margin: 1em 0; /* 外側の余白：上下　左右 */
}

h2 {
    position: relative;

    padding-left: 1.5em;
    border-width: 2px;
}
h2:before {
    content: '';
    position: absolute;
    top: .3em;
    bottom: .3em;
    left: .5em;
    border: .25em solid gray;	/* 縦棒：太さ 線種 色 */
}

左右に棒

見出しサンプル – 特徴的102

h2{
    border-width: 1px;			/* 枠の太さ */
    border-style: solid;		/* 線の種類 */
    border-color: gray;			/* 枠の色 */
    font-size: 2em;				/* 文字の大きさ */
    color: gray;				/* 文字の色 */
    background-color: white;		/* 背景の色 */
    padding: .25em .25em .25em .5em;/* 内側余白 上、右、下、左 */
    margin: 1em 0; /* 外側の余白：上下　左右 */
}

h2 {
    position: relative;

    padding-left: 1.5em;
    padding-right: 1.5em;
    border-width: 2px;
    text-align: center;
}
h2:before {
    content: '';
    position: absolute;
    top: .3em;
    bottom: .3em;
    left: .5em;
    border: .25em solid gray;	/* 縦棒（左）：太さ 線種 色 */
}
h2:after {
    content: '';
    position: absolute;
    top: .3em;
    bottom: .3em;
    left:initial;
    right: .5em;
    border: .25em solid gray;	/* 縦棒（右）：太さ 線種 色 */
}

上に棒

見出しサンプル – 特徴的111

h2{
    border-width: 1px;			/* 枠の太さ */
    border-style: solid;		/* 線の種類 */
    border-color: gray;			/* 枠の色 */
    font-size: 2em;				/* 文字の大きさ */
    color: gray;				/* 文字の色 */
    background-color: white;		/* 背景の色 */
    padding: .25em .25em .25em .5em;/* 内側余白 上、右、下、左 */
    margin: 1em 0; /* 外側の余白：上下　左右 */
}

h2 {
    position: relative;

    border-width: 2px;
    padding-top: 8px;
}
h2:before {
    content: "";
    position: initial;
    border: 4px solid #C8C1C1;	/* 横棒：太さ 線種 色 */
    display: block;
    margin-bottom: 10px;
}

下に棒

見出しサンプル – 特徴的112

h2{
    border-width: 1px;			/* 枠の太さ */
    border-style: solid;		/* 線の種類 */
    border-color: gray;			/* 枠の色 */
    font-size: 2em;				/* 文字の大きさ */
    color: gray;				/* 文字の色 */
    background-color: white;		/* 背景の色 */
    padding: .25em .25em .25em .5em;/* 内側余白 上、右、下、左 */
    margin: 1em 0; /* 外側の余白：上下　左右 */
}

h2 {
    position: relative;

    border-width: 2px;
    padding-bottom: 8px;
}
h2:after {
    content: "";
    position: initial;
    border: 4px solid #C8C1C1;	/* 横棒：太さ 線種 色 */
    display: block;
    margin-top: 1px;
}

特徴的な形 – 二重枠

２重ワク（背景色あり）

見出しサンプル – 特徴的121

h2{
    border-width: 1px;			/* 枠の太さ */
    border-style: solid;		/* 線の種類 */
    border-color: gray;			/* 枠の色 */
    font-size: 2em;				/* 文字の大きさ */
    color: white;				/* 文字の色 */
    background-color: white;		/* 外枠の背景の色 */
    padding: .25em .25em .25em .5em;/* 内側余白 上、右、下、左 */
    margin: 1em 0; /* 外側の余白：上下　左右 */
}

h2 {
    position: relative;

    border-width: 2px;			/* 外枠の太さ */
    padding: .5em 1em;
    z-index: 1;
}
h2:before {
    content: "";
    position: absolute;
    border: 2px solid #C8C1C1;	/* 内枠：太さ　線種　色 */
    display: block;
    top: .1em;
    left: .1em;
    right: .1em;
    bottom: .1em;
    background-color: gray;		/* 内側の背景の色 */
    z-index: -1;
}

２重ワク（背景色なし）

見出しサンプル – 特徴的122

h2{
    border-width: 1px;			/* 枠の太さ */
    border-style: solid;		/* 線の種類 */
    border-color: gray;			/* 枠の色 */
    font-size: 2em;				/* 文字の大きさ */
    color: gray;				/* 文字の色 */
    background-color: white;		/* 外枠の背景の色 */
    padding: .25em .25em .25em .5em;/* 内側余白 上、右、下、左 */
    margin: 1em 0; /* 外側の余白：上下　左右 */
}

h2 {
    position: relative;

    border-width: 2px;			/* 外枠の太さ */
    padding: .5em 1em;
    z-index: 1;
}
h2:before {
    content: "";
    position: absolute;
    border: 2px solid #C8C1C1;	/* 内枠：太さ　線種　色 */
    display: block;
    top: .1em;
    left: .1em;
    right: .1em;
    bottom: .1em;
    background-color: white;		/* 内側の背景の色 */
    z-index: -1;
}

今回のまとめ

見出しのデザインは、ブログの見かけ上の個性を出す上では欠かせない要素
ここにある見出しデザインで使ってみたものはCSSをブログへコピーする
正しく表示されるよう、初期設定用のCSSも利用する
記事本文だけなど、限られた箇所に適用する場合、使用しているテーマごとに h2タグへの指定を全て変更する
見出し２以外（見出し３，見出し４などやタイトル、その他HTMLタグ）にも勿論使える
文字色や背景色を変えるなど、独自にデザインカスタマイズを行なう場合には、Google Chrome の開発ツールが超便利

ブログの見かけを変える大きな要素はいろいろとありますが、「テーマを利用しつつ他のブログと見かけの差別化をはかる」ものとしては、「ヘッダー画像」とここで紹介してる「見出しのデザイン」が非常に大きな要素となるでしょう。

他の記事で解説しているヘッダー画像とともに、ここで紹介してる見出しなどを活用し、是非あなたらしい、独自のブログデザインに挑戦してみてください。

その独自性、個性はグーグルのペナルティの危険性を遥かに軽減し、またその効果以上にあなたの感性、といったメッセージを読者に伝えられます。

完成された美しいデザインでなくても全然OK。その１つ１つの工夫が読者を惹きつけ、他のブログとの差別化をはかるとともに、読者の滞在時間を延ばし、更に強いブログへの成長を促します。

こうした１つ１つの工夫が良きスパイスとなり、成功への到達スピードを加速します。

早期退職して海外で奮闘する JIN のメールマガジン

無料メールマガジンの詳しい内容を見る！

見出しの見本市 | 賢威 - 見出しのデザインより:

2015-09-18 5:36 AM

[…] 詳細は以下のページを参照 https://tabibitojin.com/blog-designe-headline-css/ […]

返信