CSSコピペで簡単オシャレ!h1&h2など見出しデザイン集10選

見出し_デザイン_h1タグ_h2

CSSコピペで簡単!
オシャレなデザインを紹介します

システムエンジニア(SE)かっきーです。

今回はブログのデザインを圧倒的にオシャレにかえる見出しのデザインをご紹介します!
見出しとは、h1タグやh2タグ、h3タグ、h4タグなどのこと。

見出し_デザイン_h1タグ

見出し_デザイン_h2タグ

「見出しはノーマルなデザインでなくて、もっと凝ったデザインがにしたい!」という方は必見です。

cssでオシャレな見出しデザイン(1)左に飾りがついている

シンプルながらもオシャレ。
非常に使いやすいです。

sample

#sample{
    position: relative;
    color: #111;
    font-size: 16pt;
    font-weight: bold;
    margin: 0 0 1.5em;
    padding: 0.5em 0.5em 0.5em 1.7em;
    border-bottom: 3px solid #ff52a8;
}
 
#sample:before{
    content: "";
    position: absolute;
    background: #d48789;
    top: 0;
    left: 0.4em;
    height: 12px;
    width: 12px;
    transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
}

#sample:after{
    content: "";
    position: absolute;
    background:#d26466;
    top: 1.0em;
    left: 0;
    height: 8px;
    width: 8px;
    transform: rotate(15deg);
    -moz-transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
    -o-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
}

cssでオシャレな見出しデザイン(2)リボン型

インパクトがあります。
女性に人気の見出しデザインです。

sample

#sample{
	position:relative;
	margin:0 -10px;
	padding:5px;
	font:normal 28px/1.6 "Times New Roman", Times, serif;
	text-align:center;
	color:#ffe8e8;
	background:#f99;
	-webkit-transform: rotate(-3deg) skew(-3deg);
	-moz-transform: rotate(-3deg) skew(-3deg);
	-o-transform: rotate(-3deg) skew(-3deg);
	transform: rotate(-3deg) skew(-3deg);
	box-shadow:0 1px 2px 0 rgba(0,0,0,0.2);
    background-image: -webkit-gradient(linear, left top, left bottom,
			from(			rgba(0, 0, 0, 0.0)), 
			color-stop(0.08, rgba(255, 255, 255, 0.5)),
			color-stop(0.12, rgba(255, 255, 255, 0.5)),
			color-stop(0.12, rgba(0, 0, 0, 0.0)),
			color-stop(0.88, rgba(0, 0, 0, 0.0)),
			color-stop(0.88, rgba(255, 255, 255, 0.5)),
			color-stop(0.92, rgba(255, 255, 255, 0.5)),
			color-stop(0.92, rgba(0, 0, 0, 0.0)),
			to(				rgba(0, 0, 0, 0.0))
			);
	background-image: -moz-linear-gradient(top,
			transparent 8%,
            rgba(255, 255, 255, 0.5) 8%,
            rgba(255, 255, 255, 0.5) 12%,
            transparent 12%,
            transparent 88%,
            rgba(255, 255, 255, 0.5) 88%,
            rgba(255, 255, 255, 0.5) 92%,
            transparent 92%	
			);
	background-image: -o-linear-gradient(top,
			transparent 8%,
            rgba(255, 255, 255, 0.5) 8%,
            rgba(255, 255, 255, 0.5) 12%,
            transparent 12%,
            transparent 88%,
            rgba(255, 255, 255, 0.5) 88%,
            rgba(255, 255, 255, 0.5) 92%,
            transparent 92%	
			);
	background-image: linear-gradient(to bottom,
			transparent 8%,
            rgba(255, 255, 255, 0.5) 8%,
            rgba(255, 255, 255, 0.5) 12%,
            transparent 12%,
            transparent 88%,
            rgba(255, 255, 255, 0.5) 88%,
            rgba(255, 255, 255, 0.5) 92%,
            transparent 92%	
			);
}
#sample:before{
	content:" ";
	position:absolute;
	top:-5px;
	left:0;
	width:0;
	height:0;
	border-width:0 0 5px 10px;
	border-style:solid;
	border-color:transparent;
	border-bottom-color:#c66;
}
#sample:after{
	content:" ";
	position:absolute;
	top:100%;
	right:0;
	width:0;
	height:0;
	border-width:5px 10px 0 0;
	border-style:solid;
	border-color:transparent;
	border-top-color:#c66;
}

cssでオシャレな見出しデザイン(3)マスキングテープモチーフ

カフェなどを連想させるデザイン。
ブログが一瞬でこなれた感じに。

sample

