見出しデザインCSSの設定方法!コピペ出来るサンプル82選

初心者の方でも簡単に見出しのデザインを変更出来るようにコピペでOKな見出しのCSSのサンプルを集めました。

そして、そのサンプルを使うためのCSSの設定方法についても紹介します。

※お使いのテーマによっては、デザインが崩れてしまう場合もあるので「class」を使う見出しの設定方法も一緒にご紹介します。

見出しをオシャレなデザインに変更して、アナタのサイトをオシャレに変身させちゃいましょう!

【スポンサーリンク】

見出しCSSの設定方法

見出しは、記事を読みやすくする為に必要なものです。今回は、様々なデザインの見出しCSSのサンプルを用意しました。

まずは、CSSの設定方法についてです。あなたのお使いのテーマの中に「style.css」のいうスタイルシートを探してください。

「外観」⇒「テーマの編集」⇒「子テーマ」⇒「style.css」

※子テーマを使ってない方は、「外観」⇒「テーマの編集」⇒「style.css」

その中に、下記で紹介する見出しのCSSをコピーして貼り付けるだけです。張り付けたあとは、ファイルを更新ボタンを忘れず押してくださいね。

CSS
p#sample1{
 border-left: 7px solid #ff0000;
 padding: 7px;
 font-size: 18pt;
 font-weight: bold; 
}

【例】最初の「p#sample1」の部分をお使いになる見出し(h2~h6など)に変更してお使いください。

記事作成画面の入力は下記の通り

HTML
<h2>見出し2</h2>

※お使いのテーマによっては、(h2~h6など)を設定するとデザインが崩れる場合があります。

その場合は、「class」を使って設定すれば大丈夫です。

次は、「class」を使った見出しCSSの設定方法についてご紹介します。

「class」を使って見出しデザインを変更する方法

上記と同じでお使いのテーマの中の「style.css」に貼り付けます。

CSS
p#sample1{
 border-left: 7px solid #ff0000;
 padding: 7px;
 font-size: 18pt;
 font-weight: bold; 
}

※上記の「p#sample1」の部分を先ほどは変更しましたが今回はこのままでもOKです!

あなたの分かりやすいものにしてもOKです。

そして、記事作成画面では下記のように記載すれば「class」を使った見出しになります。

記事作成画面の入力は下記の通り

HTML
<h2 class="p#sample1">見出し2</h2>

※「p#sample1」の部分を変更した場合は変更した文字にして書いてくださいね。

これで、見出しCSSの設定方法の説明は終わります。

次に、実際に使える見出しCSSのデザインサンプルをご紹介します。

見出しデザインのサンプル見本

まずは、見本です。それぞれ、何を設定しているのか簡単に説明しますのでサンプルを変更しあなただけのデザインに変更したい場合は参考にしてください。

CSS
.midasi00{  
     color:#000; /*文字色*/
     background:#fff; /*背景色*/
     border-top:1px solid #ccc; /*上線の太さ、種類、色*/
     border-right:1px solid #ccc; /*右線の太さ、種類、色*/
     border-left:1px solid #ccc; /*左線の太さ、種類、色*/
     border-bottom:1px solid #ccc; /*下線の太さ、種類、色*/
     padding:.8em .9em .8em .9em; /*上下左右の間隔*/
     font-weight: bold; /*文字を太くする場合*/
     background-image:url(画像のURL); /*背景に使用する画像のURL*/
}

color

見出しの文字色をカラーコードで指定します。文字色を変更しない場合は、記載の必要はありません。

background

見出しの背景色をカラーコードで指定します。背景色を変更しない場合は、記載の必要はありません。

border(top,right,left,bottom)

「px」で線の太さを指定します。線の種類は「solid(実線)」「double(2重線)」「dotted(点線)」「dashed(破線)」など数種類の線が使用できます。線の色をカラーコードで指定します。

padding

上下左右の間隔を指定します。
値を1つだけ記述した場合は「上下左右」の間隔を指定します。
値を2つ記述した場合は「上下」「左右」の間隔を指定します。
値を3つ記述した場合は「上」「左右」「下」の順に間隔を指定します。
値を4つ記述した場合は「上」「右」「下」「左」の順に間隔を指定します。

font-weight: bold

見出しの部分の文字を太くする場合は、記載します。

background-image

背景に画像を使用したい場合は画像のURLを記述します。画像を使わない場合は、記載の必要はありません。

では、ここから実際にコピペでOKな見出しCSSのサンプル集をご紹介していきます。

シンプルなデザインのサンプル

1.左線

CSS
p#sample1{
	border-left: 7px solid #ff0000;
	padding: 7px;
	font-size: 18pt;
	font-weight: bold; 
}


2.左線+下線

CSS
p#sample2{
	border-left: 7px solid #ff0000;
	border-bottom: 1px solid #ff0000;
	padding: 7px;
	font-size: 18pt;
	font-weight: bold;
}


3.左線+下線(点線)

CSS
p#sample3{
	border-left: 7px solid #ff0000;
	border-bottom: 1px dotted #ff0000;
	padding: 7px;
	font-size: 18pt;
	font-weight: bold;
}


4.左線+下線(大きめの点線)

CSS
p#sample4{
	border-left: 7px solid #ff0000;
	border-bottom: 1px dashed #ff0000;
	padding: 7px;
	font-size: 18pt;
	font-weight: bold;
}


5.二本の左線

CSS
p#sample5{
	border-left: 7px double #ff0000;
	padding: 7px;
	font-size: 18pt;
	font-weight: bold;
}


6.二本の左線+下線

CSS
p#sample6{
	border-left: 7px double #ff0000;
	border-bottom: 1px solid #ff0000;
	padding: 7px;
	font-size: 18pt;
	font-weight: bold;
}


