9Mar2017

CSSのコピペだけで使える！？オシャレな見出しデザイン64選！個性を出せると話題沸騰中！

CSSのコピペだけで使える！？オシャレな見出しデザイン64選

こんにちは。
管理人のトレトレです！

ブログを書く時などに
アメーバなどのブログサービスで
CSSの変更が出来る場合がありますよね？

通常では
デザインに拘るのでなければ
デフォルトのデザインを
そのまま使うことも多いと思います。

でも、個人でブログなどを
立ちあげている方は
デフォルトのデザインでは
物足りないと感じる方も
多いのではないかと思います。

そんな時に便利な
CSSのコピペだけで使える
見出しデザインを
64個ご紹介します。

独断と偏見で選びましたので
そこの突っ込みは
なしでお願いしますね！ｗ

見出しって
実はすごく重要ですよね？

見やすくなるのはもちろん！
デザイン力が問われる
重要な要因だと思います。

このCSSのコピペは
ワードプレスなどをご利用の方も
問題なく使える
一種のテクニックです。

それでは
独断と偏見で選んだ
見出しデザインを
64個ご紹介しようと思います！

シンプル系の見出しデザイン

●下線付きのタイプ

コードはこちら。

h1 {
border-bottom: solid 3px black;
/*線の種類（実線）太さ色*/
}

●点線＋色を変更するタイプ

コードはこちら。

h1 {
color: #6594e0;/*文字色*/
border-bottom: dashed 2px #6594e0;
/*線の種類（点線）2px 線色*/
}

●二重線のタイプ

コードはこちら。

h1 {
border-bottom: double 5px #FFC778;
/*線の種類（二重線）太さ色*/
}

●上下に線があるタイプ

コードはこちら。

h1 {
color: #364e96;/*文字色*/
padding: 0.5em 0;/*上下の余白*/
border-top: solid 3px #364e96;/*上線*/
border-bottom: solid 3px #364e96;/*下線*/
}

●背景色が付いたタイプ

コードはこちら。

h1 {
background: #c2edff;/*背景色*/
padding: 0.5em;/*文字まわり（上下左右）の余白*/
}

●線で囲まれたタイプ

コードはこちら。

h1 {
color: #364e96;/*文字色*/
border: solid 3px #364e96;/*線色*/
padding: 0.5em;/*文字周りの余白*/
border-radius: 0.5em;/*角丸*/
}

●背景色＋下線が付くタイプ

コードはこちら。

h1 {
padding: 0.5em;/*文字周りの余白*/
color: #010101;/*文字色*/
background: #eaf3ff;/*背景色*/
border-bottom: solid 3px #516ab6;/*下線*/
}

●左に線が付くタイプ

コードはこちら。

h1 {
padding: 0.25em 0.5em;/*上下左右の余白*/
color: #494949;/*文字色*/
background: transparent;/*背景透明に*/
border-left: solid 5px #7db4e6;/*左線*/
}

●左に色つきの線のタイプ

コードはこちら。

h1 {
padding: 0.5em;/*文字周りの余白*/
color: #494949;/*文字色*/
background: #fffaf4;/*背景色*/
border-left: solid 5px #ffaf58;/*左線（実線太さ色）*/
}

●立体感があるタイプ

コードはこちら。

h1 {
padding: 0.4em 0.5em;/*文字の上下左右の余白*/
color: #494949;/*文字色*/
background: #f4f4f4;/*背景色*/
border-left: solid 5px #7db4e6;/*左線*/
border-bottom: solid 3px #d7d7d7;/*下線*/
}

●シンプルなボックスのタイプ

コードはこちら。

h1 {
padding: 0.5em;
background: aliceblue;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.23);
}

オシャレな見出しデザイン

●タグタイプ

コードはこちら。

h1{
color: #505050;/*文字色*/
padding: 0.5em;/*文字周りの余白*/
display: inline-block;/*おまじない*/
line-height: 1.3;/*行高*/
background: #dbebf8;/*背景色*/
vertical-align: middle;/*上下中央*/
border-radius: 25px 0px 0px 25px;/*左側の角を丸く*/
}

h1:before {
content: ‘●’;
color: white;
margin-right: 8px;
}

●吹きだしタイプ

コードはこちら。

h1 {
position: relative;
padding: 0.6em;
background: #e0edff;
}

h1:after {
position: absolute;
content: ”;
top: 100%;
left: 30px;
border: 15px solid transparent;
border-top: 15px solid #e0edff;
width: 0;
height: 0;
}