#sample{
	position:relative;
	margin:0 22px 0 10px;
	padding:14px 15px 0px 20px;
	font:normal 24px/1.3 serif;
	color:#009;
	background:#ffc;
	box-shadow:
		12px 0 0 0 #ffc,
		0 12px 0 0 #ffc,
		1px 15px 4px -3px rgba(0,0,0,0.2);
}
#sample:before{
	content:" ";
	position:absolute;
	top:100%;
	left:100%;
	width:0;
	height:0;
	border-width:12px 12px 0 0;
	border-style:solid;
	border-color:transparent;
	border-top-color:#cc9;
}
#sample:after{
	content:" ";
	position:absolute;
	padding:0 20px;
	bottom:0;
	left:10px;
	width:120px;
	height:20px;
	background:rgba(255,182,182,0.4);
	-webkit-transform: rotate(-1deg);
	-moz-transform: rotate(-1deg);
	-o-transform: rotate(-1deg);
	transform: rotate(-1deg);
}

cssでオシャレな見出しデザイン(4)旗モチーフ

個性があってオシャレな見出しデザイン。
旗の色次第でカジュアルにも、シックにも!

sample

#sample{
	position:relative;
	margin:0 20px 0 20px;
	padding:10px 15px;
	font:bold 22px/1.2 Arial, Helvetica, sans-serif;
	color:#fff;
	background:#f08080;
}
#sample:before{
	content:"<";
	position:absolute;
	top:middle;
	left:-10px;
	width:0;
	height:0;
	font-size:25px;
	line-height:1.0;
	color:#f08080;
}
#sample:after{
	content:" ";
	position:absolute;
	top:-2px;
	left:-10px;
	width:0;
	height:130%;
	border:#600 solid 2px;
	border-radius:2px;
	-webkit-transform: rotate(-2deg);
	-moz-transform: rotate(-2deg);
	-o-transform: rotate(-2deg);
	transform: rotate(-2deg);
}

cssでオシャレな見出しデザイン(5)モザイクのあしらい

細部にこだわりがたっぷりなので、シンプルながらもオシャレなデザイン。
大人っぽいサイトにぴったり。

sample