7.二本の左線+下線(点線)

CSS
p#sample7{
	border-left: 7px double #ff0000;
	border-bottom: 1px dotted #ff0000;
	padding: 7px;
	font-size: 18pt;
	font-weight: bold;
}


8.二本の左線+下線(大きめの点線)

CSS
p#sample8{
	border-left: 7px double #ff0000;
	border-bottom: 1px dashed #ff0000;
	padding: 7px;
	font-size: 18pt;
	font-weight: bold;
}


9.上下線

CSS
p#sample9{
	border-top: 3px double #ff0000;
	border-bottom: 3px double #ff0000;
	padding: 7px;
	font-size: 18pt;
	font-weight: bold;
}


10.二本線で囲む

CSS
p#sample10{
	border-top: 3px double #2e8b57;
	border-left: 7px double #2e8b57;
	border-right: 7px double #2e8b57;
	border-bottom: 3px double #2e8b57;
	padding: 7px;
	font-size: 18pt;
	font-weight: bold;
}


11.立体的なボックス風

CSS
p#sample11{
	border-top: 3px double #ff0000;
	border-left: 7px solid #ff0000;
	border-bottom: 3px double #ff0000;
	padding: 7px;
	font-size: 18pt;
	font-weight: bold;
}


12.立体的なボックス風

CSS
p#sample12{
	background:#fff0f5;
	border-top: 7px double #ff0000;
	border-left: 7px solid #ff0000;
	border-right: 7px solid #ff0000;
	border-bottom: 7px double #ff0000;
	padding: 7px;
	font-size: 18pt;
	font-weight: bold;
}


13.二重線

CSS
p#sample17{
	margin: 0 0 1.5em;
	padding-left: 5px;
	border-bottom: double 10px #000080;
	border-left: double 10px #000080;
	font-size: 18pt;
	font-weight: bold;
}


14.左右に日本線

CSS
p#sample19{
	border-top: solid 1px #ff0000;
	border-right: double 18px #ff0000;
	border-bottom: solid 1px #ff0000;
	border-left: double 18px #ff0000;
	padding: 7px;
	font-size: 18pt;
	font-weight: bold;
	background: #fffaf0;
}


15.角が丸いボックス型

CSS
p#sample13{
	border: 2px solid #fa8072;
	padding: 7px;
	font-size: 18pt;
	font-weight: bold;
	border-radius: 10px;
	background: #fffaf0;
}


16.丸型

CSS
p#sample14{
	border: 4px double #ff69b4;
	margin: 0 0 1.5em;
	padding: 0.2em 0.2em 0.2em 0.8em;
	font-size: 18pt;
	font-weight: bold;
	border-radius: 30px;
	background: #fffaf0;
}


17.ロケットの形風

CSS
p#sample15{
	border: 2px solid #ff0000;
	padding: 0.2em 0.2em 0.2em 0.8em;
	font-size: 18pt;
	font-weight: bold;
	border-radius: 100px 25px 25px 100px / 50px 25px 25px 50px;
	background: #fffaf0;
}


18.タグ風

CSS
p#sample16{
	position: relative;
	border: 2px solid #ff0000;
	padding: 0.3em 0.3em 0.3em 1.2em;
	font-size: 18pt;
	font-weight: bold;
	background: #fffaf0;
}

p#sample16:before{
	content: "";
	position: absolute;
	background: #ff0000;
	top: 50%;
	left: 0.5em;
	margin-top :-15px;
	height: 30px;
	width: 8px;
	font-size: 18pt;
	border-radius: 2px;
	border-radius: 2px;
}


19.立体のボックス風

CSS
p#sample18{
	background: #fffaf0;
	border-top: solid 15px #a52a2a;
	border-right: double 15px #a52a2a;
	border-bottom: solid 15px #a52a2a;
	border-left: double 15px #a52a2a;
	padding: 7px;
	font-size: 18pt;
	font-weight: bold;
	border-radius: 30px;
}
【スポンサーリンク】

オシャレなデザインのサンプル

20.四角が二つ

CSS
p#sample20{
	position: relative;
	font-size: 18pt;
	font-weight: bold;
	margin: 0 0 1.5em;
	padding: 0.2em 0.5em 0.1em 1.8em;
	border-bottom: 2px solid #ff0000;
}
p#sample20:before{
	content: "□";
	font-size: 120%;
	position: absolute;
	color: #ff0000;
	top: -0.1em;
	left: 0.3em;
	height: 10px;
	width: 12px;
}
 
p#sample20:after{
	content: "□";
	font-size: 120%;
	position: absolute;
	color: #ff1493;
	top: -0.5em;
	left: 0;
	height: 10px;
	width: 12px;
}


21.四角が二つ+色付け

CSS
p#sample21{
	position: relative;
	font-size: 18pt;
	font-weight: bold;
	margin: 0 0 1.5em;
	padding: 0.2em 0.5em 0.4em 3em;
	border-bottom: 2px solid #ff0000;
}
 
p#sample21:before{
	content: "■";
	font-size: 200%;
	position: absolute;
	color: #ff0000;
	top: 0.5px;
	left: 0.5px;
	width: 18px;
	height: 19px;
}
 
p#sample21:after{
	content: "■";
	font-size: 200%;
	position: absolute;
	color: #ffb6c1;
	top: 9px;
	left: 9px;
	width: 15px;
	height: 15px;
}


22.四角が二つの別デザイン

CSS
p#sample22{
	position: relative;
	font-size: 18pt;
	font-weight: bold;
	margin: 0 0 1.5em;
	padding: 0.2em 0.5em 0.4em 3em;
	border-bottom: 3px solid #ff6699;
}