●ステッチタイプ

コードはこちら。

h1{
background: #dfefff;
box-shadow: 0px 0px 0px 5px #dfefff;
border: dashed 1px #96c2fe;
padding: 0.2em 0.5em;
color: #454545;
}

●ステッチの部分が白いタイプ

コードはこちら。

h1{
background: #dfefff;
box-shadow: 0px 0px 0px 5px #dfefff;
border: dashed 2px white;
padding: 0.2em 0.5em;
}

●ノート風の角が剥がれるタイプ

コードはこちら。

h1{
position: relative;
background: #dfefff;
box-shadow: 0px 0px 0px 5px #dfefff;
border: dashed 2px white;
padding: 0.2em 0.5em;
color: #454545;
}

h1:after{
position: absolute;
content: ”;
left: -7px;
top: -7px;
border-width: 0 0 15px 15px;
border-style: solid;
border-color: #fff #fff #a8d4ff;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}

●リボンタイプ

コードはこちら。

{
position: relative;
padding: 0.5em;
background: #a6d3c8;
color: white;
}

h1::before {
position: absolute;
content: ”;
top: 100%;
left: 0;
border: none;
border-bottom: solid 15px transparent;
border-right: solid 20px rgb(149, 158, 155);
}

●蛍光マーカータイプ

コードはこちら。

h1 {
background: linear-gradient(transparent 70%, #a7d6ff 70%);
}

●途中で色が変わる線のタイプ

コードはこちら。

h1 {
border-bottom: solid 3px skyblue;
position: relative;
}

h1:after {
position: absolute;
content: ” “;
display: block;
border-bottom: solid 3px #ffc778;
bottom: -3px;
width: 30%;
}

●線の先に矢印があるタイプ

コードはこちら。

h1 {
position: relative;
padding-left: 25px;
}

h1:before {
position: absolute;
content: ”;
bottom: -3px;
left: 0;
width: 0;
height: 0;
border: none;
border-left: solid 15px transparent;
border-bottom: solid 15px rgb(119, 195, 223);
}
h1:after {
position: absolute;
content: ”;
bottom: -3px;
left: 10px;
width: 100%;
border-bottom: solid 3px rgb(119, 195, 223);
}

●先端が尖ったタイプ

コードはこちら。

h1 {
position: relative;
padding: 5px 5px 5px 42px;
background: #77c3df;
font-size: 20px;
color: white;
margin-left: -33px;
line-height: 1.3;
z-index:-1;
}

h1:before {
position: absolute;
content: ”;
left: -2px;
top: -2px;
border: none;
border-left: solid 40px white;
border-bottom: solid 79px transparent;
z-index:-2
}

●左右の先端がとがったタイプ

コードはこちら。

h1 {
position: relative;
padding: 5px 26px 5px 42px;
background: #fff0d9;
font-size: 20px;
color: #2d2d2d;
margin-left: -33px;
line-height: 1.3;
border-bottom: solid 3px orange;
z-index:-2;
}

h1:before {
position: absolute;
content: ”;
left: -2px;
top: -2px;
width: 0;
height: 0;
border: none;
border-left: solid 40px white;
border-bottom: solid 79px transparent;
z-index: -1;
}

h1:after {
position: absolute;
content: ”;
right: -3px;
top: -7px;
width: 0;
height: 0;
border: none;
border-left: solid 40px transparent;
border-bottom: solid 79px white;
z-index: -1;
}

●背景がストライプのタイプ

コードはこちら。

h1 {
color: #010079;
text-shadow: 0 0 5px white;
padding: 0.3em 0.5em;
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);
}

●背景がストライプ＋左に線があるタイプ

コードはこちら。

h1 {
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);
}

●背景がストライプ＋上下に線タイプ

コードはこちら。

h1 {
color: #6cb4e4;
text-align: center;
padding: 0.25em;
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);
}

●ストライプの下線が付くタイプ

コードはこちら。

h1 {
position: relative;
}

h1:after {
content: “”;
position: absolute;
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);
}

●ストライプの吹きだしタイプ

コードはこちら。

h1 {
position: relative;
padding: 0.6em;
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;
}

h1:after {
position: absolute;
content: ”;
top: 100%;
left: 30px;
border: 15px solid transparent;
border-top: 15px solid #ffebbe;
width: 0;
height: 0;
}

●両端に線が伸びるタイプ

コードはこちら。

h1{
position: relative;
display: inline-block;
padding: 0 55px;
}