#sample{
	position:relative;
	margin:0 10px;
	padding:0 10px 0 55px;
	font:bold 22px/40px Arial, Helvetica, sans-serif;
	color:#666;
	background:#f3f3f3;
	z-index:1;
}
#sample:before{
	content:" ";
	position:absolute;
	top:0;
	left:0;
	width:40px;
	height:40px;
	border-right:#fff solid 2px;
	background:#f60;
    background-image: -webkit-gradient(linear, left top, left bottom,
			from(			 rgba(255, 255, 255, 0.0)), 
			color-stop(0.20, rgba(255, 255, 255, 0.0)), 
			color-stop(0.20, rgba(255, 255, 255, 0.1)), 
			color-stop(0.40, rgba(255, 255, 255, 0.1)), 
			color-stop(0.40, rgba(255, 255, 255, 0.3)), 
			color-stop(0.60, rgba(255, 255, 255, 0.3)), 
			color-stop(0.60, rgba(255, 255, 255, 0.5)), 
			color-stop(0.80, rgba(255, 255, 255, 0.5)), 
			color-stop(0.80, rgba(255, 255, 255, 0.6)), 
			to(				 rgba(255, 255, 255, 0.6))
			);
	background-image: -webkit-linear-gradient(top,
			transparent 20%,
			rgba(255, 255, 255, 0.1) 20%, 
			rgba(255, 255, 255, 0.1) 40%, 
			rgba(255, 255, 255, 0.3) 40%, 
			rgba(255, 255, 255, 0.3) 60%, 
			rgba(255, 255, 255, 0.5) 60%, 
			rgba(255, 255, 255, 0.5) 80%, 
			rgba(255, 255, 255, 0.6) 80%, 
			rgba(255, 255, 255, 0.6) 100%
			);
	background-image: -moz-linear-gradient(top,
			transparent 20%,
			rgba(255, 255, 255, 0.1) 20%, 
			rgba(255, 255, 255, 0.1) 40%, 
			rgba(255, 255, 255, 0.3) 40%, 
			rgba(255, 255, 255, 0.3) 60%, 
			rgba(255, 255, 255, 0.5) 60%, 
			rgba(255, 255, 255, 0.5) 80%, 
			rgba(255, 255, 255, 0.6) 80%, 
			rgba(255, 255, 255, 0.6) 100%
			);
	background-image: -o-linear-gradient(top,
			transparent 20%,
			rgba(255, 255, 255, 0.1) 20%, 
			rgba(255, 255, 255, 0.1) 40%, 
			rgba(255, 255, 255, 0.3) 40%, 
			rgba(255, 255, 255, 0.3) 60%, 
			rgba(255, 255, 255, 0.5) 60%, 
			rgba(255, 255, 255, 0.5) 80%, 
			rgba(255, 255, 255, 0.6) 80%, 
			rgba(255, 255, 255, 0.6) 100%
			);
	background-image: linear-gradient(to bottom,
			transparent 20%,
			rgba(255, 255, 255, 0.1) 20%, 
			rgba(255, 255, 255, 0.1) 40%, 
			rgba(255, 255, 255, 0.3) 40%, 
			rgba(255, 255, 255, 0.3) 60%, 
			rgba(255, 255, 255, 0.5) 60%, 
			rgba(255, 255, 255, 0.5) 80%, 
			rgba(255, 255, 255, 0.6) 80%, 
			rgba(255, 255, 255, 0.6) 100%
			);
			z-index:-1;
}
#sample:after{
	content:" ";
	position:absolute;
	top:0;
	left:0;
	width:40px;
	height:40px;
    background-image: -webkit-gradient(linear, left top, right top,
			from(			 rgba(255, 255, 255, 0.0)), 
			color-stop(0.20, rgba(255, 255, 255, 0.0)), 
			color-stop(0.20, rgba(255, 255, 255, 0.1)), 
			color-stop(0.40, rgba(255, 255, 255, 0.1)), 
			color-stop(0.40, rgba(255, 255, 255, 0.3)), 
			color-stop(0.60, rgba(255, 255, 255, 0.3)), 
			color-stop(0.60, rgba(255, 255, 255, 0.5)), 
			color-stop(0.80, rgba(255, 255, 255, 0.5)), 
			color-stop(0.80, rgba(255, 255, 255, 0.6)), 
			to(				 rgba(255, 255, 255, 0.6))
			);
	background-image: -webkit-linear-gradient(left,
			transparent 20%,
			rgba(255, 255, 255, 0.1) 20%, 
			rgba(255, 255, 255, 0.1) 40%, 
			rgba(255, 255, 255, 0.3) 40%, 
			rgba(255, 255, 255, 0.3) 60%, 
			rgba(255, 255, 255, 0.5) 60%, 
			rgba(255, 255, 255, 0.5) 80%, 
			rgba(255, 255, 255, 0.6) 80%, 
			rgba(255, 255, 255, 0.6) 100%
			);
	background-image: -moz-linear-gradient(left,
			transparent 20%,
			rgba(255, 255, 255, 0.1) 20%, 
			rgba(255, 255, 255, 0.1) 40%, 
			rgba(255, 255, 255, 0.3) 40%, 
			rgba(255, 255, 255, 0.3) 60%, 
			rgba(255, 255, 255, 0.5) 60%, 
			rgba(255, 255, 255, 0.5) 80%, 
			rgba(255, 255, 255, 0.6) 80%, 
			rgba(255, 255, 255, 0.6) 100%
			);
	background-image: -o-linear-gradient(left,
			transparent 20%,
			rgba(255, 255, 255, 0.1) 20%, 
			rgba(255, 255, 255, 0.1) 40%, 
			rgba(255, 255, 255, 0.3) 40%, 
			rgba(255, 255, 255, 0.3) 60%, 
			rgba(255, 255, 255, 0.5) 60%, 
			rgba(255, 255, 255, 0.5) 80%, 
			rgba(255, 255, 255, 0.6) 80%, 
			rgba(255, 255, 255, 0.6) 100%
			);
	background-image: linear-gradient(to right,
			transparent 20%,
			rgba(255, 255, 255, 0.1) 20%, 
			rgba(255, 255, 255, 0.1) 40%, 
			rgba(255, 255, 255, 0.3) 40%, 
			rgba(255, 255, 255, 0.3) 60%, 
			rgba(255, 255, 255, 0.5) 60%, 
			rgba(255, 255, 255, 0.5) 80%, 
			rgba(255, 255, 255, 0.6) 80%, 
			rgba(255, 255, 255, 0.6) 100%
			);
			z-index:-1;
}

cssでオシャレな見出しデザイン(6)ブックマークモチーフ

本好きや物書き好きにはたまらない栞を連想させるデザイン。
目立たせたいh2タグにオススメ。

sample

#sample{
    position: relative;
    margin: 30px 20px 10px -10px;
    padding: 10px 8px 10px 50px;
    color: #fff; /* テキスト色 */
    background: #f08080; /* 背景色 */
    font-size: 1.5em; /* フォントサイズ */
    font-weight: bold; /* フォント太さ */
    line-height: 1em;
    border-radius: 22px 0 0 22px;
}
#sample:before {
    content: "";
    position: absolute;
    background: #ffe9a9; /* 丸部分の色 */
    top: 50%;
    left: 14px;
    margin-top :-10px;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    box-shadow: 1px 1px 1px #777 inset;
}
#sample:after {
    content: "";
    position: absolute;
    top: 0;
    right: -22px;
    height: 0;
    width: 0;
    border: 22px solid #f08080; /* リボン部分の色 */
    border-right-color: transparent;
}

