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

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

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

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

1.装飾のない太字の見出し

装飾のない太字の見出し
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;
}

2.背景に色をつけた見出し

背景に色をつけた見出し
h2{
 background-color:#f7f7f7;
 padding:0.8em 0.5em;
 margin:0.5em;
}

背景に色をつけた見出しです。
よく見るデザインだと思います。

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

背景に色をつけ、文字色を白にした見出し
h2{
 color#fff;
 background-color: #6b6767;
 font-weight: bold;
 padding:0.8em 0.5em;
 margin:0.5em;
}

文字を白くする場合は、背景色をすこし濃い色にしたほうが合うかもしれません。

4.下線をつけた見出し

下線の見出し
h2{
 border-bottom: solid 2px #515151;
 padding:0.8em 0.5em;
 margin:0.5em;
}

下線をつけています。
線の太さを変えると、だいぶ見た目が変わります。

5.上下線の見出し

上下線の見出し
h2{
 border-top: solid 1px #515151;
 border-bottom: solid 1px #515151;
 padding:0.8em 0.5em;
 margin:0.5em;
}

上下線で囲んでいます。

6.上下破線の見出し

上下破線の見出し
h2{
 border-top: dotted 2px #515151;
 border-bottom: dotted 2px #515151;
 padding:0.8em 0.5em;
 margin:0.5em;
}

上下を破線にしています。

7.上下二重線の見出し

上下二重線の見出し
h2{
 border-top: double 3px #6f6f6f;
 border-bottom: double 3px #6f6f6f;
 padding:0.8em 0.5em;
 margin:0.5em;
}

上下二重線です。

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

背景がストライプの見出し
h2{
 background:
 -webkit-repeating-linear-gradient(-45deg,#eee ,#fff 4px,#ccc 4px,#b2b2b2 4px);
 padding:0.8em 0.5em;
 margin:0.5em;
}

背景をストライプで塗りつぶしています。

9.背景ストライプ+枠線の見出し

背景ストライプ+枠線の見出し
h2{
 background:
 -webkit-repeating-linear-gradient (-45deg, #e6e6e6, #fff 3px,#cccccc 3px,#e6e6e6 3px);
 border: solid1px #e5e3c8;
 padding:0.8em 0.5em;
 margin:0.5em;
}

背景がストライプで、枠線つきです。

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

背景がグラデーションの見出し
h2{
 background-image: linear-gradient(135deg,#dab1cb ,#e6dfc3 ,#fbf8f0);
 color#f8f8f8;
 padding:0.8em 0.5em;
 margin:0.5em;
}

背景をグラデーションで塗りつぶしています。
けっこうインパクトのある見出しだと思いますが、サイトのカラーとうまく合わせれば、うるさくないと思います。

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

下線がグラデーションの見出し
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);
}

グラデーションの下線をつけています。
背景がグラデーションよりは落ち着いたデザインです。

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

背景に色をつけ、左側に線をつけた見出し
h2{
 border-left: 3px solid #374249;
 background: #e6e6e6;
 color: #374249;
 padding:0.8em 0.5em;
 margin:0.5em;
}

背景がグラデーション、ストライプの場合も応用できます。

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

フォントを明朝体にして下二重線をつけた見出し
h2{
 font-family:'游明朝';
 border-bottom: double 3px #e6e6e6;
 padding:0.8em 0.5em;
 margin:0.5em;
}

フォントを変えると、かなりイメージが変わります。
本分はゴシック体で見出しだけ明朝体にするというのもアリだと思います。

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

左側に短い線をつけた見出し
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%;
}

シンプルですが特徴的なデザインです。

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

下に短い線をつけた見出し
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%);
}

サイドバーなどで使いやすいデザインだと思います。
記事内の見出しで使うなら、中央寄せが良さそうです。

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

1文字目だけ大きな文字の見出し
h2 {
 padding:0.8em 0.5em; 
 margin:0.5em;
}
h2:first-letter{
 font-size:1.8em;
}

雑誌などで見る装飾デザインです。

さいごに

この記事は随時追記しています。
ブログの見出しを変えたくなったらチェックしてみてください。

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

Comments

タイトルとURLをコピーしました