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

ブログの記事内で使える見出しのデザインサンプル集です。

全て、CSSの編集のみです。
コピペすればそのまま使うことができるので、色や線の太さを変えて、アレンジして使って下さい。

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

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初心者だけどカスタマイズをしたい人へ