h1:before, h1:after{
content: ”;
position: absolute;
top: 50%;
display: inline-block;
width: 45px;
height: 1px;
background-color: black;
}

h1:before {left:0;}
h1:after {right: 0;}

●二重線タイプ

コードはこちら。

h1{
position: relative;
display: inline-block;
padding: 0 55px;
}

h1:before, h1:after{
content: ”;
position: absolute;
top: 50%;
display: inline-block;
width: 45px;
height: 2px;
border-top: solid 1px black;
border-bottom: solid 1px black;
}

h1:before {left:0;}
h1:after {right: 0;}

●下に小さい線をつけるタイプ

コードはこちら。

h1{
position: relative;
display: inline-block;
margin-bottom: 1em;
}
h1:before {
content: ”;
position: absolute;
bottom: -15px;
display: inline-block;
width: 60px;
height: 5px;
left: 50%;
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
background-color: black;
border-radius: 2px;
}

●スラッシュで囲むタイプ

コードはこちら。

h1{
position: relative;
display: inline-block;
padding: 0 45px;
}
h1:before, h1:after{
content: ”;
position: absolute;
top: 50%;
display: inline-block;
width: 44px;
height: 2px;
background-color: black;
-moz-transform: rotate(-60deg);
-webkit-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
transform: rotate(-60deg);
}
h1:before {left:0;}
h1:after {right: 0;}

●線が交差するタイプ

コードはこちら。

h1{
position: relative;
padding: 0.25em 1em;
border-top: solid 2px black;
border-bottom: solid 2px black;
}
h1:before, h1:after{
content: ”;
position: absolute;
top: -7px;
width: 2px;
height: -webkit-calc(100% + 14px);
height: calc(100% + 14px);
background-color: black;
}
h1:before {left: 7px;}
h1:after {right: 7px;}

●角が丸まるタイプ

コードはこちら。

h1{
position: relative;
padding: 0.25em 1em;
border: solid 2px black;
border-radius: 3px 0 3px 0;
}

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

h1:after {top:-12px;left:-12px;}
h1:before {bottom:-12px;right:-12px;}

●葉っぱタイプ

コードはこちら。

h1 {
position: relative;
color: #158b2b;
font-size: 20px;
padding: 10px 0;
text-align: center;
margin: 1.5em 0;
}
h1:before {
content: “”;
position: absolute;
top: -8px;
left: 50%;
width: 150px;
height: 58px;
border-radius: 50%;
border: 5px solid #a6ddb0;
border-left-color: transparent;
border-right-color: transparent;
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}

●細いカギカッコタイプ

コードはこちら。

h1 {
position: relative;
line-height: 1.4;
padding:0.25em 1em;
display: inline-block;
}

h1:before,h1:after{
content:”;
width: 20px;
height: 30px;
position: absolute;
display: inline-block;
}

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

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

●大きなカッコタイプ

コードはこちら。

h1 {
position: relative;
line-height: 1.4;
padding:0.25em 1em;
display: inline-block;
top:0;
}

h1:before,h1:after{
position: absolute;
top: 0;
content:”;
width: 8px;
height: 100%;
display: inline-block;
}
h1:before{
border-left: solid 1px black;
border-top: solid 1px black;
border-bottom: solid 1px black;
left: 0;
}
h1:after{
content: ”;
border-top: solid 1px black;
border-right: solid 1px black;
border-bottom: solid 1px black;
right: 0;
}

●点線の大カッコタイプ

コードはこちら。

h1 {
position: relative;
line-height: 1.4;
padding:0.25em 1em;
display: inline-block;
top:0;
}

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

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

h1:after{
content: ”;
border-top: dotted 1px #535aaa;
border-right: dotted 1px #535aaa;
border-bottom: dotted 1px #535aaa;
right: 0;
}

●立体ボックスタイプ

コードはこちら。

h1{
position: relative;
padding: 0.35em 0.5em;
background: #b6e9ff;
color: #393939;
}
h1:before{
content: ” “;
position: absolute;
top: -16px;
left: 0;
width: -webkit-calc(100% – 16px);
width: calc(100% – 16px);
height: 0;
border: solid 8px transparent;
border-bottom-color: #b2ddf0;
}

●一文字目だけ装飾を変えるタイプ

コードはこちら。

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

グラデーションを使用した見出しデザイン

●下線にグラデーションをかけるタイプ

コードはこちら。