cssでオシャレな見出しデザイン(7)シャボン玉がアイコン

シンプルながらもどこかニュアンスのあるマルが特徴のデザイン。
シャボン玉の組み合わせは無限大!

sample

#sample{
    position:relative;
    padding-left:30px;
    border-bottom:2px solid #f08080; /* 下線:太さ 線の種類 色 */
    font-weight: bold; /* フォント太さ */
    color: #B92A2C; /* テキスト色 */
    font-size: 1.25em; /* フォントサイズ */
    line-height: 38px; /* 見出しの高さの幅 */
}
#sample:before{
    content:''; 
    border-radius:30px;
    -webkit-border-radius:30px;
    -moz-border-radius:30px; 
    height:12px; 
    width:12px; 
    display:block; 
    position:absolute; 
    top:14px; 
    left:7px; 
    background-color:#9999ff; /* 下の円の色 */
    box-shadow: 0 0 2px 2px rgba(255,255,255,0.2) inset;
    filter:alpha(opacity=50);
    -moz-opacity:0.50;
    -khtml-opacity: 0.50;
    opacity:0.50;
    z-index: 1;
}
 
#sample:after{
    content:''; 
    border-radius:30px;
    -webkit-border-radius:30px;
    -moz-border-radius:30px; 
    height:15px; 
    width:15px; 
    display:block; 
    position:absolute; 
    top:7px; 
    left:2px; 
    background-color:#ffcc66; /* 上の円の色 */
    box-shadow: 0 0 2px 2px rgba(255,255,255,0.2) inset
}

cssでオシャレな見出しデザイン(8)吹き出し

かわいい感じのブログをつくりたいときに活躍する吹き出しデザイン。
ブログが一気に楽しくなりそう。

sample

#sample{
    position: relative;
    margin: 0 0 1.5em;
    padding: 0.5em;
    background: #f08080; /* 背景色 */
    color: #fff; /* テキスト色 */
    font-size: 1.25em; /* フォントサイズ */
    font-weight: bold; /* フォント太さ */
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
#sample:after{
    position: absolute;
    bottom: -15px;
    left: 10%;
    z-index: 90;
    margin-left: -15px;
    border-top: 15px solid #f08080; /* 吹き出し部分の三角の色 */
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 0;
    content: "";
}

cssでオシャレな見出しデザイン(9)ストライプ

オリジナル感がとても出やすいストライプの見出しデザイン。
ストライプの色によっては、見出しの文字を白色にすると読みやすくて◎!

sample

#sample {
  font-weight: bold;
  font-size: 20px;
  padding: .5em .75em;
  background: -webkit-repeating-linear-gradient(45deg, #ffc7e3, #ffc7e 35px, #ff52a8 5px, #ff52a8 10px);
  background: repeating-linear-gradient(45deg, #ffc7e3, #ffc7e3 5px, #ff52a8 5px, #ff52a8 10px);
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
}
#sample a{
  color: #fff!important;
}

cssでオシャレな見出しデザイン(10)ステッチデザイン

繊細なタッチのステッチデザイン。
背景をあえて白にして、ステッチの色を目立つ色にするのもオシャレ。

sample

#sample{
  background: #f08080;
  font-weight: bold;
  font-size: 20px;
  width: 95%;
  border: 2px dashed #f8fbf8;
  box-shadow: 0 0 3px 3px #f08080;
  border-radius: 5px;
  padding: 10px;
}

#sample a{
  color: #f8fbf8!important;
}

見出しデザインを変えてブログをオシャレに!

ブログの見出しデザインは、ユーザーが何度も目に触れる重要なパーツ。
今回ご紹介したcssをカスタマイズしてオシャレなブログにランクアップさせましょう!

見出しサンプルのカラーはピンクですが、もちろん好きな色に変更が可能です。

色の変更などカスタマイズにつまずいたときは、お気軽にお問い合わせフォームよりご連絡くださいませ。

( icon-star 前回の記事も見る

記事の文章作成や、Wordpressサイトのカスタマイズで
お困りではありませんか?
ライティングレシピでは、文章コンサルとWordpressサイトのカスタマイズを承っております!

文章コンサル
●文章力をあげてスキルアップしたい
●SEOを意識した文章を書きたい
●ライター目線で文章が書けるようになりたい

Wordpressサイトのカスタマイズ
●憧れのサイトのようにしてみたい
●不具合を修正したい
●デザインを理想通りに変更したい

少しでも当てはまる項目があるなら、いつでもお気軽にご相談くださいませ。 ココナラ満足度100%で、提案力には自信があります!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です