WordPress の見出しデザイン 64 選｜TCD「Be」と「MAG」はコピペで OK

ブログの始め方

WordPress の見出しデザイン 64 選｜TCD「Be」と「MAG」はコピペで OK

この記事は約 79 分で読めます。

ユウキです。

今回は TCD テーマ「Be」と「MAG」の見出し装飾サンプルを 64 種類まとめて紹介します。

すべての CSS コードはコピペですぐに設定して使えるように確認済みのものばかりなので、気に入ったものがあればお試しください。

この記事が役に立つ読者
  • TCD「Be」の見出しをカスタマイズしたい方
  • TCD「MAG」の見出しをカスタマイズしたい方
  • その他、WordPress の見出しをカスタマイズしたい方

装飾と CSS コードは、サルワカさんのコンテンツを参考にさせていただきました。

CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選｜サルワカ

見出し装飾（CSS）を追加する前に確認

チェック

この記事で紹介する見出しタグはすべて以下の HTML コードを使っています。


<h2 class="style2a">TCD テーマのおしゃれな見出しデザイン</h2>

サンプルには H2 タグを使っていますが、任意の H タグや style タグに変更してカスタマイズできるので、コピペする際に修正されてください。

style.css を最適化する

テーマの style.css には見出し用に初期設定されているスタイルがあります。

見出し装飾用に CSS を追加した際、競合して表示に不具合を起こすため、あらかじめ削除しておくとトラブル防止になります。

削除する箇所は「Be」の場合、1684 行目の h2 ～ h5 スタイルを削除。

TCDテーマ「Be」の style.css 見出しスタイルの位置

「MAG」の場合は 1247 行目の h3 ～ h5 スタイルを削除しておきます。

TCDテーマ「MAG」の style.css 見出しスタイルの位置

「Be」の見出しで font-weight が反映されない場合

「Be」は Table of Contents Plus を使って目次を生成した場合、見出しに自動挿入される style が影響して、一部の CSS が効かない不具合を起こします。

対処法は、指定した見出しの中のスタイルに適用するように、詳細に指定する次のコードを追加すれば反映されます。


.style2a style{ font-weight: bold!important; /* 文字の太さ */ }

「MAG」の見出しで CSS がまったく反映されない場合

「MAG」は記事本文以外でもウィジェットなどに共通で見出しタグを使っています。そのため、h2 など見出しタグを直接指定して CSS コードを追加すると、サイト表示に不具合を起こします。

ですので、見出し用の CSS コードを追加する際は、必ず .post_content .style と指定しておきます。記事本文内だけに反映させられるので、サイト表示のトラブルを避けられます。

「MAG」は意図しない位置に CSS が適用されるトラブルが起きやすい

見出し装飾のサンプルと CSS コード

シンプル系

下線付き

下線付きデザインの見出し装飾

シンプルに下線を引いたデザイン。

TCD「Be」


.style2a {
	margin: 3em 0 1em; /* 上 左右 下 */
	padding: .2em 0; /* 上下 左右 */
	font-weight: bold!important; /* 文字の太さ */
	line-height: 1.6!important; /* 行高 */
	border-bottom: solid 3px black; /* 線の種類 太さ 色 */
}

TCD「MAG」


.post_content .style2a{
	margin: 3em 0 1em; /* 上 左右 下 */
	padding: .2em 0; /* 上下 左右 */
	font-size: 22px; /* 文字の大きさ */
	font-weight: bold; /* 文字の太さ */
	line-height: 1.6; /* 行高 */
	border-bottom: solid 3px black; /* 線の種類 太さ 色 */
}

点線＋色を変える

点線と色を変えるデザインの見出し装飾

文字色を青にして、線の種類を破線（dashed）に変えました。CSS コードがどこに反映するのか分かると、より自由なカスタマイズができますね。

TCD「Be」


.style2a{
	margin: 3em 0 1em; /* 上 左右 下 */
	padding: .2em 0; /* 上下 左右 */
	font-weight: bold!important; /* 文字の太さ */
	line-height: 1.6!important; /* 行高 */
	color: #6594e0; /*文字色*/
	border-bottom: dashed 2px #6594e0; /* 線の種類 太さ 色 */
}

TCD「MAG」


.post_content .style2a{
	margin: 3em 0 1em; /* 上 左右 下 */
	padding: .2em 0; /* 上下 左右 */
	font-size: 22px; /* 文字の大きさ */
	font-weight: bold; /* 文字の太さ */
	line-height: 1.6; /* 行高 */
	color: #6594e0; /*文字色*/
	border-bottom: dashed 2px #6594e0; /* 線の種類 太さ 色 */
}

二重線

二重線デザインの見出し装飾

下線の二重線バージョン。色は好みで変更してみてください。

TCD「Be」


.style2a{
	margin: 3em 0 1em; /* 上 左右 下 */
	padding: .2em 0; /* 上下 左右 */
	font-weight: bold!important; /* 文字の太さ */
	line-height: 1.6!important; /* 行高 */
	border-bottom: double 5px #FFC778; /* 線の種類 太さ 色 */
}

TCD「MAG」


.post_content .style2a{
	margin: 3em 0 1em; /* 上 左右 下 */
	padding: .2em 0; /* 上下 左右 */
	font-size: 22px; /* 文字の大きさ */
	font-weight: bold; /* 文字の太さ */
	line-height: 1.6; /* 行高 */
	border-bottom: double 5px #FFC778; /* 線の種類 太さ 色 */
}

上下に線

上下に線デザインの見出し装飾

文字の上下にボーダーをつけたデザイン。クールな印象になります。

TCD「Be」


.style2a{
	margin: 3em 0 1em; /* 上 左右 下 */
	padding: .5em 0; /* 上下 左右 */
	font-weight: bold!important; /* 文字の太さ */
	line-height: 1.6!important; /* 行高 */
	color: #364e96; /* 文字色 */
	border-top: solid 3px #364e96; /* 上線 */
	border-bottom: solid 3px #364e96; /* 下線 */
}

TCD「MAG」


.post_content .style2a{
	margin: 3em 0 1em; /* 上 左右 下 */
	padding: .5em 0; /* 上下 左右 */
	font-size: 22px; /* 文字の大きさ */
	font-weight: bold; /* 文字の太さ */
	line-height: 1.6; /* 行高 */
	color: #364e96; /* 文字色 */
	border-top: solid 3px #364e96; /* 上線 */
	border-bottom: solid 3px #364e96; /* 下線 */
}

単純な背景色をつける

単純な背景色をつけるデザインの見出し装飾

シンプルに水色の背景色をつけたデザイン。

TCD「Be」


.style2a{
	margin: 3em 0 1em; /* 上 左右 下 */
	padding: .5em; /* 上下左右 */
	font-weight: bold!important; /* 文字の太さ */
	line-height: 1.6!important; /* 行高 */
	background: #c2edff; /* 背景色 */
}

TCD「MAG」


.post_content .style2a{
	margin: 3em 0 1em; /* 上 左右 下 */
	padding: .5em; /* 上下左右 */
	font-size: 22px; /* 文字の大きさ */
	font-weight: bold; /* 文字の太さ */
	line-height: 1.6; /* 行高 */
	background: #c2edff; /* 背景色 */
}

全体を線で囲む

全体を線で囲むデザインの見出し装飾

まわりを線で囲み、角少しを丸くしたデザイン。色は暗めにすると相性がいいです。

TCD「Be」


.style2a{
	margin: 3em 0 1em; /* 上 左右 下 */
	padding: .5em; /* 上下左右 */
	font-weight: bold!important; /* 文字の太さ */
	line-height: 1.6!important; /* 行高 */
	color: #364e96; /* 文字色 */
	border: solid 3px #364e96; /* 線色 */
	border-radius: 0.5em; /* 角丸 */
}

TCD「MAG」


.post_content .style2a{
	margin: 3em 0 1em; /* 上 左右 下 */
	padding: .5em; /* 上下左右 */
	font-size: 22px; /* 文字の大きさ */
	font-weight: bold; /* 文字の太さ */
	line-height: 1.6; /* 行高 */
	color: #364e96; /* 文字色 */
	border: solid 3px #364e96; /* 線色 */
	border-radius: 0.5em; /* 角丸 */
}

背景色＋下線

背景色と下線デザインの見出し装飾

背景色と下線で装飾したデザインです。背景とボーダーを同系統色にするのがポイント。

TCD「Be」


.style2a{
	margin: 3em 0 1em; /* 上 左右 下 */
	padding: .5em; /* 上下左右 */
	font-weight: bold!important; /* 文字の太さ */
	line-height: 1.6!important; /* 行高 */
	color: #010101; /* 文字色 */
	background: #eaf3ff; /* 背景色 */
	border-bottom: solid 3px #516ab6; /* 下線 */
}

TCD「MAG」


.post_content .style2a{
	margin: 3em 0 1em; /* 上 左右 下 */
	padding: .5em; /* 上下左右 */
	font-size: 22px; /* 文字の大きさ */
	font-weight: bold; /* 文字の太さ */
	line-height: 1.6; /* 行高 */
	color: #010101; /* 文字色 */
	background: #eaf3ff; /* 背景色 */
	border-bottom: solid 3px #516ab6; /* 下線 */
}

左線

左線デザインの見出し装飾

左側のみ線をつけたデザインです。ブログでよく見る装飾ですね。

TCD「Be」


.style2a{
	margin: 3em 0 1em; /* 上 左右 下 */
	padding: .25em .5em; /* 上下 左右 */
	font-weight: bold!important; /* 文字の太さ */
	line-height: 1.6!important; /* 行高 */
	color: #494949; /* 文字色 */
	border-left: solid 5px #7db4e6; /* 左線 */
}

TCD「MAG」


.post_content .style2a{
	margin: 3em 0 1em; /* 上 左右 下 */
	padding: .25em .5em; /* 上下 左右 */
	font-size: 22px; /* 文字の大きさ */
	font-weight: bold; /* 文字の太さ */
	line-height: 1.6; /* 行高 */
	color: #494949; /* 文字色 */
	border-left: solid 5px #7db4e6; /* 左線 */
}

左線＋背景色

左線と背景色デザインの見出し装飾

左線に背景色を加えたデザイン。珍しさはありませんが、見やすい装飾です。

TCD「Be」


.style2a{
	margin: 3em 0 1em; /* 上 左右 下 */
	padding: .5em; /* 上下左右 */
	font-weight: bold!important; /* 文字の太さ */
	line-height: 1.6!important; /* 行高 */
	color: #494949; /* 文字色 */
	background: #fffaf4; /* 背景色 */
	border-left: solid 5px #ffaf58; /* 線の種類 太さ 色 */
}

TCD「MAG」