h1 {
h1{
position: relative;
padding: 0.25em 0;
}
h1:after {
content: "";
display: block;
height: 4px;
background: -moz-linear-gradient(to right, rgb(230, 90, 90), transparent);
background: -webkit-linear-gradient(to right, rgb(230, 90, 90), transparent);
background: linear-gradient(to right, rgb(230, 90, 90), transparent);
}
}

●色が変わるグラデのタイプ

コードはこちら。

h1{
position: relative;
padding: 0.25em 0;
}
h1:after {
content: "";
display: block;
height: 4px;
background: -moz-linear-gradient(to right, rgb(255, 186, 115), #ffb2b2);
background: -webkit-linear-gradient(to right, rgb(255, 186, 115), #ffb2b2);
background: linear-gradient(to right, rgb(255, 186, 115), #ffb2b2);
}

●グラデーションの背景タイプ

コードはこちら。

h1{
 position: relative;
padding: 0.1em 0.5em;
background: -moz-linear-gradient(to right, rgb(255, 186, 115), transparent);
background: -webkit-linear-gradient(to right, rgb(255, 186, 115), transparent);
background: linear-gradient(to right, rgb(255, 186, 115), transparent);
color: #545454;
/* display: inline-block; */
}

●グラデに影が付くタイプ

コードはこちら。

h1{
position: relative;
padding: 0.2em 0.5em;
background: -moz-linear-gradient(to right, rgb(255, 124, 111), #ffc994);
background: -webkit-linear-gradient(to right, rgb(255, 124, 111), #ffc994);
background: linear-gradient(to right, rgb(255, 124, 111), #ffc994);
color: white;
font-weight: lighter;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.56);
}

●上下にグラデタイプ

コードはこちら。

h1{
position: relative;
padding: 0.2em 0.5em;
background: -moz-linear-gradient(to right, rgb(255, 124, 111), #ffc994);
background: -webkit-linear-gradient(to right, rgb(255, 124, 111), #ffc994);
background: linear-gradient(to right, rgb(255, 124, 111), #ffc994);
color: white;
font-weight: lighter;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.56);
}

●鏡面反射するタイプ

コードはこちら。

h1{
position: relative;
padding: 0.3em 0.5em;
background: -moz-linear-gradient(to top, rgb(137, 184, 255), #c5ceff);
color: #495193;
background: -webkit-linear-gradient(to top, rgb(137, 184, 255), #c5ceff);
color: #495193;
background: linear-gradient(to top, rgb(137, 184, 255), #c5ceff);
color: #495193;
}

アイコンを使った見出しデザイン

●チェックマークが付くタイプ

コードはこちら。

h1 {
position: relative;
padding-left: 1.2em;/*アイコン分のスペース*/
line-height: 1.4;
}

h1:before{ font-family: FontAwesome;/*忘れずに*/
content: "\f00c";/*アイコンのユニコード*/
position: absolute;/*絶対位置*/
font-size: 1em;/*サイズ*/
left: 0;/*アイコンの位置*/
top: 0;/*アイコンの位置*/
color: #5ab9ff; /*アイコン色*/
}

●シェブロンマークが付くタイプ

コードはこちら。

h1 {
position: relative;/*相対位置*/
padding: 0.5em 0.5em 0.5em 1.5em;/*アイコン分のスペース*/
line-height: 1.4;/*行高*/
color: #ff6a6a;/*文字色*/
border-top: dotted 1px gray;
border-bottom: dotted 1px gray;
background: #fffff4;
}

h1:before{ font-family: FontAwesome;/*忘れずに*/
content: "\f138";/*アイコンのユニコード*/
position: absolute;/*絶対位置*/
font-size: 1em;/*サイズ*/
left: 0.25em;/*アイコンの位置*/
top: 0.5em;/*アイコンの位置*/
color: #ff6a6a; /*アイコン色*/
}

●HTMLタグタイプ

コードはこちら。

h1 {
position: relative;/*相対位置*/
line-height: 1.4;/*行高*/
display: inline-block;
}

h1:before,h1:after{ 
position: relative;
font-family: FontAwesome;
display: inline-block;
font-size: 1.0em;
color: #ff6a6a;
}
h1:before{
  content:"\f053";/*アイコン種類*/
  padding-right: 0.5em
}
h1:after{
content:"\f054";/*アイコン種類*/
padding-left: 0.5em
}

●吹きだし風アイコンタイプ

コードはこちら。

h1 {
position: relative;/*相対位置*/
padding-left: 1.2em;/*アイコン分のスペース*/
line-height: 1.4;/*行高*/
}

h1:before{ font-family: FontAwesome;/*忘れずに*/
content: "\f075";/*アイコンのユニコード*/
position: absolute;/*絶対位置*/
font-size: 1em;/*サイズ*/
left: 0;/*アイコンの位置*/
top: 0;/*アイコンの位置*/
color: #5ab9ff; /*アイコン色*/
}

●フラットなタイプ

コードはこちら。

h1{
  position: relative;
  color: white;
  background: #81d0cb;
  line-height: 1.4;
  padding: 0.5em 0.5em 0.5em 1.8em;
}

h1:before {/*疑似要素*/
  font-family: FontAwesome;
  content: "\f14a";
  position: absolute;
  left : 0.5em; /*左端からのアイコンまでの距離*/
}

●コードアイコンタイプ

コードはこちら。

h1{
position: relative;
padding-left: 30px;
color:#153c6e;
}

h1:before{
position: absolute;
font-family: FontAwesome;
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%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}

●タブが付くタイプ

コードはこちら。

h1{
position: relative;
color: black;
background: #d0ecff;
line-height: 1.4;
padding: 0.25em 0.5em;
margin: 2em 0 0.5em;
border-radius: 0 5px 5px 5px;
}

h1:after {/*タブ*/
  position: absolute;
  font-family: FontAwesome,'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
  }

●タブ付きタイプバージョン違い

コードはこちら。

h1{
position: relative;
border-top: solid 2px #80c8d1;
border-bottom: solid 2px #80c8d1;
background: #f4f4f4;
line-height: 1.4;
padding: 0.4em 0.5em;
margin: 2em 0 0.5em;
}

h1:after {/*タブ*/
position: absolute;
font-family: FontAwesome,'Quicksand','Avenir','Arial',sans-serif;
content: '\f0a7\ POINT';
background: #80c8d1;
color: #fff;
left: 0px;
bottom: 100%;
border-radius: 5px 5px 0 0;
padding: 5px 7px 3px;
font-size: 0.7em;
line-height: 1;
letter-spacing: 0.05em;
  }

●先頭にアイコンが付くタイプ

コードはこちら。

h1 {
position: relative;
background: #f1f8ff;
padding: 0.25em 0.5em;
border-left: solid 2em #5c9ee7;
}

h1:before {
font-family: FontAwesome;
content: "\f040";
position: absolute;
padding: 0em;
color: white;
font-weight: normal;
left: -1.35em;
top: 50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}

●ヒントアイコンタイプ

コードはこちら。

h1{
position: relative;
padding-left: 35px;
}
h1:before{
position: absolute;
font-family: FontAwesome;
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%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
h1: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%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}

●円アイコンにバーをつけるタイプ

コードはこちら。

h1 {
position: relative;
background: #ffd98a;
padding: 2px 5px 2px 25px;
font-size: 20px;
color: #474747;
border-radius: 0 10px 10px 0;
}

h1:before {
font-family: FontAwesome;
content: "\f135";
display: inline-block;
line-height: 40px;
position: absolute;
padding: 0em;
color: white;
background: #ffa337;
font-weight: normal;
width: 40px;
text-align: center;
height: 40px;
line-height: 40px;
left: -1.35em;
top: 50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
border: solid 3px white; 
border-radius: 50%;
}

●円のアイコンの周りに影タイプ

コードはこちら。

h1 {
position: relative;
background: #f4f4f4;
padding: 2px 5px 2px 20px;
font-size: 20px;
color: #474747;
border-radius: 0 10px 10px 0;
}

h1:before {
font-family: FontAwesome;
content: "\f041";
display: inline-block;
line-height: 40px;
position: absolute;
padding: 0em;
color: white;
background: #ff6363;
font-weight: normal;
width: 40px;
text-align: center;
height: 40px;
line-height: 40px;
left: -1.35em;
top: 50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
border-radius: 50%;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.29);
}

●アイコンを立体化したタイプ

コードはこちら。

h1 {
position: relative;
background: #eff4ff;
padding: 2px 5px 2px 20px;
font-size: 20px;
color: #474747;
border-radius: 0 10px 10px 0;
}

h1:before {
font-family: FontAwesome;
content: "\f041";
display: inline-block;
line-height: 40px;
position: absolute;
padding: 0em;
color: white;
background: #81a1e4;
font-weight: normal;
width: 40px;
text-align: center;
height: 40px;
line-height: 40px;
left: -1.35em;
top: 50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-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;
}

可愛い系の見出しデザイン

●背景色＋角丸タイプ

コードはこちら。

h1 {
background: #b0dcfa; /*背景色*/
padding: 0.5em;/*文字周りの余白*/
color: white;/*文字を白に*/
border-radius: 0.5em;/*角の丸み*/
}

●シンプルな円マークが付くタイプ

コードはこちら。

HTML部分：

<h1 class="example1">これは例文です(色1)</h1>
CSS部分：

h1 {
position: relative;/*相対位置*/
padding-left: 1.5em;/*アイコン分のスペース*/
line-height: 1.4;/*行高*/
color: black;/*文字色*/
}

h1:before{ font-family: FontAwesome;/*忘れずに*/
content: "\f111";/*アイコンのユニコード*/
position: absolute;/*絶対位置*/
font-size: 1.4em;/*サイズ*/
left: 0;/*アイコンの位置*/
top: -0.2em;/*アイコンの位置*/
}

.example1:before{color: #ffa7a1;}

●考え中の吹きだしタイプ

コードはこちら。

h1 {
font-family: FontAwesome;
content: "\f111";
position: absolute;
font-size: 23px;
left: -23px;
bottom: 0;
color: #def3ff;
}

h1:before{font-family: FontAwesome;
content: "\f111";
position: absolute;
font-size: 15px;
left: -40px;
bottom: 0;
color: #def3ff;
}

h1:after{
font-family: FontAwesome;
content: "\f111";
position: absolute;
font-size: 23px;
left: -23px;
bottom: 0;
color: #def3ff;
}

●肉球アイコンタイプ

コードはこちら。

h1 {
position: relative;/*相対位置*/
padding-left: 1.2em;/*アイコン分のスペース*/
line-height: 1.4;/*行高*/
color: #7b6459;/*文字色*/
}

h1:before{ font-family: FontAwesome;/*忘れずに*/
content: "\f1b0";/*アイコンのユニコード*/
position: absolute;/*絶対位置*/
font-size: 1em;/*サイズ*/
left: 0;/*アイコンの位置*/
top: 0;/*アイコンの位置*/
color: #ff938b; /*アイコン色*/
}

●背景に円が付くタイプ

コードはこちら。

h1 {
position: relative;
color: #333333;
display: inline-block;
margin: 47px 0;
text-shadow: 0 0 2px white;
}
h1:before {
content: "";
position: absolute;
background: #ffd69d;
width: 100px;
height: 100px;
border-radius: 50%;
top: 50%;
/* border: dashed 1px white; */
left: 50%;
-moz-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
z-index: -1;
}

●先頭に円が付くタイプ

コードはこちら。

h1 {
position: relative;
color: #333333;
text-shadow: 0 0 2px white;
}
h1:before {
content: "";
position: absolute;
background: #9de5ff;
width: 50px;
height: 50px;
border-radius: 50%;
top: 50%;
/* border: dashed 1px white; */
left: -15px;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
z-index: -1;
}

●先頭に円をつけて背景を塗るタイプ

コードはこちら。

h1 {
position: relative;
color: #333333;
text-shadow: 0 0 2px white;
background: #e0f3ff;
z-index: -4;
border-radius: 0 10px 10px;
}

h1:before {
content: "";
position: absolute;
background: #9de5ff;
width: 50px;
height: 50px;
border-radius: 50%;
top: 50%;
/* border: dashed 1px white; */
left: -15px;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
z-index: -1;
}

とここまで、64種類の見出しデザインをご紹介しました。

では、これをワードプレスに適応するには？ですが。

ワードプレスに適用する場合

ダッシュボード→外観→テーマ→カスタマイズ→左画面の下にある「追加CSS」に、任意のタグを貼りつける！

これだけで、OKです。

ご紹介したタイプは、最初にh1タグが付いてますが、これをh2にしたり、h5にしたりして、入力した文章に見出しを適用すればOKです。

テーマの種類によっては、追加CSSが付いてない場合もありますので、そこには注意して下さいね。

ちなみに、このページの赤い吹きだしマークの付いた見出しも、この方法を使っています。

長くなりましたが、ご参考になりましたら、幸いです！(*´ω｀*)

ぽちっと応援お願いします！(*´ω｀*)

当ブログにようこそ！情報発信ブログにお越しいただきありがとうございます！

ワンパンマンのさいたまは何故強いのか？

Count per Day

308現在の記事:
23515総閲覧数:
96今日の閲覧数:
86昨日の閲覧数: