コピペでできる、記事の見出しデザインサンプル16（CSS）

シンプルなデザインが好きなのでそういうものが多いですが、色や太さを変えるなどして使いやすいかなと思います
サンプルのコードはすべてh2としています。実際に使う見出しに変えて使ってください
パディング（文字の周りの余白）、マージン（見出し要素の周りの余白）はすべてのデザインサンプルで統一しています

１．装飾のない太字の見出し

装飾のない太字の見出し

h2{
 font-weight:bold;
 padding:0.8em 0.5em;
 margin:0.5em;
}

装飾のない太字の見出し（中央寄せ）

h2{
 font-weight:bold;
 text-align:center;
 padding:0.8em 0.5em;
 margin:0.5em;
}

２．背景に色をつけた見出し

背景に色をつけた見出し

h2{
 background-color:#f7f7f7;
 padding:0.8em 0.5em;
 margin:0.5em;
}

３．背景に色をつけ、文字色を白にした見出し

背景に色をつけ、文字色を白にした見出し

h2{
 color: #fff;
 background-color: #6b6767;
 font-weight: bold;
 padding:0.8em 0.5em;
 margin:0.5em;
}

４．下線をつけた見出し

下線の見出し

h2{
 border-bottom: solid 2px #515151;
 padding:0.8em 0.5em;
 margin:0.5em;
}

５．上下線の見出し

上下線の見出し

h2{
 border-top: solid 1px #515151;
 border-bottom: solid 1px #515151;
 padding:0.8em 0.5em;
 margin:0.5em;
}

６．上下破線の見出し

上下破線の見出し

h2{
 border-top: dotted 2px #515151;
 border-bottom: dotted 2px #515151;
 padding:0.8em 0.5em;
 margin:0.5em;
}

７．上下二重線の見出し

上下二重線の見出し

h2{
 border-top: double 3px #6f6f6f;
 border-bottom: double 3px #6f6f6f;
 padding:0.8em 0.5em;
 margin:0.5em;
}

８．背景がストライプの見出し

背景がストライプの見出し

h2{
 background:
 -webkit-repeating-linear-gradient(-45deg,#eee ,#fff 4px,#ccc 4px,#b2b2b2 4px);
 padding:0.8em 0.5em;
 margin:0.5em;
}

９．背景ストライプ＋枠線の見出し

背景ストライプ＋枠線の見出し

h2{
 background:
 -webkit-repeating-linear-gradient (-45deg, #e6e6e6, #fff 3px,#cccccc 3px,#e6e6e6 3px);
 border: solid 1px #e5e3c8;
 padding:0.8em 0.5em;
 margin:0.5em;
}

１０．背景がグラデーションの見出し

背景がグラデーションの見出し

h2{
 background-image: linear-gradient(135deg,#dab1cb ,#e6dfc3 ,#fbf8f0);
 color: #f8f8f8;
 padding:0.8em 0.5em;
 margin:0.5em;
}

１１．下線がグラデーションの見出し

下線がグラデーションの見出し

h2{
 position: relative;
 padding:0.8em 0.5em;
 margin:0.5em;
}
h2:after {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(to right, #6255cc ,#dc8baf ,#fbf8f0);
}

１２．背景に色をつけ、左側に線をつけた見出し

背景に色をつけ、左側に線をつけた見出し

h2{
 border-left: 3px solid #374249;
 background: #e6e6e6;
 color: #374249;
 padding:0.8em 0.5em;
 margin:0.5em;
}

１３．フォントを明朝体にして下二重線をつけた見出し

フォントを明朝体にして下二重線をつけた見出し

h2{
 font-family:'游明朝';
 border-bottom: double 3px #e6e6e6;
 padding:0.8em 0.5em;
 margin:0.5em;
}

１４．左側に短い線をつけた見出し

左側に短い線をつけた見出し

h2{
 position: relative;
 padding:0.8em 30px;
 margin:0.5em;
}
h2:before{
content: '';
    height: 2px;
    width: 30px;
    display: block;
    background-color: #333;
    position: absolute;
    left: -5px;
    bottom: 50%;
}

１５．下に短い線をつけた見出し

下に短い線をつけた見出し

h2 {
 position: relative;
 text-align: center;
 padding:0.8em 0.5em; 
 margin:0.5em;
}
h2:before{
 content: '';
 height: 2px;
 width: 30px;
 display: block;
 background-color: #333;
 position: absolute;
 left: 50%;
 bottom: 5px;
 transform: translateX(-50%);
}

１６．１文字目だけ大きな文字の見出し

１文字目だけ大きな文字の見出し

h2 {
 padding:0.8em 0.5em; 
 margin:0.5em;
}
h2:first-letter{
 font-size:1.8em;
}

さいごに

WordPressの記事見出しや装飾を作成します WordPress初心者だけどカスタマイズをしたい人へ