.post_content .style2a{
	margin: 3em 0 1em; /* 上 左右 下 */
	padding: .5em; /* 上下左右 */
	font-size: 22px; /* 文字の大きさ */
	font-weight: bold; /* 文字の太さ */
	line-height: 1.6; /* 行高 */
	color: #494949; /* 文字色 */
	background: #fffaf4; /* 背景色 */
	border-left: solid 5px #ffaf58; /* 線の種類 太さ 色 */
}

立体感のあるバー

立体感のあるバーデザインの見出し装飾

背景色より暗い色の下線をつけると立体感がでます。

TCD「Be」


.style2a{
	margin: 3em 0 1em; /* 上 左右 下 */
	padding: .4em .5em; /* 上下 左右 */
	font-weight: bold!important; /* 文字の太さ */
	line-height: 1.6!important; /* 行高 */
	color: #494949; /* 文字色 */
	background: #f4f4f4; /* 背景色 */
	border-left: solid 5px #7db4e6; /* 左線 */
	border-bottom: solid 3px #d7d7d7; /* 下線 */
}

TCD「MAG」


.post_content .style2a{
	margin: 3em 0 1em; /* 上 左右 下 */
	padding: .4em .5em; /* 上下 左右 */
	font-size: 22px; /* 文字の大きさ */
	font-weight: bold; /* 文字の太さ */
	line-height: 1.6; /* 行高 */
	color: #494949; /* 文字色 */
	background: #f4f4f4; /* 背景色 */
	border-left: solid 5px #7db4e6; /* 左線 */
	border-bottom: solid 3px #d7d7d7; /* 下線 */
}

シンプルなボックスシャドウ

シンプルなボックスシャドウデザインの見出し装飾

周囲に影をつけたデザイン。背景色は白でもいいと思います。

TCD「Be」


.style2a{
	margin: 3em 0 1em; /* 上 左右 下 */
	padding: .5em; /* 上下左右 */
	font-weight: bold!important; /* 文字の太さ */
	line-height: 1.6!important; /* 行高 */
	background: aliceblue; /* 背景色 */
	box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.23); /* 水平 垂直 ぼかし 広がり 色 */
}

TCD「MAG」


.post_content .style2a{
	margin: 3em 0 1em; /* 上 左右 下 */
	padding: .5em; /* 上下左右 */
	font-size: 22px; /* 文字の大きさ */
	font-weight: bold; /* 文字の太さ */
	line-height: 1.6; /* 行高 */
	background: aliceblue; /* 背景色 */
	box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.23); /* 水平 垂直 ぼかし 広がり 色 */
}

おしゃれ系

タグ風

タグ風デザインの見出し装飾

少しユニークなタグ風のデザイン。見る人の目を惹きつけるかも。

TCD「Be」


.style2a{
	display: inline-block; /* 文字幅に調整 */
	margin: 3em 0 1em; /* 上 左右 下 */
	padding: .5em; /* 上下左右 */
	font-weight: bold!important; /* 文字の太さ */
	line-height: 1.3!important; /* 行高 */
	color: #505050; /* 文字色 */
	background: #dbebf8; /* 背景色 */
	vertical-align: middle; 
	border-radius: 25px 0px 0px 25px; /* 左側の角丸 */
}

.style2a:before {
	content: '●'; /* 丸を追加 */
	color: white; /* 丸の色 */
	margin-right: 8px; /* 丸と文字の幅 */
}

TCD「MAG」


.post_content .style2a{
	display: inline-block; /* 文字幅に調整 */
	margin: 3em 0 1em; /* 上 左右 下 */
	padding: .5em; /* 上下左右 */
	font-size: 22px; /* 文字の大きさ */
	font-weight: bold; /* 文字の太さ */
	line-height: 1.3; /* 行高 */
	color: #505050; /* 文字色 */
	background: #dbebf8; /* 背景色 */
	vertical-align: middle; 
	border-radius: 25px 0px 0px 25px; /* 左側の角丸 */
}

.post_content .style2a:before {
	content: '●'; /* 丸を追加 */
	color: white; /* 丸の色 */
	margin-right: 8px; /* 丸と文字の幅 */
}

吹き出し

吹き出しデザインの見出し装飾

吹き出し風のデザイン。border-radius で角を丸くしてもいいかもしれません。

TCD「Be」


.style2a{
	position: relative; /* 相対位置 */
	margin: 3em 0 1em; /* 上 左右 下 */
	padding: .5em; /* 上下左右 */
	font-weight: bold!important; /* 文字の太さ */
	line-height: 1.6!important; /* 行高 */
	background: #e0edff; /* 背景色 */
}

.style2a:before {
	position: absolute; /* 絶対位置 */
	content: '';
	top: 100%; /* 吹き出し位置調整 縦 */
	left: 30px; /* 吹き出し位置調整 横 */
	border: 10px solid transparent; /* 吹き出し先 横幅 */
	border-top: 15px solid #e0edff; /* 吹き出し先 縦幅 */
	width: 0; /* 吹き出し元 横幅 */
	height: 0; /* 吹き出し元 縦幅 */
}

TCD「MAG」


.post_content .style2a{
	position: relative; /* 相対位置 */
	margin: 3em 0 1em; /* 上 左右 下 */
	padding: .5em; /* 上下左右 */
	font-size: 22px; /* 文字の大きさ */
	font-weight: bold; /* 文字の太さ */
	line-height: 1.6; /* 行高 */
	background: #e0edff; /* 背景色 */
}

.post_content .style2a:before {
	position: absolute; /* 絶対位置 */
	content: '';
	top: 100%; /* 吹き出し位置調整 縦 */
	left: 30px; /* 吹き出し位置調整 横 */
	border: 10px solid transparent; /* 吹き出し先 横幅 */
	border-top: 15px solid #e0edff; /* 吹き出し先 縦幅 */
	width: 0; /* 吹き出し元 横幅 */
	height: 0; /* 吹き出し元 縦幅 */
}

ステッチ風

ステッチ風デザインの見出し装飾

縫い目のような点線で表現したステッチ風デザイン。

TCD「Be」


.style2a{
	margin: 3em 0 1em; /* 上 左右 下 */
	padding: .2em .5em; /* 上下左右 */
	font-weight: bold!important; /* 文字の太さ */
	line-height: 1.6!important; /* 行高 */
	background: #dfefff; /* 背景色 */
	box-shadow: 0px 0px 0px 5px #dfefff; /* 水平 垂直 ぼかし 広がり 色 */
	border: dashed 1px #96c2fe; /* 線の種類 太さ 色 */
	color: #454545; /* 文字色 */
}

TCD「MAG」


.post_content .style2a{
	margin: 3em 0 1em; /* 上 左右 下 */
	padding: .2em .5em; /* 上下左右 */
	font-size: 22px; /* 文字の大きさ */
	font-weight: bold; /* 文字の太さ */
	line-height: 1.6; /* 行高 */
	background: #dfefff; /* 背景色 */
	box-shadow: 0px 0px 0px 5px #dfefff; /* 水平 垂直 ぼかし 広がり 色 */
	border: dashed 1px #96c2fe; /* 線の種類 太さ 色 */
	color: #454545; /* 文字色 */
}

ステッチを白に

白ステッチ風デザインの見出し装飾

背景色がある程度濃い場合は、破線を白にしても相性がいいです。このサンプルは少し線を太くしています。

TCD「Be」


.style2a{
	margin: 3em 0 1em; /* 上 左右 下 */
	padding: .2em .5em; /* 上下左右 */
	font-weight: bold!important; /* 文字の太さ */
	line-height: 1.6!important; /* 行高 */
	background: #dfefff; /* 背景色 */
	box-shadow: 0px 0px 0px 5px #dfefff; /* 水平 垂直 ぼかし 広がり 色 */
	border: dashed 2px white; /* 線の種類 太さ 色 */
}

TCD「MAG」


.post_content .style2a{
	margin: 3em 0 1em; /* 上 左右 下 */
	padding: .2em .5em; /* 上下左右 */
	font-size: 22px; /* 文字の大きさ */
	font-weight: bold; /* 文字の太さ */
	line-height: 1.6; /* 行高 */
	background: #dfefff; /* 背景色 */
	box-shadow: 0px 0px 0px 5px #dfefff; /* 水平 垂直 ぼかし 広がり 色 */
	border: dashed 2px white; /* 線の種類 太さ 色 */
}

角がぺろっと剥がれたデザイン

角がぺろっと剥がれたデザインの見出し装飾

ステッチ風デザインの角がはがれたような見た目で、よりお洒落さを演出できます。

TCD「Be」


.style2a{
	position: relative; /* 相対位置 */
	margin: 3em 0 1em; /* 上 左右 下 */
	padding: .2em .5em; /* 上下 左右 */
	font-weight: bold!important; /* 文字の太さ */
	line-height: 1.6!important; /* 行高 */
	color: #454545; /* 文字色 */
	background: #dfefff; /* 背景色 */
	box-shadow: 0px 0px 0px 5px #dfefff; /* 水平 垂直 ぼかし 広がり 色 */
	border: dashed 2px white; /* 線の種類 太さ 色 */
}

.style2a:after {
	position: absolute; /* 絶対位置 */
	content: '';
	top: -7px; /* 折り返し位置調整 縦 */
	left: -7px; /* 折り返し位置調整 横 */
	border-width: 0px 0px 15px 15px; /* 折り返し線の太さ */
	border-style: solid; /* 折り返し線の種類 */
	border-color: #fff #fff #a8d4ff; /* 折り返し線の色 */
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15); /* 水平 垂直 ぼかし 広がり 色 */
}

TCD「MAG」


.post_content .style2a{
	position: relative; /* 相対位置 */
	margin: 3em 0 1em; /* 上 左右 下 */
	padding: .2em .5em; /* 上下 左右 */
	font-size: 22px; /* 文字の大きさ */
	font-weight: bold; /* 文字の太さ */
	line-height: 1.6; /* 行高 */
	color: #454545; /* 文字色 */
	background: #dfefff; /* 背景色 */
	box-shadow: 0px 0px 0px 5px #dfefff; /* 水平 垂直 ぼかし 広がり 色 */
	border: dashed 2px white; /* 線の種類 太さ 色 */
}

.post_content .style2a:after {
	position: absolute; /* 絶対位置 */
	content: '';
	top: -7px; /* 折り返し位置調整 縦 */
	left: -7px; /* 折り返し位置調整 横 */
	border-width: 0px 0px 15px 15px; /* 折り返し線の太さ */
	border-style: solid; /* 折り返し線の種類 */
	border-color: #fff #fff #a8d4ff; /* 折り返し線の色 */
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15); /* 水平 垂直 ぼかし 広がり 色 */
}

帯（リボン）風

帯（リボン）風デザインの見出し装飾

リボン風のデザイン。左側の位置を調整して、裏に織り込まれているように表現されています。

TCD「Be」


.style2a{
	position: relative; /* 相対位置 */
	margin: 3em 0 1em; /* 上 左右 下 */
	padding: .5em; /* 上下左右 */
	font-weight: bold!important; /* 文字の太さ */
	line-height: 1.6!important; /* 行高 */
	color: white; /* 文字色 */
	background: #a6d3c8; /* 背景色 */
}

.style2a:before {
	position: absolute; /* 絶対位置 */
	content: '';
	top: 100%; /* 折り返し位置調整 縦 */
	left: 0; /* 折り返し位置調整 横 */
	border-bottom: solid 15px transparent; /* 折り返し縦幅 */
	border-right: solid 20px rgb(149, 158, 155); /* 折り返し横幅 */
}

TCD「MAG」


.post_content .style2a{
	position: relative; /* 相対位置 */
	margin: 3em 0 1em; /* 上 左右 下 */
	padding: .5em; /* 上下左右 */
	font-size: 22px; /* 文字の大きさ */
	font-weight: bold; /* 文字の太さ */
	line-height: 1.6; /* 行高 */
	color: white; /* 文字色 */
	background: #a6d3c8; /* 背景色 */
}

.post_content .style2a:before {
	position: absolute; /* 絶対位置 */
	content: '';
	top: 100%; /* 折り返し位置調整 縦 */
	left: 0; /* 折り返し位置調整 横 */
	border-bottom: solid 15px transparent; /* 折り返し縦幅 */
	border-right: solid 20px rgb(149, 158, 155); /* 折り返し横幅 */
}

蛍光マーカー風

蛍光マーカー風デザインの見出し装飾

蛍光ペン風デザイン。transparent 70% の部分を小さくすればより蛍光マーカーが太く、大きくすれば細くなります。

TCD「Be」


.style2a{
	margin: 3em 0 1em; /* 上 左右 下 */
	font-weight: bold!important; /* 文字の太さ */
	line-height: 1.6!important; /* 行高 */
	background: linear-gradient(transparent 70%, #a7d6ff 70%); /* 背景色 */
}

TCD「MAG」


.post_content .style2a{
	margin: 3em 0 1em; /* 上 左右 下 */
	font-size: 22px; /* 文字の大きさ */
	font-weight: bold; /* 文字の太さ */
	line-height: 1.6; /* 行高 */
	background: linear-gradient(transparent 70%, #a7d6ff 70%); /* 背景色 */
}

途中で色の変わる線

途中で色の変わる線デザインの見出し装飾

相性の良い 2 色を使えば、かっこよく見せることができます。

TCD「Be」


.style2a{
	position: relative; /* 相対位置 */
	margin: 3em 0 1em; /* 上 左右 下 */
	padding: .2em 0; /* 上下 左右 */
	font-weight: bold!important; /* 文字の太さ */
	line-height: 1.6!important; /* 行高 */
	border-bottom: solid 3px skyblue; /* 下線 種類 太さ 色 */
}

.style2a:after {
	position: absolute; /* 絶対位置 */
	content: '';
	display: block;
	border-bottom: solid 3px #ffc778; /* 左側下線 */
	border-right: solid 20px rgb(149, 158, 155); /* 変換位置 色 */
	bottom: -3px; /* 左線の位置 縦 */
	width: 30%; /* 左線の幅 */
}

TCD「MAG」


.post_content .style2a{
	position: relative; /* 相対位置 */
	margin: 3em 0 1em; /* 上 左右 下 */
	padding: .2em 0; /* 上下 左右 */
	font-size: 22px; /* 文字の大きさ */
	font-weight: bold; /* 文字の太さ */
	line-height: 1.6; /* 行高 */
	border-bottom: solid 3px skyblue; /* 下線 種類 太さ 色 */
}

.post_content .style2a:after {
	position: absolute; /* 絶対位置 */
	content: '';
	display: block;
	border-bottom: solid 3px #ffc778; /* 左側下線 */
	border-right: solid 20px rgb(149, 158, 155); /* 変換位置 色 */
	bottom: -3px; /* 左線の位置 縦 */
	width: 30%; /* 左線の幅 */
}

色を変えてみた場合

途中で色の変わる線デザインの見出し装飾2

同系統の色を組み合わせた方が、自然で違和感のないデザインになります。

TCD「Be」


.style2a{
	position: relative; /* 相対位置 */
	margin: 3em 0 1em; /* 上 左右 下 */
	padding: .2em 0; /* 上下 左右 */
	font-weight: bold!important; /* 文字の太さ */
	line-height: 1.6!important; /* 行高 */
	border-bottom: solid 3px #cce4ff; /* 下線 種類 太さ 色 */
}

.style2a:after {
	position: absolute; /* 絶対位置 */
	content: '';
	display: block;
	border-bottom: solid 3px #5472cd; /* 変換位置 色 */
	bottom: -3px; /* 左線の位置 縦 */
	width: 20%; /* 左線の幅 */
}

TCD「MAG」


.post_content .style2a{
	position: relative; /* 相対位置 */
	margin: 3em 0 1em; /* 上 左右 下 */
	padding: .2em 0; /* 上下 左右 */
	font-size: 22px; /* 文字の大きさ */
	font-weight: bold; /* 文字の太さ */
	line-height: 1.6; /* 行高 */
	border-bottom: solid 3px #cce4ff; /* 下線 種類 太さ 色 */
}

.post_content .style2a:after {
	position: absolute; /* 絶対位置 */
	content: '';
	display: block;
	border-bottom: solid 3px #5472cd; /* 変換位置 色 */
	bottom: -3px; /* 左線の位置 縦 */
	width: 20%; /* 左線の幅 */
}

線先に矢印

線先に矢印デザインの見出し装飾

左端を矢印にすると、シャープな印象のデザインになります。

TCD「Be」


.style2a{
	position: relative; /* 相対位置 */
	margin: 3em 0 1em; /* 上 左右 下 */
	padding: .2em 0 .2em 1em; /* 上 下 左 右 */
	font-weight: bold!important; /* 文字の太さ */
	line-height: 1.6!important; /* 行高 */
}

.style2a:before {
	position: absolute; /* 絶対位置 */
	content: '';
	bottom: -3px; /* 矢印位置 縦 */
	left: 0; /* 矢印位置 横 */
	border-left: solid 15px transparent; /* 矢印左線種類 太さ 透明度 */
	border-bottom: solid 15px rgb(119, 195, 223); /* 矢印線種類 太さ 色 */
}

.style2a:after {
	position: absolute; /* 絶対位置 */
	content: '';
	bottom: -3px; /* 下線位置 縦 */
	left: 10px; /* 下線位置 横 */
	width: 100%; /* 下線幅 */
	border-bottom: solid 3px rgb(119, 195, 223); /* 下線種類 太さ 色 */
}

TCD「MAG」


.post_content .style2a{
	position: relative; /* 相対位置 */
	margin: 3em 0 1em; /* 上 左右 下 */
	padding: .2em 0 .2em 1em; /* 上 下 左 右 */
	font-size: 22px; /* 文字の大きさ */
	font-weight: bold; /* 文字の太さ */
	line-height: 1.6; /* 行高 */
}

.post_content .style2a:before {
	position: absolute; /* 絶対位置 */
	content: '';
	bottom: -3px; /* 矢印位置 縦 */
	left: 0; /* 矢印位置 横 */
	border-left: solid 15px transparent; /* 矢印左線種類 太さ 透明度 */
	border-bottom: solid 15px rgb(119, 195, 223); /* 矢印下線種類 太さ 色 */
}

.post_content .style2a:after {
	position: absolute; /* 絶対位置 */
	content: '';
	bottom: -3px; /* 下線位置 縦 */
	left: 10px; /* 下線位置 横 */
	width: 100%; /* 下線幅 */
	border-bottom: solid 3px rgb(119, 195, 223); /* 下線種類 太さ 色 */
}

先端が尖ったようなバー

先端が尖ったようなバーデザインの見出し装飾

片側だけが尖ったようなデザイン。

TCD「Be」


.style2a{
	position: relative;
	margin: 3em 0 1em;
	padding: .5em 0 .5em 2em;
	font-weight: bold!important;
	line-height: 1.3!important;
	background: #77c3df;
	color: white;
}

.style2a:before {
	position: absolute;
	content: '';
	left: 0;
	top: -2px;
	border-left: solid 40px white;
	border-bottom: solid 79px transparent;
}

TCD「MAG」


.post_content .style2a{
	position: relative;
	margin: 3em 0 1em;
	padding: .5em 0 .5em 2em;
	font-size: 22px;
	font-weight: bold;
	line-height: 1.3;
	background: #77c3df;
	color: white;
}

.post_content .style2a:before {
	position: absolute;
	content: '';
	left: 0;
	top: -2px;
	border-left: solid 40px white;
	border-bottom: solid 79px transparent;
}

両先端を尖らせた場合

両先端を尖らせたデザインの見出し装飾

左右両側を斜めに尖らせ、さらに下線をつけたデザイン。

TCD「Be」


.style2a{
	position: relative;
	margin: 3em 0 1em;
	padding: .5em 0 .5em 2em;
	font-weight: bold!important;
	line-height: 1.3!important;
	background: #fff0d9;
	color: #2d2d2d;
	border-bottom: solid 3px orange;
}

.style2a:before {
	position: absolute;
	content: '';
	left: 0;
	top: -2px;
	border-left: solid 40px white;
	border-bottom: solid 79px transparent;
}

.style2a:after {
	position: absolute;
	content: '';
	right: -3px;
	top: -7px;
	border-left: solid 40px transparent;
	border-bottom: solid 79px white;
}

TCD「MAG」


.post_content .style2a{
	position: relative;
	margin: 3em 0 1em;
	padding: .5em 0 .5em 2em;
	font-size: 22px;
	font-weight: bold;
	line-height: 1.3;
	background: #fff0d9;
	color: #2d2d2d;
	border-bottom: solid 3px orange;
}

.post_content .style2a:before {
	position: absolute;
	content: '';
	left: 0;
	top: -2px;
	border-left: solid 40px white;
	border-bottom: solid 79px transparent;
}

.post_content .style2a:after {
	position: absolute;
	content: '';
	right: -3px;
	top: -7px;
	border-left: solid 40px transparent;
	border-bottom: solid 79px white;
}

背景をストライプで塗る

背景をストライプで塗るデザインの見出し装飾

ストライプ柄のデザイン。ごちゃごちゃして見えないようにストライプ柄は薄めの色にするのがおすすめ。

TCD「Be」


.style2a{
	margin: 3em 0 1em;
	padding: .5em;
	font-weight: bold!important;
	line-height: 1.6!important;
	color: #010079;
	text-shadow: 0 0 5px white;
	background: -webkit-repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
	background: repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
}

TCD「MAG」


.post_content .style2a{
	margin: 3em 0 1em;
	padding: .5em;
	font-size: 22px;
	font-weight: bold;
	line-height: 1.6;
	color: #010079;
	text-shadow: 0 0 5px white;
	background: -webkit-repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
	background: repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
}

左に縦線が入ったバージョン

左線と背景をストライプで塗るデザインの見出し装飾

左側に線をつけたデザイン。背景色と差のある色を選ぶのがポイント。

TCD「Be」


.style2a{
	margin: 3em 0 1em;
	padding: .5em;
	font-weight: bold!important;
	line-height: 1.6!important;
	color: #010079;
	text-shadow: 0 0 5px white;
	border-left: solid 7px #010079;
	background: -webkit-repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
	background: repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
}

TCD「MAG」


.post_content .style2a{
	margin: 3em 0 1em;
	padding: .5em;
	font-size: 22px;
	font-weight: bold;
	line-height: 1.6;
	color: #010079;
	text-shadow: 0 0 5px white;
	border-left: solid 7px #010079;
	background: -webkit-repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
	background: repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
}

ストライプ＋上下線

ストライプと上下線デザインの見出し装飾

水色系統でまとめたデザイン。サンプル CSS は文字を中央揃えにしていますが、好みに合わせて左寄せのままでもいいと思います。

TCD「Be」


.style2a{
	margin: 3em 0 1em;
	padding: .5em;
	font-weight: bold!important;
	line-height: 1.6!important;
	color: #010079;
	text-align: center;
	border-top: solid 2px #6cb4e4;
	border-bottom: solid 2px #6cb4e4;
	background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
	background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
}

TCD「MAG」


.post_content .style2a{
	margin: 3em 0 1em;
	padding: .5em;
	font-size: 22px;
	font-weight: bold;
	line-height: 1.6;
	color: #010079;
	text-align: center;
	border-top: solid 2px #6cb4e4;
	border-bottom: solid 2px #6cb4e4;
	background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
	background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
}

ストライプの下線

ストライプの下線デザインの見出し装飾

下線をストライプ柄にしたデザイン。色は好みで変更してみてください。

TCD「Be」


.style2a{
	position: relative;
	margin: 3em 0 1em;
	padding: .2em 0;
	font-weight: bold!important;
	line-height: 1.6!important;
}

.style2a:after {
	position: absolute;
	content: "";
	left: 0;
	bottom: 0;
	width: 100%;
	height: 7px;
	background: -webkit-repeating-linear-gradient(-45deg, #6ad1c8, #6ad1c8 2px, #fff 2px, #fff 4px);
	background: repeating-linear-gradient(-45deg, #6ad1c8, #6ad1c8 2px, #fff 2px, #fff 4px);
}

TCD「MAG」


.post_content .style2a{
	position: relative;
	margin: 3em 0 1em;
	padding: .2em 0;
	font-size: 22px;
	font-weight: bold;
	line-height: 1.6;
}

.post_content .style2a:after {
	position: absolute;
	content: "";
	left: 0;
	bottom: 0;
	width: 100%;
	height: 7px;
	background: -webkit-repeating-linear-gradient(-45deg, #6ad1c8, #6ad1c8 2px, #fff 2px, #fff 4px);
	background: repeating-linear-gradient(-45deg, #6ad1c8, #6ad1c8 2px, #fff 2px, #fff 4px);
}

ストライプの吹き出し

ストライプの吹き出しデザインの見出し装飾

ストライプと吹き出しの合わせ技。かわいくて目立つデザインです。

TCD「Be」


.style2a{
	position: relative;
	margin: 3em 0 1em;
	padding: .5em;
	font-weight: bold!important;
	line-height: 1.6!important;
	background: -webkit-repeating-linear-gradient(-45deg, #fff5df, #fff5df 4px,#ffe4b1 3px, #ffe4b1 8px);
	background: repeating-linear-gradient(-45deg, #fff5df, #fff5df 4px,#ffe4b1 3px, #ffe4b1 8px);
	border-radius: 7px;
}

.style2a:after {
	position: absolute;
	content: '';
	top: 100%;
	left: 30px;
	border: 15px solid transparent;
	border-top: 15px solid #ffebbe;
}

TCD「MAG」


.post_content .style2a{
	position: relative;
	margin: 3em 0 1em;
	padding: .5em;
	font-size: 22px;
	font-weight: bold;
	line-height: 1.6;
	background: -webkit-repeating-linear-gradient(-45deg, #fff5df, #fff5df 4px,#ffe4b1 3px, #ffe4b1 8px);
	background: repeating-linear-gradient(-45deg, #fff5df, #fff5df 4px,#ffe4b1 3px, #ffe4b1 8px);
	border-radius: 7px;
}

.post_content .style2a:after {
	position: absolute;
	content: '';
	top: 100%;
	left: 30px;
	border: 15px solid transparent;
	border-top: 15px solid #ffebbe;
}

両端に線を伸ばす

両端に線を伸ばすデザインの見出し装飾

文字の両側に線を伸ばすデザインです。モノクロベースのデザインによくマッチしそうです。

TCD「Be」


.style2a {
	position: relative;
	display: inline-block;
	margin: 3em 0 1em;
	padding: 0 3em;
	font-weight: bold!important;
	line-height: 1.6!important;
}
	
.style2a:before, .style2a:after {
	position: absolute;
	content: "";
	top: 50%;
	width: 45px;
	height: 1px;
	background-color: black;
}

.style2a:before {
	left: 0;
}

.style2a:after {
	right: 0;
}

TCD「MAG」


.post_content .style2a {
	position: relative;
	display: inline-block;
	margin: 3em 0 1em;
	padding: 0 3em;
	font-size: 22px;
	font-weight: bold;
	line-height: 1.6;
}
	
.post_content .style2a:before, .post_content .style2a:after {
	position: absolute;
	content: "";
	top: 50%;
	width: 45px;
	height: 1px;
	background-color: black;
}

.post_content .style2a:before {
	left: 0;
}

.post_content .style2a:after {
	right: 0;
}

二重線バージョン

二重線を両端に伸ばしたデザインの見出し装飾

物足りなく感じたときは、二重線にするとさらにおしゃれに見えるかもしれません。

TCD「Be」


.style2a {
	position: relative;
	display: inline-block;
	margin: 3em 0 1em;
	padding: 0 3em;
	font-weight: bold!important;
	line-height: 1.6!important;
}
	
.style2a:before, .style2a:after {
	position: absolute;
	content: "";
	top: 50%;
	width: 45px;
	height: 2px;
	border-top: solid 1px black;
	border-bottom: solid 1px black;
}

.style2a:before {
	left: 0;
}

.style2a:after {
	right: 0;
}

TCD「MAG」


.post_content .style2a {
	position: relative;
	display: inline-block;
	margin: 3em 0 1em;
	padding: 0 3em;
	font-size: 22px;
	font-weight: bold;
	line-height: 1.6;
}
	
.post_content .style2a:before, .post_content .style2a:after {
	position: absolute;
	content: "";
	top: 50%;
	width: 45px;
	height: 2px;
	border-top: solid 1px black;
	border-bottom: solid 1px black;
}

.post_content .style2a:before {
	left: 0;
}

.post_content .style2a:after {
	right: 0;
}

下側に小さく線をつける

文章の下側に小さく線をつけるデザインの見出し装飾

文章の下に小さく線をつけるデザイン。中央寄せにするとスタイリッシュです。

TCD「Be」


.style2a {
	position: relative;
	margin: 3em 0 1.5em;
	padding: 0 .5em;
	font-weight: bold!important;
	line-height: 1.6!important;
	text-align: center;
}
	
.style2a:before {
	position: absolute;
	content: "";
	bottom: -15px;
	width: 60px;
	height: 5px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	background-color: black;
	border-radius: 2px;
}

TCD「MAG」


.post_content .style2a {
	position: relative;
	margin: 3em 0 1.5em;
	padding: 0 .5em;
	font-size: 22px;
	font-weight: bold;
	line-height: 1.6;
	text-align: center;
}
	
.post_content .style2a:before {
	position: absolute;
	content: "";
	bottom: -15px;
	width: 60px;
	height: 5px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	background-color: black;
	border-radius: 2px;
}

スラッシュで囲む

スラッシュで囲むデザインの見出し装飾

少し長めのスラッシュにすることでシャープでおしゃれに見えます。

TCD「Be」


.style2a {
	position: relative;
	display: inline-block;
	margin: 3em 0 1em;
	padding: 0 2em;
	font-weight: bold!important;
	line-height: 1.6!important;
}
	
.style2a:before, .style2a:after {
	position: absolute;
	content: "";
	top: 50%;
	width: 44px;
	height: 2px;
	background-color: black;
	-webkit-transform: rotate(-60deg);
	transform: rotate(-60deg);
}

.style2a:before {
	left: 0;
}

.style2a:after {
	right: 0;
}

TCD「MAG」


.post_content .style2a {
	position: relative;
	display: inline-block;
	margin: 3em 0 1em;
	padding: 0 2em;
	font-size: 22px;
	font-weight: bold;
	line-height: 1.6;
}
	
.post_content .style2a:before, .post_content .style2a:after {
	position: absolute;
	content: "";
	top: 50%;
	width: 44px;
	height: 2px;
	background-color: black;
	-webkit-transform: rotate(-60deg);
	transform: rotate(-60deg);
}

.post_content .style2a:before {
	left: 0;
}

.post_content .style2a:after {
	right: 0;
}

交差線

交差線デザインの見出し装飾

ボーダーが交差したようなデザイン。ボーダーや文字をカラフルな色にしてもいいと思います。

TCD「Be」


.style2a{
	position: relative;
	margin: 3em 0 1em;
	padding: .5em 1em;
	font-weight: bold!important;
	line-height: 1.6!important;
	border-top: solid 2px black;
	border-bottom: solid 2px black;
}

.style2a:before, .style2a:after {
	content: '';
	position: absolute;
	top: -7px;
	width: 2px;
	height: -webkit-calc(100% + 14px);
	background-color: black;
}

.style2a:before {
	left: 7px;
}

.style2a:after {
	right: 7px;
}

TCD「MAG」


.post_content .style2a{
	position: relative;
	margin: 3em 0 1em;
	padding: .5em 1em;
	font-size: 22px;
	font-weight: bold;
	line-height: 1.6;
	border-top: solid 2px black;
	border-bottom: solid 2px black;
}

.post_content .style2a:before, .post_content .style2a:after {
	content: '';
	position: absolute;
	top: -7px;
	width: 2px;
	height: -webkit-calc(100% + 14px);
	background-color: black;
}

.post_content .style2a:before {
	left: 7px;
}

.post_content .style2a:after {
	right: 7px;
}

角がくるん

角がくるんとしたデザインの見出し装飾

角にくるんとした丸をつけたデザイン。

TCD「Be」


.style2a{
	position: relative;
	margin: 3em 0 1em;
	padding: .5em;
	font-weight: bold!important;
	line-height: 1.6!important;
	border: solid 2px black;
	border-radius: 3px 0;
}

.style2a:before, .style2a:after {
	content: '';
	position: absolute;
	width:10px;
	height: 10px;
	border: solid 2px black;
	border-radius: 50%;
}

.style2a:before {
	bottom:-12px;
	right:-12px;
}

.style2a:after {
	top:-12px;
	left:-12px;
}

TCD「MAG」


.post_content .style2a{
	position: relative;
	margin: 3em 0 1em;
	padding: .5em;
	font-size: 22px;
	font-weight: bold;
	line-height: 1.6;
	border: solid 2px black;
	border-radius: 3px 0;
}

.post_content .style2a:before, .post_content .style2a:after {
	content: '';
	position: absolute;
	width:10px;
	height: 10px;
	border: solid 2px black;
	border-radius: 50%;
}

.post_content .style2a:before {
	bottom:-12px;
	right:-12px;
}

.post_content .style2a:after {
	top:-12px;
	left:-12px;
}

葉っぱ風

葉っぱ風デザインの見出し装飾

上下を曲線のボーダーではさんだデザイン。文字を中央寄せで使うのがおすすめ。

TCD「Be」


.style2a{
	position: relative;
	margin: 3em 0 1em;
	padding: .5em;
	font-weight: bold!important;
	line-height: 1.6!important;
	color: #158b2b;
	text-align: center;
}

.style2a:before {
	position: absolute;
	content: "";
	top: -8px;
	left: 50%;
	width: 150px;
	height: 58px;
	border-radius: 50%;
	border: 5px solid #a6ddb0;
	border-left-color: transparent;
	border-right-color: transparent;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

TCD「MAG」


.post_content .style2a{
	position: relative;
	margin: 3em 0 1em;
	padding: .5em;
	font-size: 22px;
	font-weight: bold;
	line-height: 1.6;
	color: #158b2b;
	text-align: center;
}

.post_content .style2a:before {
	position: absolute;
	content: "";
	top: -8px;
	left: 50%;
	width: 150px;
	height: 58px;
	border-radius: 50%;
	border: 5px solid #a6ddb0;
	border-left-color: transparent;
	border-right-color: transparent;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

細カギ括弧

細カギ括弧デザインの見出し装飾

細くて長めのカギ括弧をつけると、クールな雰囲気を演出できます。

TCD「Be」


.style2a{
	position: relative;
	display: inline-block;
	margin: 3em 0 1em;
	padding: .5em 1em;
	font-weight: bold!important;
	line-height: 1.4!important;
}

.style2a:before, .style2a:after {
	position: absolute;
	content: "";
	display: inline-block;
	width: 20px;
	height: 30px;
}

.style2a:before {
	border-left: solid 1px #ff5722;
	border-top: solid 1px #ff5722;
	top:0;
	left: 0;
}

.style2a:after {
	border-right: solid 1px #ff5722;
	border-bottom: solid 1px #ff5722;
	bottom:0;
	right: 0;
}

TCD「MAG」


.post_content .style2a{
	position: relative;
	display: inline-block;
	margin: 3em 0 1em;
	padding: .5em 1em;
	font-size: 22px;
	font-weight: bold;
	line-height: 1.4;
}

.post_content .style2a:before, .post_content .style2a:after {
	position: absolute;
	content: "";
	display: inline-block;
	width: 20px;
	height: 30px;
}

.post_content .style2a:before {
	border-left: solid 1px #ff5722;
	border-top: solid 1px #ff5722;
	top:0;
	left: 0;
}

.post_content .style2a:after {
	border-right: solid 1px #ff5722;
	border-bottom: solid 1px #ff5722;
	bottom:0;
	right: 0;
}

大括弧

大括弧デザインの見出し装飾

大括弧バージョン。見出しサイズと本文サイズにしっかり差をつけるのがポイント。

TCD「Be」


.style2a{
	position: relative;
	display: inline-block;
	margin: 3em 0 1em;
	padding: .5em 1em;
	font-weight: bold!important;
	line-height: 1.4!important;
	top:0;
}

.style2a:before, .style2a:after {
	position: absolute;
	content: "";
	display: inline-block;
	top: 0;
	width: 8px;
	height: 100%;
}

.style2a:before {
	border-left: solid 1px black;
	border-top: solid 1px black;
	border-bottom: solid 1px black;
	left: 0;
}

.style2a:after {
	border-top: solid 1px black;
	border-right: solid 1px black;
	border-bottom: solid 1px black;
	right: 0;
}

TCD「MAG」


.post_content .style2a{
	position: relative;
	display: inline-block;
	margin: 3em 0 1em;
	padding: .5em 1em;
	font-size: 22px;
	font-weight: bold;
	line-height: 1.4;
	top:0;
}

.post_content .style2a:before, .post_content .style2a:after {
	position: absolute;
	content: "";
	display: inline-block;
	top: 0;
	width: 8px;
	height: 100%;
}

.post_content .style2a:before {
	border-left: solid 1px black;
	border-top: solid 1px black;
	border-bottom: solid 1px black;
	left: 0;
}

.post_content .style2a:after {
	border-top: solid 1px black;
	border-right: solid 1px black;
	border-bottom: solid 1px black;
	right: 0;
}

点線バージョン大括弧

点線バージョン大括弧デザインの見出し装飾

物足りなさを感じるときは、線の種類を点線や破線にしてみるといいですよ。

TCD「Be」


.style2a{
	position: relative;
	display: inline-block;
	margin: 3em 0 1em;
	padding: .5em 1em;
	font-weight: bold!important;
	line-height: 1.4!important;
	top:0;
}

.style2a:before, .style2a:after {
	position: absolute;
	content: "";
	display: inline-block;
	top: 0;
	width: 8px;
	height: 100%;
}

.style2a:before {
	border-top: dotted 1px #535aaa;
	border-left: dotted 1px #535aaa;
	border-bottom: dotted 1px #535aaa;
	left: 0;
}

.style2a:after {
	border-top: dotted 1px #535aaa;
	border-right: dotted 1px #535aaa;
	border-bottom: dotted 1px #535aaa;
	right: 0;
}

TCD「MAG」


.post_content .style2a{
	position: relative;
	display: inline-block;
	margin: 3em 0 1em;
	padding: .5em 1em;
	font-size: 22px;
	font-weight: bold;
	line-height: 1.4;
	top:0;
}

.post_content .style2a:before, .post_content .style2a:after {
	position: absolute;
	content: "";
	display: inline-block;
	top: 0;
	width: 8px;
	height: 100%;
}

.post_content .style2a:before {
	border-top: dotted 1px #535aaa;
	border-left: dotted 1px #535aaa;
	border-bottom: dotted 1px #535aaa;
	left: 0;
}

.post_content .style2a:after {
	border-top: dotted 1px #535aaa;
	border-right: dotted 1px #535aaa;
	border-bottom: dotted 1px #535aaa;
	right: 0;
}

立体的なボックス

立体的なボックスデザインの見出し装飾

奥行きのある 3D なボックスデザイン。使いどころは限られるかもしれませんが、見る人の目を惹くことは間違いありません。

TCD「Be」


.style2a{
	position: relative;
	margin: 3em 0 1em;
	padding: .5em;
	font-weight: bold!important;
	line-height: 1.6!important;
	color: #393939;
	background: #b6e9ff;
}

.style2a:before {
	position: absolute;
	content: "";
	top: -16px;
	left: 0;
	width: -webkit-calc(100% - 16px);
	border: solid 8px transparent;
	border-bottom-color: #b2ddf0;
}

TCD「MAG」


.post_content .style2a{
	position: relative;
	margin: 3em 0 1em;
	padding: .5em;
	font-size: 22px;
	font-weight: bold;
	line-height: 1.6;
	color: #393939;
	background: #b6e9ff;
}

.post_content .style2a:before {
	position: absolute;
	content: "";
	top: -16px;
	left: 0;
	width: -webkit-calc(100% - 16px);
	border: solid 8px transparent;
	border-bottom-color: #b2ddf0;
}

一文字目だけ装飾を変える

一文字目だけ装飾を変えるデザインの見出し装飾

一文字目だけを強調したデザイン。

TCD「Be」


.style2a{
	margin: 3em 0 1em;
	padding: .5em;
	font-weight: bold!important;
	line-height: 1.6!important;
}

.style2a:first-letter {
	font-size: 2em;
	color: #7172ac;
}

TCD「MAG」


.post_content .style2a{
	margin: 3em 0 1em;
	padding: .5em;
	font-size: 22px;
	font-weight: bold;
	line-height: 1.6;
}

.post_content .style2a:first-letter {
	font-size: 2em;
	color: #7172ac;
}

グラデーション

消えていく下線

消えていく下線デザインの見出し装飾

右側へ流れるように消えていく下線。和風なデザインの Web サイトやブログと相性がいいかもしれません。

TCD「Be」


.style2a{
	position: relative;
	margin: 3em 0 1em;
	padding: .5em 0;
	font-weight: bold!important;
	line-height: 1.6!important;
}

.style2a:after {
	content: "";
	display: block;
	height: 4px;
	background: -webkit-linear-gradient(to right, rgb(230, 90, 90), transparent);
	background: linear-gradient(to right, rgb(230, 90, 90), transparent);
}

TCD「MAG」


.post_content .style2a{
	position: relative;
	margin: 3em 0 1em;
	padding: .5em 0;
	font-size: 22px;
	font-weight: bold;
	line-height: 1.6;
}

.post_content .style2a:after {
	content: "";
	display: block;
	height: 4px;
	background: -webkit-linear-gradient(to right, rgb(230, 90, 90), transparent);
	background: linear-gradient(to right, rgb(230, 90, 90), transparent);
}

段々と色が変わっていくパターン

段々と色が変わっていくデザインの見出し装飾

右に行くにつれて少しずつ色が変わっていくデザイン。同じ明度の２色を選ぶのがポイントです。

TCD「Be」


.style2a{
	position: relative;
	margin: 3em 0 1em;
	padding: .5em 0;
	font-weight: bold!important;
	line-height: 1.6!important;
}

.style2a:after {
	content: "";
	display: block;
	height: 4px;
	background: -webkit-linear-gradient(to right, rgb(255, 186, 115), #ffb2b2);
	background: linear-gradient(to right, rgb(255, 186, 115), #ffb2b2);
}

TCD「MAG」


.post_content .style2a{
	position: relative;
	margin: 3em 0 1em;
	padding: .5em 0;
	font-size: 22px;
	font-weight: bold;
	line-height: 1.6;
}

.post_content .style2a:after {
	content: "";
	display: block;
	height: 4px;
	background: -webkit-linear-gradient(to right, rgb(255, 186, 115), #ffb2b2);
	background: linear-gradient(to right, rgb(255, 186, 115), #ffb2b2);
}

背景をグラデーションで塗る

グラデーション背景デザインの見出し装飾

フラットデザインベースの Web サイトには合いませんが、どこかで使いたい表現ですね。

TCD「Be」


.style2a{
	margin: 3em 0 1em;
	padding: .5em;
	font-weight: bold!important;
	line-height: 1.6!important;
	background: -webkit-linear-gradient(to right, rgb(255, 186, 115), transparent);
	background: linear-gradient(to right, rgb(255, 186, 115), transparent);
	color: #545454;
}

TCD「MAG」


.post_content .style2a{
	margin: 3em 0 1em;
	padding: .5em;
	font-size: 22px;
	font-weight: bold;
	line-height: 1.6;
	background: -webkit-linear-gradient(to right, rgb(255, 186, 115), transparent);
	background: linear-gradient(to right, rgb(255, 186, 115), transparent);
	color: #545454;
}

影をつけてみた場合

グラデーション背景デザインの見出し装飾2

背景色が少しずつ変わる表現に影をつけたデザインです。

TCD「Be」


.style2a{
	margin: 3em 0 1em;
	padding: .5em;
	font-weight: bold!important;
	line-height: 1.6!important;
	background: -webkit-linear-gradient(to right, rgb(255, 124, 111), #ffc994);
	background: linear-gradient(to right, rgb(255, 124, 111), #ffc994);
	color: white;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.56);
}

TCD「MAG」


.post_content .style2a{
	margin: 3em 0 1em;
	padding: .5em;
	font-size: 22px;
	font-weight: bold;
	line-height: 1.6;
	background: -webkit-linear-gradient(to right, rgb(255, 124, 111), #ffc994);
	background: linear-gradient(to right, rgb(255, 124, 111), #ffc994);
	color: white;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.56);
}

上下のグラデーション

上下のグラデーションデザインの見出し装飾

上から下へのグラデーションを使った立体感のあるデザイン。

TCD「Be」


.style2a{
	margin: 3em 0 1em;
	padding: .5em;
	font-weight: bold!important;
	line-height: 1.6!important;
	background: -webkit-linear-gradient(to top, rgb(137, 184, 255), #c5ceff);
	background: linear-gradient(to top, rgb(137, 184, 255), #c5ceff);
	color: #495193;
}

TCD「MAG」


.post_content .style2a{
	margin: 3em 0 1em;
	padding: .5em;
	font-size: 22px;
	font-weight: bold;
	line-height: 1.6;
	background: -webkit-linear-gradient(to top, rgb(137, 184, 255), #c5ceff);
	background: linear-gradient(to top, rgb(137, 184, 255), #c5ceff);
	color: #495193;
}

文字の反射

文字の反射デザインの見出し装飾

反射表現のデザイン。表示対応ブラウザは Safari（iOS含む）、Chrome、Opera のみ。

TCD「Be」


.style2a{
	margin: 3em 0 1.5em;
	padding: .5em;
	font-weight: bold!important;
	line-height: 1.6!important;
	color: #6eb0f9;
	line-height: 1.4;
	-webkit-box-reflect: below -10px -webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0) 10%,rgba(0, 0, 0, 0.6));
}

TCD「MAG」


.post_content .style2a{
	margin: 3em 0 1.5em;
	padding: .5em;
	font-size: 22px;
	font-weight: bold;
	line-height: 1.6;
	color: #6eb0f9;
	line-height: 1.4;
	-webkit-box-reflect: below -10px -webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0) 10%,rgba(0, 0, 0, 0.6));
}

アイコンフォント

以下の見出しに使っているアイコンは、FontAwesome を利用しています。

使い方は、FontAwesome 公式サイトで最新バージョンを確認して、外部読み込みをするか、サーバーにデータをアップロードして使います。

チェック

外部読み込みで使う場合、次のコードをカスタムスクリプトに追加してカスタマイズを進めてください。（2020年5月26日時点の最新バージョン）


<link href="https://use.fontawesome.com/releases/v5.13.0/css/all.css" rel="stylesheet">

シンプルなチェックマーク

シンプルなチェックマークデザインの見出し装飾

シンプルなチェックマークのデザイン。小見出しや中見出しで使いたい装飾です。

TCD「Be」


.style2a{
	position: relative;
	margin: 3em 0 1.5em;
	padding: .5em 1.4em;
	font-weight: bold!important;
	line-height: 1.6!important;
}

.style2a:before {
	font-family: "Font Awesome 5 Free";
	content: "\f00c";
	position: absolute;
	font-size: 1em;
	left: 0;
	top: 12px;
	color: #5ab9ff;
}

TCD「MAG」


.post_content .style2a{
	position: relative;
	margin: 3em 0 1em;
	padding: .5em 1.4em;
	font-size: 22px;
	font-weight: bold;
	line-height: 1.6;
}

.post_content .style2a:before {
	font-family: "Font Awesome 5 Free";
	content: "\f00c";
	position: absolute;
	font-size: 1em;
	left: 0;
	top: 12px;
	color: #5ab9ff;
}

おしゃれなシェブロンマーク

シェブロンマークデザインの見出し装飾

背景色と上下を点線で挟んだデザイン。色やアイコン種類は好みで変更できます。

TCD「Be」


.style2a{
	position: relative;
	margin: 3em 0 1.5em;
	padding: .5em 1.4em;
	font-weight: bold!important;
	line-height: 1.4!important;
	color: #ff6a6a;
	border-top: dotted 1px gray;
	border-bottom: dotted 1px gray;
	background: #fffff4;
}

.style2a:before {
	font-family: "Font Awesome 5 Free";
	content: "\f138";
	position: absolute;
	font-size: 1em;
	left: 0.25em;
	color: #ff6a6a;
}

TCD「MAG」


.post_content .style2a{
	position: relative;
	margin: 3em 0 1em;
	padding: .5em 1.6em;
	font-size: 22px;
	font-weight: bold;
	line-height: 1.4;
	color: #ff6a6a;
	border-top: dotted 1px gray;
	border-bottom: dotted 1px gray;
	background: #fffff4;
}

.post_content .style2a:before {
	font-family: "Font Awesome 5 Free";
	content: "\f138";
	position: absolute;
	font-size: 1em;
	left: 0.25em;
	color: #ff6a6a;
}

HTMLタグ風

HTMLタグ風デザインの見出し装飾

HTML タグのようにアイコンで挟んだデザイン。

TCD「Be」


.style2a{
	position: relative;
	display: inline-block;
	margin: 3em 0 1em;
	padding: .5em 1em;
	font-weight: bold!important;
	line-height: 1.4!important;
}

.style2a:before, .style2a:after {
	position: absolute;
	display: inline-block;
	font-family: "Font Awesome 5 Free";
	font-size: 1em;
	color: #ff6a6a;
}

.style2a:before {
	content:"\f053";
	left: 0;
}

.style2a:after {
	content:"\f054";
	right: 0;
}

TCD「MAG」


.post_content .style2a{
	position: relative;
	display: inline-block;
	margin: 3em 0 1em;
	padding: .5em 1em;
	font-size: 22px;
	font-weight: bold;
	line-height: 1.4;
}

.post_content .style2a:before, .post_content .style2a:after {
	position: absolute;
	display: inline-block;
	font-family: "Font Awesome 5 Free";
	font-size: 1em;
	color: #ff6a6a;
}

.post_content .style2a:before {
	content:"\f053";
	left: 0;
}

.post_content .style2a:after {
	content:"\f054";
	right: 0;
}

ふきだしアイコン

吹き出しアイコンデザインの見出し装飾

吹き出しのアイコンは見出しと相性がよくて、すっきりした印象になります。

TCD「Be」


.style2a{
	position: relative;
	margin: 3em 0 1em;
	padding: .5em 1.4em;
	font-weight: bold!important;
	line-height: 1.6!important;
}

.style2a:before {
	font-family: "Font Awesome 5 Free";
	content: "\f075";
	position: absolute;
	font-size: 1em;
	left: 0;
	top: 12px;
	color: #5ab9ff;
}

TCD「MAG」


.post_content .style2a{
	position: relative;
	margin: 3em 0 1em;
	padding: .5em 1.4em;
	font-size: 22px;
	font-weight: bold;
	line-height: 1.6;
}
.post_content .style2a:before {
	font-family: "Font Awesome 5 Free";
	content: "\f075";
	position: absolute;
	font-size: 1em;
	left: 0;
	top: 12px;
	color: #5ab9ff;
}

フラットな見出し

フラットデザインの見出し装飾

いかにもフラットデザインらしい見出しです。記事本文だけでなくWebページ内の様々なところで使えそうです。

TCD「Be」


.style2a{
	position: relative;
	margin: 3em 0 1em;
	padding: .5em .5em .5em 1.8em;
	font-weight: bold!important;
	line-height: 1.6!important;
	color: white;
	background: #81d0cb;
}

.style2a:before {
	font-family: "Font Awesome 5 Free";
	content: "\f14a";
	position: absolute;
	left : 0.5em;
}

TCD「MAG」


.post_content .style2a{
	position: relative;
	margin: 3em 0 1em;
	padding: .5em .5em .5em 1.8em;
	font-size: 22px;
	font-weight: bold;
	line-height: 1.6;
	color: white;
	background: #81d0cb;
}

.post_content .style2a:before {
	font-family: "Font Awesome 5 Free";
	content: "\f14a";
	position: absolute;
	left : 0.5em;
}

コードアイコンのマーカー

コードアイコンデザインの見出し装飾

</> の下にカラフルな円を敷いたデザイン。プログラミング関連の情報ページや Web サイトと相性がいいと思います。

TCD「Be」


.style2a{
	position: relative;
	margin: 3em 0 1em;
	padding: .5em .5em .5em 1.4em;
	font-weight: bold!important;
	line-height: 1.6!important;
	color:#153c6e;
}

.style2a::before {
	position: absolute;
	font-family: "Font Awesome 5 Free";
	content: "\f121";
	background: #c9e2ff;
	color: #153c6e;
	font-size: 15px;
	border-radius: 50%;
	left: 0;
	width: 25px;
	height: 25px;
	line-height: 25px;
	text-align: center;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

TCD「MAG」


.post_content .style2a{
	position: relative;
	margin: 3em 0 1em;
	padding: .5em .5em .5em 1.4em;
	font-size: 22px;
	font-weight: bold;
	line-height: 1.6;
	color:#153c6e;
}

.post_content .style2a:before {
	position: absolute;
	font-family: "Font Awesome 5 Free";
	content: "\f121";
	background: #c9e2ff;
	color: #153c6e;
	font-size: 15px;
	border-radius: 50%;
	left: 0;
	width: 25px;
	height: 25px;
	line-height: 25px;
	text-align: center;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

タブ付き

タブ付きデザインの見出し装飾

見出し文の上にタブをつけたデザイン。アイコン種類や「Check」という部分は CSS で好きな文字に変更できます。

TCD「Be」


.style2a{
	position: relative;
	margin: 3em 0 1em;
	padding: .4em;
	font-weight: bold!important;
	line-height: 1.6!important;
	color: black;
	background: #d0ecff;
	border-radius: 0 5px 5px 5px;
}

.style2a:after {
	position: absolute;
	font-family: "Font Awesome 5 Free",'Quicksand','Avenir','Arial',sans-serif;
	content: '\f00c  Check';
	background: #2196F3;
	color: #fff;
	left: 0px;
	bottom: 100%;
	border-radius: 5px 5px 0 0;
	padding: 3px 7px 1px;
	font-size: 0.7em;
	line-height: 1;
	letter-spacing: 0.05em
}

TCD「MAG」


.post_content .style2a{
	position: relative;
	margin: 3em 0 1em;
	padding: .4em;
	font-size: 22px;
	font-weight: bold;
	line-height: 1.6;
	color: black;
	background: #d0ecff;
	border-radius: 0 5px 5px 5px;
}

.post_content .style2a:after {
	position: absolute;
	font-family: "Font Awesome 5 Free",'Quicksand','Avenir','Arial',sans-serif;
	content: '\f00c  Check';
	background: #2196F3;
	color: #fff;
	left: 0px;
	bottom: 100%;
	border-radius: 5px 5px 0 0;
	padding: 3px 7px 1px;
	font-size: 0.7em;
	line-height: 1;
	letter-spacing: 0.05em
}

タブ付きその2

タブ付きデザインの見出し装飾2

デザインを少し変えたタブ付き見出し。記事内のポイントで使うと効果的に思います。

TCD「Be」


.style2a{
	position: relative;
	margin: 3em 0 1em;
	padding: .4em;
	font-weight: bold!important;
	line-height: 1.6!important;
		color: black;
	background: #f4f4f4;
	border-top: solid 2px #80c8d1;
	border-bottom: solid 2px #80c8d1;
}

.style2a:after {
	position: absolute;
	font-family: "Font Awesome 5 Free",'Quicksand','Avenir','Arial',sans-serif;
	content: '\f0a7  Check';
	background: #80c8d1;
	color: #fff;
	left: 0px;
	bottom: 100%;
	border-radius: 5px 5px 0 0;
	padding: 3px 7px 3px;
	font-size: 0.7em;
	line-height: 1;
	letter-spacing: 0.05em
}

TCD「MAG」


.post_content .style2a{
	position: relative;
	margin: 3em 0 1em;
	padding: .4em;
	font-size: 22px;
	font-weight: bold;
	line-height: 1.6;
	color: black;
	background: #f4f4f4;
	border-top: solid 2px #80c8d1;
	border-bottom: solid 2px #80c8d1;
}

.post_content .style2a:after {
	position: absolute;
	font-family: "Font Awesome 5 Free",'Quicksand','Avenir','Arial',sans-serif;
	content: '\f0a7  Check';
	background: #80c8d1;
	color: #fff;
	left: 0px;
	bottom: 100%;
	border-radius: 5px 5px 0 0;
	padding: 3px 7px 3px;
	font-size: 0.7em;
	line-height: 1;
	letter-spacing: 0.05em
}

先頭にアイコンをつける例

先頭にアイコンをつけたデザインの見出し装飾

付箋風の先頭にアイコンをのせたデザイン。アイコンの背景だけ色を濃くすることでメリハリのある見出しになります。

TCD「Be」


.style2a{
	position: relative;
	margin: 3em 0 1em;
	padding: .5em;
	font-weight: bold!important;
	line-height: 1.6!important;
	background: #f1f8ff;
	border-left: solid 2em #5c9ee7;
}

.style2a:before {
	position: absolute;
	font-family: "Font Awesome 5 Free";
	content: '\f303';
	padding: 0em;
	color: white;
	left: -1.35em;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

TCD「MAG」


.post_content .style2a{
	position: relative;
	margin: 3em 0 1em;
	padding: .5em;
	font-size: 22px;
	font-weight: bold;
	line-height: 1.6;
	background: #f1f8ff;
	border-left: solid 2em #5c9ee7;
}

.post_content .style2a:before {
	position: absolute;
	font-family: "Font Awesome 5 Free";
	content: "\f303";
	padding: 0em;
	color: white;
	left: -1.35em;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

ひらめき

ひらめきデザインの見出し装飾

小さな吹き出しにアイコンを入れたデザイン。電球アイコンを入れるとピコンとひらめいたようなデザインでかわいいですね。

TCD「Be」


.style2a{
	position: relative;
	margin: 3em 0 1em;
	padding: .5em .5em .5em 1.7em;
	font-weight: bold!important;
	line-height: 1.6!important;
}

.style2a:before {
	position: absolute;
	font-family: "Font Awesome 5 Free";
	content: "\f0eb";
	background: #ffca2c;
	color: white;
	font-weight: normal;
	font-size: 15px;
	border-radius: 50%;
	left: 0;
	width: 25px;
	height: 25px;
	line-height: 25px;
	text-align: center;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

.style2a:after {
	content: '';
	display: block;
	position: absolute;
	left: 20px;
	height: 0;
	width: 0;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	border-left: 12px solid #ffca2c;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

TCD「MAG」


.post_content .style2a{
	position: relative;
	margin: 3em 0 1em;
	padding: .5em .5em .5em 1.7em;
	font-size: 22px;
	font-weight: bold;
	line-height: 1.6;
}

.post_content .style2a:before {
	position: absolute;
	font-family: "Font Awesome 5 Free";
	content: "\f0eb";
	background: #ffca2c;
	color: white;
	font-weight: normal;
	font-size: 15px;
	border-radius: 50%;
	left: 0;
	width: 25px;
	height: 25px;
	line-height: 25px;
	text-align: center;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

.post_content .style2a:after {
	content: '';
	display: block;
	position: absolute;
	left: 20px;
	height: 0;
	width: 0;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	border-left: 12px solid #ffca2c;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

円にアイコンを入れてバーをつける

円にアイコンを入れてバーをつけたデザインの見出し装飾

使い勝手が良さそうな表現です。アイコンの種類や色はお好みで変えてみてください。

TCD「Be」


.style2a{
	position: relative;
	margin: 3em 0 1em 1em;
	padding: .3em .5em .3em 1.2em;
	font-weight: bold!important;
	line-height: 1.6!important;
	color: #474747;
	background: #ffd98a;
	border-radius: 0 10px 10px 0;
}

.style2a:before {
	position: absolute;
	display: inline-block;
	font-family: "Font Awesome 5 Free";
	content: "\f135";
	line-height: 50px;
	color: white;
	background: #ffa337;
	width: 50px;
	height: 50px;
	top: 50%;
	text-align: center;
	left: -1.5em;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	border: solid 3px white; 
	border-radius: 50%;
}

TCD「MAG」


.post_content .style2a{
	position: relative;
	margin: 3em 0 1em 1em;
	padding: .3em .5em .3em 1.2em;
	font-size: 22px;
	font-weight: bold;
	line-height: 1.6;
	color: #474747;
	background: #ffd98a;
	border-radius: 0 10px 10px 0;
}

.post_content .style2a:before {
	position: absolute;
	display: inline-block;
	font-family: "Font Awesome 5 Free";
	content: "\f135";
	line-height: 50px;
	color: white;
	background: #ffa337;
	width: 50px;
	height: 50px;
	top: 50%;
	text-align: center;
	left: -1.5em;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	border: solid 3px white; 
	border-radius: 50%;
}

円のまわりに影を付けた場合

円のまわりに影を付けたデザインの見出し装飾

円のまわりに影をつけたデザイン。立体感があり目を惹きますね。

TCD「Be」


.style2a{
	position: relative;
	margin: 3em 0 1em 1em;
	padding: .3em .5em .3em 1.2em;
	font-weight: bold!important;
	line-height: 1.6!important;
	color: #474747;
	background: #f4f4f4;
	border-radius: 0 10px 10px 0;
}

.style2a:before {
	position: absolute;
	display: inline-block;
	font-family: "Font Awesome 5 Free";
	content: "\f041";
	line-height: 50px;
	color: white;
	background: #ff6363;
	width: 50px;
	height: 50px;
	top: 50%;
	text-align: center;
	left: -1.5em;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	border: solid 3px white; 
	border-radius: 50%;
	box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.29);
}

TCD「MAG」


.post_content .style2a{
	position: relative;
	margin: 3em 0 1em 1em;
	padding: .3em .5em .3em 1.2em;
	font-size: 22px;
	font-weight: bold;
	line-height: 1.6;
	color: #474747;
	background: #f4f4f4;
	border-radius: 0 10px 10px 0;
}

.post_content .style2a:before {
	position: absolute;
	display: inline-block;
	font-family: "Font Awesome 5 Free";
	content: "\f041";
	line-height: 50px;
	color: white;
	background: #ff6363;
	width: 50px;
	height: 50px;
	top: 50%;
	text-align: center;
	left: -1.5em;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	border: solid 3px white; 
	border-radius: 50%;
	box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.29);
}

さらに立体的にしてみた場合

さらに円を立体的にデザインした見出し装飾

円の下の影を少しカスタマイズして、さらに立体的にしたデザイン。

TCD「Be」


.style2a{
	position: relative;
	margin: 3em 0 1em 1em;
	padding: .3em .5em .3em 1.2em;
	font-weight: bold!important;
	line-height: 1.6!important;
	color: #474747;
	background: #f4f4f4;
	border-radius: 0 10px 10px 0;
}

.style2a:before {
	font-family: "Font Awesome 5 Free";
	content: "\f041";
	position: absolute;
	padding: 0em;
	color: white;
	background: #81a1e4;
	width: 50px;
	text-align: center;
	height: 50px;
	line-height: 50px;
	left: -1.5em;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	border-radius: 50%;
	box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.29);
	border-bottom: solid 2px #4967b4;
}

TCD「MAG」


.post_content .style2a{
	position: relative;
	margin: 3em 0 1em 1em;
	padding: .3em .5em .3em 1.2em;
	font-size: 22px;
	font-weight: bold;
	line-height: 1.6;
	color: #474747;
	background: #eff4ff;
	border-radius: 0 10px 10px 0;
}

.post_content .style2a:before {
	font-family: "Font Awesome 5 Free";
	content: "\f041";
	position: absolute;
	padding: 0em;
	color: white;
	background: #81a1e4;
	width: 50px;
	text-align: center;
	height: 50px;
	line-height: 50px;
	left: -1.5em;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	border-radius: 50%;
	box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.29);
	border-bottom: solid 2px #4967b4;
}

点滅するカーソル

アイコンが点滅するデザインした見出し装飾

カーソルのアイコンを先頭に置き、CSS3 のアニメーションで点滅させたデザイン。多用すると見る人が不快に感じるかもしれないので注意が必要。

TCD「Be」


.style2a{
	position: relative;
	margin: 3em 0 1em;
	padding: .5em .5em .5em 1em;
	font-weight: bold!important;
	line-height: 1.6!important;
}

.style2a:before {
	font-family: "Font Awesome 5 Free";
	content: "\f246";
	position: absolute;
	font-size: 1em;
	left: 0;
	color: silver;
	-webkit-animation:blink 0.5s ease-in-out infinite alternate;
	animation:blink 0.5s ease-in-out infinite alternate;
}

@-webkit-keyframes blink{
	0% {opacity:0;}
	100% {opacity:1;}
}

@keyframes blink{
	0% {opacity:0;}
	100% {opacity:1;}
}

TCD「MAG」


.post_content .style2a{
	position: relative;
	margin: 3em 0 1em;
	padding: .5em .5em .5em 1em;
	font-size: 22px;
	font-weight: bold;
	line-height: 1.4;
}

.post_content .style2a:before {
	font-family: "Font Awesome 5 Free";
	content: "\f246";
	position: absolute;
	font-size: 1em;
	left: 0;
	color: silver;
	-webkit-animation:blink 0.5s ease-in-out infinite alternate;
	animation:blink 0.5s ease-in-out infinite alternate;
}

@-webkit-keyframes blink{
	0% {opacity:0;}
	100% {opacity:1;}
}

@keyframes blink{
	0% {opacity:0;}
	100% {opacity:1;}
}

かわいい系

背景色+角丸

背景色と角丸アイコンが点滅するデザインした見出し装飾

角を丸く、文字を白抜きにした、やわらかい印象のデザイン。

TCD「Be」


.style2a{
	margin: 3em 0 1em;
	padding: .5em;
	font-weight: bold!important;
	line-height: 1.6!important;
	color: white;
	background: #b0dcfa;
	border-radius: 0.5em;
}

TCD「MAG」


.post_content .style2a{
	margin: 3em 0 1em;
	padding: .5em;
	font-size: 22px;
	font-weight: bold;
	line-height: 1.6;
	color: white;
	background: #b0dcfa;
	border-radius: 0.5em;
}

シンプルな円マーク

シンプルな円マークデザインした見出し装飾

FontAwesome を使ったシンプルな円マークのデザイン。円の色はお好みで変更してみてください。

TCD「Be」


.style2a{
	position: relative;
	margin: 3em 0 1em;
	padding: .5em .5em .5em 1.8em;
	font-weight: bold!important;
	line-height: 1.6!important;
	color: black;
}

.style2a:before {
	font-family: "Font Awesome 5 Free";
	content: "\f111";
	position: absolute;
	font-size: 1.4em;
	color: #ffa7a1;
	left: 0;
	top: 4px;
}

TCD「MAG」


.post_content .style2a{
	position: relative;
	margin: 3em 0 1em;
	padding: .5em .5em .5em 1.8em;
	font-size: 22px;
	font-weight: bold;
	line-height: 1.4;
	color: black;
}

.post_content .style2a:before {
	font-family: "Font Awesome 5 Free";
	content: "\f111";
	position: absolute;
	font-size: 1.4em;
	color: #ffa7a1;
	left: 0;
	top: 4px;
}

考えごと風

考えごと風デザインした見出し装飾

FontAwesome を使った吹き出し風デザイン。背景は控えめな色にするのがポイント。

TCD「Be」


.style2a{
	position: relative;
	margin: 3em 0 1em 2em;
	padding: .5em;
	font-weight: bold!important;
	line-height: 1.6!important;
	background: #def3ff;
	border-radius: 20px;
}

.style2a:before {
	font-family: "Font Awesome 5 Free";
	content: "\f111";
	position: absolute;
	font-size: 15px;
	left: -50px;
	bottom: 0;
	color: #def3ff;
}

.style2a:after {
	font-family: "Font Awesome 5 Free";
	content: "\f111";
	position: absolute;
	font-size: 23px;
	left: -30px;
	bottom: 0;
	color: #def3ff;
}

TCD「MAG」


.post_content .style2a{
	position: relative;
	margin: 3em 0 1em 2em;
	padding: .5em;
	font-size: 22px;
	font-weight: bold;
	line-height: 1.6;
	background: #def3ff;
	border-radius: 20px;
}

.post_content .style2a:before {
	font-family: "Font Awesome 5 Free";
	content: "\f111";
	position: absolute;
	font-size: 15px;
	left: -50px;
	bottom: 0;
	color: #def3ff;
}

.post_content .style2a:after {
	font-family: "Font Awesome 5 Free";
	content: "\f111";
	position: absolute;
	font-size: 23px;
	left: -30px;
	bottom: 0;
	color: #def3ff;
}

肉球マーカー

肉球マーカーデザインの見出し装飾

FontAwesome でカラフルな肉球のアイコンを見出し文の前に置いたデザイン。

TCD「Be」


.style2a{
	position: relative;
	margin: 3em 0 1em;
	padding: .5em .5em .5em 1.4em;
	font-weight: bold!important;
	line-height: 1.4!important;
	color: #7b6459;
}

.style2a:before {
	font-family: "Font Awesome 5 Free";
	content: "\f1b0";
	position: absolute;
	font-size: 1em;
	left: 0;
	color: #ff938b;
}

TCD「MAG」


.post_content .style2a{
	position: relative;
	margin: 3em 0 1em;
	padding: .5em .5em .5em 1.4em;
	font-size: 22px;
	font-weight: bold;
	line-height: 1.4;
	color: #7b6459;
}

.post_content .style2a:before {
	font-family: "Font Awesome 5 Free";
	content: "\f1b0";
	position: absolute;
	font-size: 1em;
	left: 0;
	color: #ff938b;
}

まとめ

お好みの見出しは見つかりましたか？

すぐに見つからなかった場合でも、サイト運営していく中で自分の表現したいデザインがはっきりしてくるものなので、デザインを変えたくなった際は参考にしてみてください。

また、CSS の各要素が何を指定しているのかが分かってくると、自分なりの細かなカスタマイズもできるようになるので、ぜひ、いろいろと試してみてくださいね。

ちなみに「Be」は CSS でフォントサイズを指定していませんでしたが、理由はテーマオプション機能で変更できるので、機能側で編集できるように固定しないためでした。

追加した装飾をクイックタグで使いやすくカスタマイズする際はこちらの記事を参考にどうぞ。

AddQuicktag の設定と表示されない場合の解決方法
2020.06.01
AddQuicktag の設定と表示されない場合の解決方法
ユウキです。 今回は AddQuicktag の使い方について解説します。プラグインを設定すると、エディタ画面に登録したクイックタグが表示されて、簡単な操作でコード入力ができるようになります。 エディタ画面にクイックタグが表示されなかったり、ページに反...

囲み枠のデザインサンプルもまとめているので、カスタマイズの参考にしてみてください。

WordPress の囲み枠デザイン 30 選｜TCD「Be」と「MAG」はコピペで OK
2020.05.30
WordPress の囲み枠デザイン 30 選｜TCD「Be」と「MAG」はコピペで OK
ユウキです。 今回は、TCD テーマ「Be」と「MAG」の囲み枠装飾サンプルを 30 種類まとめて紹介します。 すべての CSS と HTML コードはコピペですぐに設定して使えるように確認済みなので、気に入ったものがあればお試しください。 この記事...

それでは、今回はこの辺で。

ありがとうございました！

この記事のタイトルとURLをコピーする

関連記事

  1. TCD テーマ「Be」のテーマオプション設定を徹底解説

    ブログの始め方

    TCD「Be」のテーマオプション設定を徹底解説

    ユウキです。今回は WordPress テーマの中でも、デザイン性…

  2. 初心者向け | WordPressにおすすめのレンタルサーバーはふたつだけ

    ブログの始め方

    WordPressでおすすめのレンタルサーバーは2つ

    ユウキです。ブログをこれから始めようと思った際に、まずやることはレ…

  3. エックスサーバーの契約手順｜キャッシュバックの受け取り方も併せて解説

    ブログの始め方

    エックスサーバーの契約手順｜キャッシュバックの受け取り方も併せて解説

    ユウキです。今回はエックスサーバーの契約手順をドメイン設定から W…

  4. アフィリエイトはドメイン名の選び方が重要

    ブログの始め方

    アフィリエイトはドメイン名の選び方が重要

    ユウキです。レンタルサーバーをどこにするか決めたら、次はドメイン名…

  5. WordPress の囲み枠デザイン 30 選｜TCD「Be」と「MAG」はコピペで OK

    ブログの始め方

    WordPress の囲み枠デザイン 30 選｜TCD「Be」と「MAG」はコピペで OK

    ユウキです。今回は、TCD テーマ「Be」と「MAG」の囲み枠装飾…

  6. TCD テーマ「Be」をレビュー｜参考サイトと評判まとめ

    ブログの始め方

    WordPress テーマ「Be（TCD076）」をレビュー

    ユウキです。今回は WordPress テーマの中でも、デザイン性…

管理人
Blog de Affili の管理人ユウキ

ユウキと申します。

経歴は飲食サービス業のマネージャー、プロップトレーダー、オンラインサロン講師などをしていましたが、組織や人間関係にうんざりして、やりたくないことを捨てました。

ブログアフィリエイトを始めたばかりの頃は 1 年で利益 8000 円。（しょぼ笑）

その後、システム構築やマーケティングを学んで、 3 ヶ月で作った仕組みから 698 万円の売り上げを達成しました。

現在は個人向けにオウンドメディア構築やウェブマーケティングをコンサルしています。

稼いでも時間や人間関係に縛られていたらしんどいだけ。ブログでそこそこ稼いで、ゆったり自分らしく暮らしましょう。

最近の記事
  1. WordPress の目次デザインをおしゃれにカスタマイズ

    2020.06.5

    WordPress の目次デザインをおしゃれにカスタマイズ
  2. WP Mail SMTP で Contact Foam 7 のメールが届かない問題を解決

    2020.06.4

    WP Mail SMTP で Contact Foam 7 …
  3. Contact Form 7 の設定とカスタマイズを解説

    2020.06.4

    Contact Form 7 の設定とカスタマイズを解説
  4. robots.txt is not valid 4 errors found の解決方法

    2020.06.3

    robots.txt is not valid 4 erro…
  5. WordPress のセキュリティ対策をするなら SiteGuard WP Plugin

    2020.06.2

    WordPress のセキュリティ対策をするなら SiteG…
惹きつけるブログはデザインから生まれる
WordPress テーマ Be（TCD076）のレビュー
PAGE TOP