p#sample22:before {
    position:  absolute;
    top: 11px;
    left: 11px;
    width: 13px;
    height: 13px;
    border: 4px solid #ff99cf;
    content: "";
}

p#sample22:after {
    position:  absolute;
    top: 1px;
    left: 1px;
    width: 16px;
    height: 16px;
    border: 4px solid #ff1493;
    content: "";
}


23.四角が二つの別デザイン

CSS
p#sample23{
	position: relative;
	font-size: 18pt;
	font-weight: bold;
	margin: 0 0 1.5em;
	padding: 0.2em 0.5em 0.4em 2em;
	border-bottom: 3px solid #ff6699;
}

p#sample23:before {
    position: absolute;
    top: 11px;
    left: 0;
    width: 16px;
    height: 16px;
    border: 2px solid #ff6699;
    content: "";
}

p#sample23:after {
    position: absolute;
    top: 3px;
    left: 9px;
    width: 13px;
    height: 13px;
    border: 2px solid #ff6699;
    content: "";
}


24.四角が二つの別デザイン

CSS
p#sample24{
	position: relative;
	font-size: 18pt;
	font-weight: bold;
	margin: 0 0 1.5em;
	padding: 0.2em 0.5em 0.4em 2em;
	border-bottom: 3px solid #ff6699;
}

p#sample24:before {
    position: absolute;
    top: -8px;
    left: 7px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    height: 12px;
    width: 12px;
    background: #ff1493;
    content: "";
}

p#sample24:after {
    position: absolute;
    top: 8px;
    left: 2px;
    transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
    height: 8px;
    width: 8px;
    background: #ff99cf;
    content: "";
}


25.蛍光ペン風

CSS
p#sample32{
font-weight: bold;
background: linear-gradient(transparent 50%, #adff2f 0%);
}


26.2色のボーダー

CSS
p#sample33{
font-weight: bold;
border-bottom: solid 3px skyblue;
position: relative;
}

p#sample33:after {
position: absolute;
content: " ";
display: block;
border-bottom: solid 3px #000080;
bottom: -3px;
width: 10%;
}


27.グラデーション

CSS
p#sample38{
position: relative;
padding: 0.25em 0;
}
p#sample38:after {
content: "";
display: block;
height: 4px;
background: -moz-linear-gradient(to right, rgb(255, 160, 122), transparent);
background: -webkit-linear-gradient(to right, rgb(255, 160, 122), transparent);
background: linear-gradient(to right, rgb(255, 160, 122), transparent);
}


28.グラデーション

CSS
p#sample40{
font-weight: bold;
position: relative;
padding: 0.1em 0.5em;
background: -moz-linear-gradient(to right, rgb(255, 182, 193), transparent);
background: -webkit-linear-gradient(to right, rgb(255, 182, 193), transparent);
background: linear-gradient(to right, rgb(255, 182, 193), transparent);
color: #545454;
/* display: inline-block; */
}


29.2色のボーダー

CSS
p#sample39{
position: relative;
padding: 0.25em 0;
}
p#sample39:after {
content: "";
display: block;
height: 4px;
background: -moz-linear-gradient(to right, rgb(255, 160, 122), #db7093);
background: -webkit-linear-gradient(to right, rgb(255, 160, 122), #db7093);
background: linear-gradient(to right, rgb(255, 160, 122), #db7093);
}


30.左線と塗り

CSS
p#sample25{

	border-left: 25px solid #ff6600;
	padding: 7px;
	background: #ffcc99;
	border-radius: 20px;
	font-size: 18pt;
	color: #000000;
	font-weight: bold; 
}


31.左線と塗り(立体)

CSS
p#sample26{

	border-left: 25px solid #ff6600;
	padding: 7px;
	background: #ffcc99;
	border-radius: 20px;
	box-shadow: 3px 3px 3px;
	font-size: 18pt;
	color: #000000;
	font-weight: bold; 
}


32.左線と四角い塗り(立体)

CSS
p#sample27{

	border-left: 25px solid #ff6600;
	padding: 7px;
	background: #ffcc99;
	border-radius: 10px;
	box-shadow: 3px 3px 3px;
	font-size: 18pt;
	color: #000000;
	font-weight: bold; 
}


33.両線と四角い塗り(立体)

CSS
p#sample28{

	border-left: 25px solid #ff6600;
	border-right: 25px solid #ff6600;
	padding: 7px;
	background: #ffcc99;
	border-radius: 10px;
	box-shadow: 3px 3px 3px;
	font-size: 18pt;
	color: #000000;
	font-weight: bold; 
}


34.ステッチ風

CSS
p#sample29{
	position: relative;
	font-size: 18pt;
	font-weight: bold;
	margin: 0 0 1.5em;
	padding: 0.2em 0.2em 0.2em 0.6em;
	background:#f4b3c2;
	width:95%;
	border: 2px dashed #e8ecef;
	border-radius:5px;
	box-shadow: 0 0 5px 5px #f4b3c2;
}


35.二重線

CSS
p#sample30{
	position: relative;
	font-size: 18pt;
	font-weight: bold;
	margin: 0 0 1.5em;
	padding: 0.2em 0.2em 0.2em 0.6em;
	background:#f4b3c2;
	width:95%;
	border: 2px double #e8ecef;
	border-radius:5px;
	box-shadow: 0 0 3px 3px #f4b3c2;
}


36.タグ風

CSS
p#sample31{
color: #505050;
font-size: 18pt;
font-weight: bold;
padding: 0.5em;
line-height: 1.3;
background: #ffc0cb;
vertical-align: middle;
border-radius: 25px 0px 0px 25px;
}

p#sample31:before {
content: '●';
color: white;
margin-right: 8px;
}


37.左側を尖らせたような形

CSS
p#sample34{
font-weight: bold;
position: relative;
padding: 5px 26px 5px 93px;
background: #b0c4de;
font-size: 20px;
color: #ffffff;
margin-left: -33px;
line-height: 1.3;
border-bottom: double 3px #000080;
}

p#sample34:before {
position: absolute;
content: '';
left: -2px;
top: -2px;
width: 0;
height: 0;
border: none;
border-bottom: solid 50px transparent;
border-left: solid 110px #ffffff;/*記事の背景の色と同じにする*/
z-index: 2;
}


38.左側を尖らせたような形

CSS
p#sample344{
font-weight: bold;
position: relative;
padding: 5px 26px 5px 40px;
background: #ffc0cb;
font-size: 20px;
color: #ffffff;
margin-left: -13px;
line-height: 1.3;
border-bottom: solid 3px #db7093;
}

p#sample344:before {
position: absolute;
content: '';
left: -2px;
top: -2px;
width: 0;
height: 0;
border: none;
border-bottom: solid 50px transparent;
border-left: solid 35px #ffffff;/*記事の背景の色と同じにする*/
z-index: 2;
}


39.文字が光っているように見えるバー

CSS
p#sample68{
position: relative;
background: #191970;
color: #ffffff;
text-shadow: 0 0 5px #ffffff;
padding: 3px 3px 3px 10px;
}


40.両側が浮いているように見えるバー

CSS
p#sample56{
	position: relative;
	padding: .5em .75em;
	background-color: #ffc0cb;
}
p#sample56:before,
p#sample56:after {
	position: absolute;
	bottom: 8px;
	z-index: -1;
	content: '';
	width: 30%;
	height: 50%;
	box-shadow: 0 10px 15px rgba(0, 0, 0, .2);
}
p#sample56:before {
	-webkit-transform: rotate(-3deg);
	transform: rotate(-3deg);
	left: .3em;
}
p#sample56:after {
	-webkit-transform: rotate(3deg);
	transform: rotate(3deg);
	right: .3em;
}


41.内側に凹んで見えるバー

CSS
p#sample57{
	padding: .5em .75em;
	background: #ffc0cb;
	box-shadow: 0 7px 10px -5px rgba(0, 0, 0, .1) inset;
}


42.吹き出し

CSS
p#sample51{
	position: relative;
	padding: .5em .75em;
	background-color: #ffb6c1;
	border-radius: 6px;
}
p#sample51:after {
	position: absolute;
	top: 100%;
	left: 10px;
	content: '';
	width: 0;
	height: 0;
	border: 10px solid transparent;
	border-top: 15px solid #ffb6c1;
}


43.リボン風

CSS
p#sample52{
	position: relative;
	padding: .75em 1em;
	background-color: #ffb6c1;
}
p#sample52:before,
p#sample52:after {
	content: '';
	position: absolute;
	top: 100%;
	border-style: solid;
	border-color: transparent;
}
p#sample52:before {
	left: 0;
	border-width: 0 15px 15px 0;
	border-right-color: #db7093;
}
p#sample52:after {
	right: 0;
	border-style: solid;
	border-width: 15px 15px 0 0;
	border-top-color: #db7093;
}


44.リボン風

CSS
p#sample53{
	position: relative;
	height: 50px;
	line-height: 50px;
	padding-left: 1.4em;
	background-color: #db7093;
}
p#sample53:before,
p#sample53:after {
	content: '';
	position: absolute;
}
p#sample53:before {
	top: 0;
	left: 0;
	z-index: 2;
	border-width: 25px 20px;
	border-style: solid;
	border-color: transparent;
	border-left-color: #fff;
}
p#sample53:after {
	top: 0;
	right: 0;
	z-index: 2;
	border-width: 25px 20px;
	border-style: solid;
	border-color: transparent;
	border-right-color: #fff;
}


45.ボーダーのリボン

CSS
p#sample533{
	position: relative;
	height: 50px;
	line-height: 50px;
	padding-left: 1.4em;
background: -webkit-repeating-linear-gradient(-30deg, #fffaf0, #fffaf0 3px,#ffebcd 3px, #ffebcd 7px);
background: repeating-linear-gradient(-30deg, #fffaf0, #fffaf0 3px,#ffebcd 3px, #ffebcd 7px);

}
p#sample533:before,
p#sample533:after {
	content: '';
	position: absolute;
}
p#sample533:before {
	top: 0;
	left: 0;
	z-index: 2;
	border-width: 25px 20px;
	border-style: solid;
	border-color: transparent;
	border-left-color: #fff;
}
p#sample533:after {
	top: 0;
	right: 0;
	z-index: 2;
	border-width: 25px 20px;
	border-style: solid;
	border-color: transparent;
	border-right-color: #fff;
}


46.角が剥がれているようなデザイン

CSS
p#sample54{
position: relative;
background: #fffacd;
box-shadow: 0px 0px 0px 5px #f0e68c;
padding: 0.2em 0.5em;
color: #454545;
}

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


47.ステッチ風

CSS
p#sample55{
position: relative;
background: #808000;
box-shadow: 0px 0px 0px 5px #999900;
border: dashed 2px #ffffff;
padding: 0.2em 0.5em;
color: #ffffff;
}


48.ボーダー

CSS
p#sample555{
position: relative;
font-weight: bold;
background: -webkit-repeating-linear-gradient(-30deg, #e0ffff, #e0ffff 3px,#f0ffff 3px, #f0ffff 7px);
background: repeating-linear-gradient(-30deg, #e0ffff, #e0ffff 3px,#f0ffff 3px, #f0ffff 7px);
box-shadow: 0px 0px 0px 5px #b0e0e6;
padding: 0.2em 0.5em;
color: #000000;
}


49.手書き風

CSS
p#sample50{
position: relative;
padding: 1em;
border-radius: 4em .6em 4em .6em/.8em 3em .9em 5em;
border: 1px solid  #f4b3c2;
font-size: 18pt;
font-weight: bold;
margin: 0 0 1.5em;
padding: 0.2em 0.2em 0.2em 0.6em;
background:#f4b3c2;
width:95%;
box-shadow: 0 0 3px 3px #f4b3c2;
}


50.矢印

CSS
p#sample66{
position: relative;
padding-left: 43px;
border-bottom: solid 3px #00008b;
}

p#sample66:before {
position: absolute;
content: '';
bottom: -3px;
left: -0.5em;
width: 0;
height: 0;
border-left: solid 35px transparent;
border-bottom: solid 15px #00008b;
}


51.最初の文字のデザインを変える

CSS
p#sample67:first-letter {
font-size: 2.5em;
color: #000080;
}


52.ボーダー

CSS
p#sample36{
color: #000000;
font-size: 12pt;
font-weight: bold;
padding: 0.25em;
border-left: solid 7px #ff69b4;
background: -webkit-repeating-linear-gradient(-30deg, #ffc0cb, #ffc0cb 3px,#fff0f5 3px, #fff0f5 7px);
background: repeating-linear-gradient(-30deg, #ffc0cb, #ffc0cb 3px,#fff0f5 3px, #fff0f5 7px);
}


53.ボーダーの下線

CSS
p#sample37{
position: relative;
font-weight: bold;
}

p#sample37:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 7px;
background: -webkit-repeating-linear-gradient(-30deg, #ff7f50, #ff7f50 2px, #fffaf0 2px, #fffaf0 4px);
background: repeating-linear-gradient(-30deg, #ff7f50, #ff7f50 2px, #fffaf0 2px, #fffaf0 4px);
box-shadow: 1px 1px 1px;
}

アイコンを使ったデザインのサンプル

FontAwesomeを使うことでアイコンを使った見出しも簡単に出来ちゃいます!

FontAwesomeを使うには、wordPressのヘッダーにある魔法の一文を入れるだけで使えるようになります。

(もう一つ、アイコンをダウンロードして使う方法もありますが私的には、この方法がオススメ!なので、ダウンロードして使う方法の説明は省かせてもらいます)

下記のコードをコピーして、お使いのテーマの編集でヘッダー部分に入れてください。

コード
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

上記コードを<head>〜</head>の中に貼り付けてください。

それをすると、下記のCSSをそのまま使えばアイコン付きの見出しが使えるようになります。

アイコンを変更する場合

アイコンを変えたい場合は、FontAwesomeのサイトのアイコン一覧から好きなアイコンを選びその中に書いてあるUnicode:をコピーして変更すればOKです。

CSS
content: "\f046";/*アイコンのユニコードを記入*/

の黄色の部分をそのアイコンのユニコードに変更すればOKです!



54.二重線とアイコン

CSS
p#sample46{
position: relative;
padding-left: 1.2em;
padding-top: 0.3em;
padding-bottom: 0.3em;
padding-right: 0.3em;
line-height: 1.4;
border-top: 3px double #00008b;
border-bottom: 3px double #00008b;
font-weight: bold;
}

p#sample46:before{ font-family: FontAwesome;
content: "\f046";/*アイコンのユニコードを記入*/
position: absolute;
left: 0;
color: #5ab9ff;
top: 50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}


55.アイコン付きのボーダー

CSS
p#sample35{
position: relative;
color: #000000;
font-size: 12pt;
font-weight: bold;
border-top: dashed 2px #d2691e;
border-bottom: dashed 2px #d2691e;
padding-left: 1.9em;
padding-top: 0.25em;
padding-right: 0.25em;
padding-bottom: 0.25em;
background: -webkit-repeating-linear-gradient(-30deg, #fffaf0, #fffaf0 3px,#ffebcd 3px, #ffebcd 7px);
background: repeating-linear-gradient(-30deg, #fffaf0, #fffaf0 3px,#ffebcd 3px, #ffebcd 7px);
}

p#sample35:before{ 
font-family: FontAwesome;
content: "\f064";
position: absolute;
font-size: 1em;
left: 0.5em;
color: #800000;
}


56.両線とボーダー

CSS
p#sample49{
position: relative;
line-height: 200%;
color: #000000;
font-size: 12pt;
font-weight: bold;
border-left: 29px solid #4169e1;
border-right: 29px solid #4169e1;
padding: 10px;
border-radius: 7px;
padding: 0.25em;
background: -webkit-repeating-linear-gradient(-30deg, #b0c4de, #b0c4de 3px,#e0ffff 3px, #e0ffff 7px);
background: repeating-linear-gradient(-30deg, #b0c4de, #b0c4de 3px,#e0ffff 3px, #e0ffff 7px);
}

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


57.両線とボーダー

CSS
p#sample499{
position: relative;
line-height: 200%;
color: #000000;
font-size: 12pt;
font-weight: bold;
border-left: 34px solid #ff8c00;
border-right: 34px solid #ff8c00;
padding: 10px;
border-radius: 30px;
padding: 0.25em;
background: -webkit-repeating-linear-gradient(-30deg, #fffaf0, #fffaf0 3px,#ffebcd 3px, #ffebcd 7px);
background: repeating-linear-gradient(-30deg, #fffaf0, #fffaf0 3px,#ffebcd 3px, #ffebcd 7px);
}

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


58.左にアイコン

CSS
p#sample43{
position: relative;
background: -webkit-repeating-linear-gradient(-30deg, #fffaf0, #fffaf0 3px,#ffebcd 3px, #ffebcd 7px);
background: repeating-linear-gradient(-30deg, #fffaf0, #fffaf0 3px,#ffebcd 3px, #ffebcd 7px);
padding: 0.25em 0.5em;
border-left: solid 2.5em #ffa07a;
}

p#sample43:before {
font-family: FontAwesome;
content: "\f001";
position: absolute;
padding: 0em;
color: white;
left: -1.75em;
top: 50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}


59.左にアイコン

CSS
p#sample45{
position: relative;
background: -webkit-repeating-linear-gradient(-30deg, #e0ffff, #e0ffff 3px,#afeeee 3px, #afeeee 7px);
background: repeating-linear-gradient(-30deg, #e0ffff, #e0ffff 3px,#afeeee 3px, #afeeee 7px);
padding: 0.25em 0.5em;
border-left: solid 2.5em #4169e1;
border-top: solid 0.1em #4169e1;
border-bottom: solid 0.1em #4169e1;
border-right: solid 0.1em #4169e1;
}

p#sample45:before {
font-family: FontAwesome;
content: "\f1b9";
position: absolute;
padding: 0em;
color: #ffffff;
left: -1.89em;
top: 50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}


60.両側にアイコン

CSS
p#sample433{
position: relative;
background: -webkit-repeating-linear-gradient(-30deg, #fffaf0, #fffaf0 3px,#ffebcd 3px, #ffebcd 7px);
background: repeating-linear-gradient(-30deg, #fffaf0, #fffaf0 3px,#ffebcd 3px, #ffebcd 7px);
padding: 0.25em 0.5em;
border-left: solid 2.5em #ffa07a;
border-right: solid 2.5em #ffa07a;
}

p#sample433:before {
font-family: FontAwesome;
content: "\f001";
position: absolute;
padding: 0em;
color: white;
left: -1.75em;
top: 50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}

p#sample433:after {
font-family: FontAwesome;
content: "\f001";
position: absolute;
padding: 0em;
color: white;
right: -1.75em;
top: 50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}


61.両側にアイコン

CSS
p#sample60{
position: relative;
padding: 3px 5px 3px 34px;
font-weight: bold;
background: -webkit-repeating-linear-gradient(-30deg, #fffaf0, #fffaf0 3px,#ffebcd 3px, #ffebcd 7px);
background: repeating-linear-gradient(-30deg, #fffaf0, #fffaf0 3px,#ffebcd 3px, #ffebcd 7px);
line-height: 32px;
}

p#sample60:before {
font-family: FontAwesome;
content: "\f0da";
display: inline-block;
position: absolute;
padding: 0em;
color: white;
background: #ffa07a;
width: 45px;
text-align: center;
height: 45px;
line-height: 45px;
left: -1em;
top: 50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
border-radius: 25%;
}

p#sample60:after {
font-family: FontAwesome;
content: "\f0d9";
display: inline-block;
position: absolute;
padding: 0em;
color: white;
background: #ffa07a;
width: 45px;
text-align: center;
height: 45px;
line-height: 45px;
right: -1em;
top: 50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
border-radius: 25%;
}


62.左側にアイコン

CSS
p#sample44{
position: relative;
background: #faf0e6;
padding: 2px 5px 2px 38px;
font-size: 20px;
color: #474747;
border-radius: 0em 10em 10em 0em;
box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}

p#sample44:before {
font-family: FontAwesome;
content: "\f0a4";
display: inline-block;
position: absolute;
padding: 0em;
color: white;
background: #ff6363;
width: 50px;
text-align: center;
height: 50px;
line-height: 50px;
left: -1em;
top: 50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
border-radius: 20%;
box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}


63.左側にアイコンとグラデーション

CSS
p#sample48{
position: relative;
background: -moz-linear-gradient(to right, rgb(255, 215, 0), transparent);
background: -webkit-linear-gradient(to right, rgb(255, 215, 0), transparent);
background: linear-gradient(to right, rgb(255, 215, 0), transparent);
padding: 2px 5px 2px 38px;
font-size: 20px;
color: #474747;
border-radius: 0 10px 10px 0;
}

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


64.左側にアイコン

CSS
p#sample59{
position: relative;
padding: 2px 5px 2px 28px;
font-weight: bold;
}

p#sample59:before {
font-family: FontAwesome;
content: "\f061	";
display: inline-block;
position: absolute;
padding: 0em;
color: white;
background: #1e90ff;
width: 40px;
text-align: center;
height: 40px;
line-height: 40px;
left: -1em;
top: 50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
border-radius: 90px 90px 0 0 ;
}


65.左側のアイコンの位置をちょっと上に

CSS
p#sample5444{
position: relative;
background: #faf0e6;
padding: 2px 5px 2px 24px;
font-weight: bold;
font-size: 20px;
color: #474747;
border-radius: 10em;
margin: 2.5em 1em 1em 1em;
}

p#sample5444:before {
font-family: FontAwesome;
content: "\f0a4";
transform: rotate(30deg);
display: inline-block;
position: absolute;
padding: 0em;
color: white;
background: #ff6363;
width: 40px;
text-align: center;
height: 40px;
line-height: 40px;
left: -1em;
top: -60%;
border-radius: 20%;
}


66.左側のアイコンの位置をちょっと下に

CSS
p#sample544{
position: relative;
background: #faf0e6;
padding: 2px 5px 2px 24px;
font-weight: bold;
font-size: 20px;
color: #474747;
border-radius: 10em;
margin: 1em 1em 2.5em 1em;
}

p#sample544:before {
font-family: FontAwesome;
content: "\f0a4";
transform: rotate(-30deg);
display: inline-block;
position: absolute;
padding: 0em;
color: white;
background: #ff6363;
width: 40px;
text-align: center;
height: 40px;
line-height: 40px;
left: -1em;
top: 60%;
border-radius: 20%;
}


67.左側のアイコンの位置をちょっと上に

CSS
p#sample54444{
position: relative;
padding: 2px 5px 2px 24px;
font-weight: bold;
font-size: 20px;
color: #474747;
margin: 2.5em 1em 1em 1em;
}

p#sample54444:before {
font-family: FontAwesome;
content: "\f0a4";
transform: rotate(30deg);
display: inline-block;
position: absolute;
padding: 0em;
color: white;
background: #ff6363;
width: 40px;
text-align: center;
height: 40px;
line-height: 40px;
left: -1em;
top: -60%;
border-radius: 20%;
}

p#sample54444:after {
content: "";
position: absolute;
left: 0;
bottom: -0.3em;
width: 100%;
height: 7px;
background: -webkit-repeating-linear-gradient(-30deg, #ff7f50, #ff7f50 2px, #fffaf0 2px, #fffaf0 4px);
background: repeating-linear-gradient(-30deg, #ff7f50, #ff7f50 2px, #fffaf0 2px, #fffaf0 4px);
}


68.立体的なバーにアイコン

CSS
p#sample47{
position: relative;
padding: 10px 18px 10px 29px;
line-height: 1.4;
background:#d35400;
color: #fff;
box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}

p#sample47:before{ 
font-family: FontAwesome;
content: "\f004";
position: absolute;
left: 0.5em;
color: #ffebcd;
top: 50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}


69.立体的なバーにアイコン

CSS
p#sample65{
position: relative;
padding: 10px 18px 10px 38px;
font-size: 1.75em;
line-height: 1.4;
background:#ffc0cb;
color: #fff;
font-size: 1.75em;
box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}

p#sample65:before{ font-family: FontAwesome;
content: "\f004";
position: absolute;
font-size: 1em;
left: 0.2em;
color: #ff1493;
top: 50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}


70.ステッチ風にアイコン

CSS
p#sample58{
position: relative;
background: #87cefa;
box-shadow: 0px 0px 0px 5px #87cefa;
border: dashed 2px #ffffff;
padding-left: 1.9em;
padding-top: 0.25em;
padding-right: 0.25em;
padding-bottom: 0.25em;
font-weight: bold;
color: #ffffff;
}

p#sample58:before{ 
font-family: FontAwesome;
content: "\f041";
position: absolute;
font-size: 1em;
left: 0.5em;
color: #191970;
}


71.ステッチ風にアイコン(丸型)

CSS
p#sample588{
position: relative;
background: #87cefa;
box-shadow: 0px 0px 0px 5px #87cefa;
border: dotted 2px #ffffff;
padding-left: 1.9em;
padding-top: 0.25em;
padding-right: 0.25em;
padding-bottom: 0.25em;
font-weight: bold;
color: #ffffff;
border-radius: 20px;
}

p#sample588:before{ 
font-family: FontAwesome;
content: "\f041";
position: absolute;
font-size: 1em;
left: 0.5em;
color: #191970;
}


72.三角形にアイコン

CSS
p#sample61{
	position: relative;
	height: 50px;
	line-height: 50px;
	padding-left: 2.4em;
}
p#sample61:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	border-width: 25px 35px;
	border-style: solid;
	border-color: transparent;
	border-left-color: #fa8072;
	z-index: 1;
}

p#sample61:after {
font-family: FontAwesome;
content: "\f040	";
line-height: 40px;
position: absolute;
padding: 0em;
color: #ffffff;
left: 0.4em;
top: 50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 2;
}


73.三角形にアイコン

CSS
p#sample62{
	position: relative;
	height: 50px;
	line-height: 50px;
	padding-left: 2.4em;
	background-color: #fff8dc;
}
p#sample62:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	border-width: 25px 35px;
	border-style: solid;
	border-color: transparent;
	border-left-color: #fa8072;
	z-index: 1;
}

p#sample62:after {
font-family: FontAwesome;
content: "\f040	";
line-height: 40px;
position: absolute;
padding: 0em;
color: #ffffff;
left: 0.4em;
top: 50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 2;
}


74.三角形にアイコン(立体)

CSS
p#sample63{
	position: relative;
	height: 50px;
	line-height: 50px;
	padding-left: 2.4em;
	background-color: #fff8dc;
	border-radius: 0 30px 30px 0;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}
p#sample63:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	border-width: 25px 35px;
	border-style: solid;
	border-color: transparent;
	border-left-color: #fa8072;
	z-index: 1;
}

p#sample63:after {
font-family: FontAwesome;
content: "\f040	";
line-height: 40px;
position: absolute;
padding: 0em;
color: #ffffff;
left: 0.4em;
top: 50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 2;
}


75.三角形にアイコン(ボーダー)

CSS
p#sample64{
	position: relative;
	height: 50px;
	line-height: 50px;
	padding-left: 2.4em;
background: -webkit-repeating-linear-gradient(-30deg, #fffaf0, #fffaf0 3px,#ffebcd 3px, #ffebcd 7px);
background: repeating-linear-gradient(-30deg, #fffaf0, #fffaf0 3px,#ffebcd 3px, #ffebcd 7px);

}
p#sample64:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	border-width: 25px 35px;
	border-style: solid;
	border-color: transparent;
	border-left-color: #fa8072;
z-index: 1;
}

p#sample64:after {
font-family: FontAwesome;
content: "\f040	";
line-height: 40px;
position: absolute;
padding: 0em;
color: #ffffff;
left: 0.4em;
top: 50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 2;
}


76.タグ付きのバー

CSS
p#sample41{
position: relative;
color: black;
border-top: double 3px #ffa500;
border-bottom: double 3px #ffa500;
background: #ffebcd;
line-height: 1.4;
padding: 0.25em 0.5em;
margin: 2em 0 0.5em;
font-weight: bold;
}

p#sample41:after {
position: absolute;
font-family: FontAwesome,'Quicksand','Avenir','Arial',sans-serif;
content: '\f0e5\ 注目!';
line-height: 1.3;
background: #ffa500;
color: #fff;
left: -0.3px;
bottom: 100%;
border-radius: 30px 30px 0 0;
padding: 3px 10px 1px;
font-size: 0.9em;
letter-spacing: 0.2em;
}


77.タグ付きのバー

CSS
p#sample42{
position: relative;
font-weight: bold;
border-top: solid 2px #ffd700;
border-right: solid 2px #ffd700;
border-left: solid 2px #ffd700;
border-bottom: solid 2px #ffd700;
line-height: 1.4;
margin: 2em 0 0.5em;
padding: 0.3em 0.5em;
background: -webkit-repeating-linear-gradient(30deg, #fffff0, #fffff0 3px,#ffefd5 3px, #ffefd5 7px);
background: repeating-linear-gradient(30deg, #fffff0, #fffff0 3px,#ffefd5 3px, #ffefd5 7px);
box-shadow: 2px 2px 2px;
}

p#sample42:after {
position: absolute;
font-family: FontAwesome,'Quicksand','Avenir','Arial',sans-serif;
content: '\f071\ 注目';
line-height: 1.3;
background: #ffd700;
color: #000000;
left: -2px;
font-weight: bold;
bottom: 100%;
border-radius: 5px 5px 0 0;
padding: 5px 7px 3px;
font-size: 0.8em;
}


78.タグ付きのバー

CSS
p#sample442{
position: relative;
font-weight: bold;
border-top: solid 3px #ffd700;
line-height: 1.4;
margin: 2em 0 0.5em;
padding: 0.3em 0.5em;
background: #fffaf0;
box-shadow: 1px 1px 1px;
}

p#sample442:after {
position: absolute;
font-family: FontAwesome,'Quicksand','Avenir','Arial',sans-serif;
content: '\大事';
line-height: 1.3;
background: #ffd700;
color: #000000;
left: -2px;
font-weight: bold;
bottom: 100%;
border-radius: 5px 5px 0 0;
padding: 5px 7px 3px;
font-size: 0.8em;
letter-spacing: 0.1em
}


79.タグ付きのバー

CSS
p#sample422{
position: relative;
font-weight: bold;
border-top: solid 2px #ff69b4;
border-bottom: solid 2px #ff69b4;
line-height: 1.4;
margin: 2em 0 2em;
padding: 0.3em 0.5em;
background: -webkit-repeating-linear-gradient(30deg, #fff0f5, #fff0f5 3px,#ffe4e1 3px, #ffe4e1 7px);
background: repeating-linear-gradient(30deg, #fff0f5, #fff0f5 3px,#ffe4e1 3px, #ffe4e1 7px);
box-shadow: 2px 2px 2px;
}

p#sample422:after {
position: absolute;
font-family: FontAwesome,'Quicksand','Avenir','Arial',sans-serif;
content: '\f14a\ チェック';
line-height: 1.3;
background: #ff69b4;
color: #000000;
left: -1px;
font-weight: bold;
top: 100%;
border-radius: 0 0 5px 5px;
padding: 5px 7px 3px;
font-size: 0.75em;
letter-spacing: -0.01em;
box-shadow: 2px 2px 2px;
}


80.ワンポイント

CSS
p#sample4222{
position: relative;
font-weight: bold;
line-height: 1.4;
margin: 4em 0 0.5em;
padding: 0.8em 0.8em;
}

p#sample4222:after {
position: absolute;
font-family: FontAwesome,'Quicksand','Avenir','Arial',sans-serif;
content: '\ポイント \f0a7';
transform: rotate(-20deg);
line-height: 1.3;
background: #1e90ff;
color: #ffffff;
left: -20px;
font-weight: bold;
bottom: 85%;
border-radius: 5px;
padding: 5px 7px 3px;
font-size: 0.7em;
}


81.ワンポイント付きのバー

CSS
p#sample42222{
position: relative;
font-weight: bold;
line-height: 1.4;
margin: 4em 0 0.5em;
padding: 0.8em 0.8em;
border-bottom: 2px solid #ff8c00;
background: -webkit-repeating-linear-gradient(-30deg, #fffaf0, #fffaf0 3px,#ffebcd 3px, #ffebcd 7px);
background: repeating-linear-gradient(-30deg, #fffaf0, #fffaf0 3px,#ffebcd 3px, #ffebcd 7px);
box-shadow: 1px 1px 1px;
}

p#sample42222:after {
position: absolute;
font-family: FontAwesome,'Quicksand','Avenir','Arial',sans-serif;
content: '\ポイント \f0a7';
transform: rotate(-20deg);
line-height: 1.3;
background: #ff8c00;
color: #ffffff;
left: -20px;
font-weight: bold;
bottom: 85%;
border-radius: 5px;
padding: 5px 7px 3px;
font-size: 0.7em;
}


82.ワンポイント

CSS
p#sample422222{
position: relative;
font-weight: bold;
line-height: 1.4;
margin: 4em 0 0.5em;
padding: 0.8em 0.8em;
border-bottom: 2px solid #008080;
}

p#sample422222:after {
position: absolute;
font-family: FontAwesome,'Quicksand','Avenir','Arial',sans-serif;
content: '\ポイント \f0a7';
transform: rotate(-20deg);
line-height: 1.3;
background: #008080;
color: #ffffff;
left: -20px;
font-weight: bold;
bottom: 85%;
border-radius: 5px;
padding: 5px 7px 3px;
font-size: 0.7em;
}
【スポンサーリンク】