コピペでOK!HTMLとCSSの見出しデザインパターン11選

見出しのデザインを変えるだけで、ブログの雰囲気は一気に変わりますよね。

今回はWordPressやはてなブログなどにコピペ使える、見出し(h1〜h6タグ)のデザインパターンをまとめてご紹介します。

見出しをCSSのコピペだけで簡単に変更できるので、気に入った見出しデザインをそのまま使ったり、配色など自分好みにカスタマイズしてご利用ください。

 
点線のアンダーライン

アンダーラインの見出しデザインです。

ボーダースタイルを変更するとアンダーラインの種類が変わります。solid(1本線)、double(2本線)、dashed(破線)、dotted(点線)など。

h2 {
  font-size: 22px;
  color: #000;
  padding: 8px 10px;
  border-bottom: 3px dotted #FF3300;
}
上下にボーダー

上下にラインを引いたデザインの見出しです。

h2 {
  font-size: 22px;
  color: #000;
  padding: 6px 10px;
  border-top: 2px solid #0099FF;
  border-bottom: 2px solid #0099FF;
}
2色のアンダーライン

2色のラインを重ねたデザインの見出しです。

h2 {
  position: relative;
  font-size: 22px;
  color: #000;
  padding: 8px 10px;
  border-bottom: 4px solid #ccc;
}
h2::before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  width: 25%;
  height: 4px;
  background-color: #33FF33;
  z-index: 2;
}
吹き出し1

背景に色を付けた吹き出しのデザインです。

h2 {
  position: relative;
  font-size: 22px;
  color: #fff;
  padding: 12px 12px 10px;
  background-color: #00CC99;
  border-radius: 6px;
}
h2::before{
  position: absolute;
  top: 100%;
  left: 30px;
  width: 0;
  height: 0;
  border-width: 12px;
  border-style: solid;
  border-color: transparent;
  border-top-color: #00CC99;
  content: '';
}
吹き出し2

シンプルな吹き出しの見出しデザインです。

h2 {
  position: relative;
  font-size: 22px;
  color: #000;
  background: #fff;
  line-height: 1;
  padding: 15px 12px 12px;
  border :2px solid #FE2E64;
  border-radius: 4px;
}
h2:after,
h2:before {
  content: "";
  position: absolute; top: 100%;
  height: 0;
  width: 0;
}
h2:after {
  left: 33px;
  border: 11px solid transparent;
  border-top: 11px solid #fff;
}
h2:before {
  left: 30px;
  border: 14px solid transparent;
  border-top: 14px solid #FE2E64;
}
吹き出し3

下側のみの吹き出しのデザインです。

h2 {
  position: relative;
  font-size:22px;
  color: #000;
  border-bottom: 1px solid #333;
  padding: 8px 10px;
}

h2:before,
h2:after {
  content: '';
  border-right: 20px solid #fff;
  border-top: 15px solid #333;
  bottom: -15px;
  position: absolute;
  left: 40px;
}

h2:after {
  border-top-color: #fff;
  border-right-color: transparent;
  bottom: -13px;
  left: 41px;
}
ボックス(上下にボーダー)

背景に色を付けて上下にラインを引いたデザインの見出しです。

h2 {
  font-size:22px;
  color: #000;
  background: #F5F5F5;
  padding: 8px 15px;
  border-top: 2px solid #75A9FF;
  border-bottom: 2px solid #75A9FF;
}
ボックス(左にボーダー)

背景に色を付けて左にラインを引いたものです。

h2 {
  font-size:22px;
  color: #000;
  background: #EEEEEE;
  padding: 8px 15px;
  border-left: 8px solid #00FF33;
}
ボックス(丸)

背景に色を付けて角を丸めたデザインです。

h2 {
  font-size:22px;
  color: #fff;
  background: #3399CC;
  padding: 10px 15px;
  border-radius: 6px;
}
ボックス(影)

背景に色を付けて影を付けた見出しデザインです。

h2 {
  font-size:22px;
  color: #fff;
  background: #444444;
  text-shadow: 0px 2px 3px #C0C0C0;
  padding: 10px 15px;
  box-shadow:0px 5px 4px -2px #B0B0B0;
}
マークとライン

マークを付けてアンダーラインを引いた見出しデザインです。

h2 {
  position: relative;
  color: #000;
  font-size: 22px;
  padding: 5px 10px 5px 40px;
  border-bottom: 3px solid #6666FF;
}
 
h2:before{
  content: "";
  position: absolute;
  background: #6666FF;
  top: 0;
  left: 12px;
  height: 14px;
  width: 14px;
  transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
}
 
h2:after{
  content: "";
  position: absolute;
  background: #8C8CFF;
  top: 20px;
  left: 5px;
  height: 9px;
  width: 9px;
  transform: rotate(15deg);
  -moz-transform: rotate(15deg);
  -webkit-transform: rotate(15deg);
  -o-transform: rotate(15deg);
  -ms-transform: rotate(15deg);
}

コピペで使える、シンプルな見出しデザインをご紹介しました。

簡単に変更できるので、ぜひご利用ください。

(色を変更したい場合は、カラーコード(#+6桁の英数字)を変更してください。カラーコードは、原色大辞典HTMLカラーコードなどで探せます。)

スポンサーリンク
記事下広告
記事下広告

シェアする

フォローする

スポンサーリンク
記事下広告