【CSSコピペ】シンプル系でおしゃれな見出しデザインを26連発！

 見出しがオシャレなブログは、ブログ全体もだいたいオシャレ。

どうもオークニです。

ブログカスタマイズにおいて、もっとも手軽で簡単なアレンジが見出しです。そのため、ネット上にも100万個くらいの見出しカスタマイズが転がっていますね！

今回は、そんな中でもオークニがおすすめする”シンプル系”厳選のデザインを…まとめちゃうぞ！（スッキリ〜）

注）はてなブログの場合

本来なら記事内の見出しというのは、だいたい

h2→大見出し
h3→中見出し
h4→小見出し

で構成されています。

ただし、はてなブログはバカなので

h3→大見出し
h4→中見出し
h5→小見出し

という謎仕様になっております。

なので、それぞれ変えたい見出しに合わせてh3なのかh4なのかh5なのかをご自身で変更してくださいませ。

また、これから列挙するCSSのコードでは一般的な「h2 { 〜」という書き方をしていますが、はてなブログの場合は「.entry-content h3 {〜」というように冒頭に.entry-contentを付けることをお忘れなく。

CSSのリセット

まずは既存の見出しのCSSをリセットしましょう。よく初心者がコピペしてもデザインが反映されない件で戸惑いますが、だいたいは既存のテーマ等のCSSが邪魔しています。

なので

/* 既存見出しのリセット */
h2,
h2:before,
h2:after {
content: none;
background: none;
background-color: none;
border: none;
border-radius: 0;
}

これをこれからカスタマイズする見出しCSSの直前に書き足しておきましょう。 もちろんh3の見出しを変える場合はh2→h3に書き換え、それを付け足してください。

では、このCSSのリセットを前述のはてなブログの場合の注意点を踏まえて書いてみましょう。

/* 既存見出しのリセット */
.entry-content h3,
.entry-content h3:before,
.entry-content h3:after {
content: none;
background: none;
background-color: none;
border: none;
border-radius: 0;
}

h3の前に.entry-contentが要るってこと、OKですね？！

それでは、本題の見出しデザインへ参りましょう！

下線見出し

一番シンプル。これぞ見出し。THE 見出し。迷ったらとりあえずこれでいい王道。

h2 {
padding-bottom: .5em;
border-bottom: 2px solid #7ED1E6;
}

1.下線見出し（ダブル）

下線を二重にしたパターン。シンプルに毛が生えたレベルでテッパン。

h2 {
padding-bottom: .5em;
border-bottom: double #7ED1E6;
}

2.下線見出し（点線）

次は下線を点線にしたパターン。同じくシンプルに髭が生えた程度に無難。

h2 {
padding-bottom: .5em;
border-bottom: 2px dashed #7ED1E6;
}

3.下線見出し（ストライプ）

点線と見せかけて、ストライプです。「何事もストライプはおしゃれだがー」っておじいちゃんが言ってました。

h2 {
position: relative;
padding-bottom: .5em;
}
h2:after {
position: absolute;
bottom: -4px;
left: 0;
content: '';
height: 4px;
width: 100%;
background: -webkit-repeating-linear-gradient(45deg, #fff, #fff 2px, #7ED1E6 2px, #7ED1E6 4px);
background: repeating-linear-gradient(45deg, #fff, #fff 2px, #7ED1E6 2px, #7ED1E6 4px);
}

4.下線見出し（マーカー風）

よく本文中の強調文字で見るアレです。％をいじることでマーカーの高さが変わります。

h2 {
background: linear-gradient(transparent 60%, #FAE438 60%);
}

5.下線見出し（文字下のみ着色）

これは普通におしゃれですね。しかもシンプルで使い勝手も良さそう。

h2 {
position: relative;
overflow: hidden;
padding-bottom: .5em;
}
h2:before,h2:after {
content: "";
position: absolute;
bottom: 0;
}
h2:before {
border-bottom:
2px solid #7ED1E6;
width: 100%;
}
h2:after {
border-bottom: 2px solid #ddd;
width: 100%;
}

6.下線見出し（薄くなる）

グラデーション効果で右へ行くほど薄くなる。今風の見出しを演出できる。

h2 {
padding: .5em;
position: relative;
}
h2:after {
content: "";
width:100%;
height:4px;
position: absolute;
left: 0;
bottom: 0;
background: linear-gradient(to right, #7ED1E6, rgba(255,255,255,0) 100%);
}

7.下線見出し（グラデーション）

こちらもトレンディ。おしゃれかどうかは…配色で決まる…！

h2{
padding: .5em;
position: relative;
}
h2:after {
content: "";
display: block;
height: 4px;
background-image: linear-gradient(to right, #EB9BBD, #7ED1E6);
}

8.上下線見出し

簡単なわりにおしゃれ。決して上下で色を変えるなんて奇をてらったことはしないように。

h2 {
padding: .5em;
border-top: 2px solid #7ED1E6;
border-bottom: 2px solid #7ED1E6;
}

9.上下線見出し（ダブル）

上下かつダブル。合計で4本。てんこもりです。ランチで大盛り無料とか頼んじゃう人におすすめ。

h2 {
padding: .5em;
border-top: double #7ED1E6;
border-bottom: double #7ED1E6;
}

10.上下線見出し（おしゃれダブル）

よく見てください。外側の線が太く内側が細い、おしゃれ上下線ダブル〜。おしゃダブです。

h2 {
position: relative;
padding: .5em;
}
h2:before,
h2:after {
position: absolute;
left: 0;
content: '';
width: 100%;
height: 5px;
box-sizing: border-box;
}
h2:before {
top: 0;
border-top: 2px solid #7ED1E6;
border-bottom: 1px solid #7ED1E6;
}
h2:after {
bottom: 0;
border-top: 1px solid #7ED1E6;
border-bottom: 2px solid #7ED1E6;
}

11.最初の文字だけ大きい見出し

何事も、最初が肝心です。ツカみでキメよう！にしても、10の1だけ大きくなるのは気持ち悪いですね。

h2 {
padding-bottom: .5em;
border-bottom: 2px solid #7ED1E6;
}
h2:first-letter {
margin-right: .1em;
font-size: 2em;
}

12.最初の文字だけ大きい見出し（色付き）

下線と最初の文字の色を統一することで、より一層"アイキャッチ力"が強化されます。

h2 {
padding-bottom: .5em;
border-bottom: 2px solid #7ED1E6;
}
h2:first-letter {
margin-right: .1em;
font-size: 2em;
color:#7ED1E6;
}

13.左に縦線見出し

h3（中身出し）などでもよく使われるやつ。極めてシンプル。

h2 {
padding: .5em;
border-left: 5px solid #7ED1E6;
}

14.左に縦線見出し（ダブル）

シンプルおしゃれのわりに、けっこう見ることの少ないレア見出し。穴場です。

h2 {
padding: .5em;
border-left: double #7ED1E6;
}

15.左に縦線見出し（点線）

縦の短い点線ということで見出しとしてのパンチも弱めなのか、使っている人をほとんど見ない。

h2 {
padding: .5em;
border-left: 5px dashed #7ED1E6;
}

16.左に縦線見出し（下線付き）

これまでの下線と縦線の合わせ技。見出し界ではわりとメジャーな存在。

h2 {
position: relative;
padding: .5em;
border-left: 5px solid #7ED1E6;
}
h2:after {
position: absolute;
left: 0;
bottom: 0;
content: '';
width: 100%;
height: 0;
border-bottom: 2px solid #444;
}

17.左に2色縦線見出し（下線付き）

あまり見慣れないため、実際に使うと一気におしゃれポイントUP間違い無し。

h2 {
position: relative;
padding: .5em;
border-left: 5px solid #444;
}
h2:before {
position: absolute;
left: -5px;
bottom: 0;
content: '';
width: 5px;
height: 50%;
background-color: #7ED1E6;
}
h2:after {
position: absolute;
left: 0;
bottom: 0;
content: '';
width: 100%;
height: 0;
border-bottom: 2px solid #444;
}

18.枠線見出し

シンプルすぎて逆に見出しではほとんど見ないやつ。

h2 {
padding: .5em;
border: 2px solid #7ED1E6;
}

19.枠線見出し（角丸）

ほぼ上記と同じ。柔らかくしたい用。ちなみに、角丸の丸を大きくするのは素人の証。

h2 {
padding: .5em;
border: 2px solid #7ED1E6;
border-radius: 4px;
}

20.枠線見出し（手書き風）

柔らかさMAX、ポップでカジュアルな印象です。案外けっこう見かける有名なやつ。

h2 {
padding: .5em;
border: 3px solid #7ED1E6;
border-radius: 3em .7em 2em .7em/.7em 2em .7em 3em;
}

21.枠線見出し（立体感）

実はこれ、枠線なし、背景色なしです。内側に向かって思いっきりシャドーをかけた結果、なんか立体的になったパターン。

h2{
padding: .5em;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.15) inset;
}

22.枠線見出し（ポイント）

みんな大好きなやつ。見出しだけでなく、解説のポイントとしてとか…むしろそっちがメインか。

h2{
position: relative;
padding: .75em .5em;
border: 1px solid #7ED1E6;
}
h2:after{
content: "POINT";
position: absolute;
top: -.6em;
left: 10px;
background: #fff;
font-size: .75em;
color: #7ED1E6;
padding: 0 10px;
}

23.枠線見出し（四隅はみ出し）

シンプルながらもシャープさが際立つキレイ目インテリ系見出し。

h2{
position: relative;
padding: .5em .75em;
text-align:center;
border-top: solid 1px #7ED1E6;
border-bottom: solid 1px #7ED1E6;
}
h2:before,h2:after{
content: '';
position: absolute;
top: -.5em;
width: 1px;
height: calc(100% + 1em);
background-color: #7ED1E6;
}
h2:before{
left: .5em;
}
h2:after{
right: .5em;
}

24.両端に線見出し

これは特に中央寄せの見出しにおすすめ。シンプルにかっこいいデザイン。

h2{
position: relative;
display: inline-block;
padding: 0 2.5em;
text-align: center;
}

h2:before, h2:after{
content: '';
position: absolute;
top: 50%;
display: inline-block;
width: 15%;
height: 1px;
background-color: #7ED1E6;
}

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

25.中央にチョビ下線見出し

こちらも中央寄せで映える見出し。このブログでも使おうかな？

h2{
position: relative;
display: inline-block;
margin-bottom: 1em;
}
h2:before {
content: '';
position: absolute;
bottom: -15px;
display: inline-block;
width: 20%;
height: 4px;
left: 50%;
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
background-color: #7ED1E6;
border-radius: 1px;
}

26.グラデーション見出し

使い所に難あり。これが使いこなせるあなたは、プロの見出しクリエイターかもしれない。

 h2 {
position: relative;
padding: .5em;
background: -webkit-linear-gradient(135deg, #f44336 0%,#ff9800 17%,#ffeb3b 32%,#4caf50 50%,#2196f3 67%,#3f51b5 84%,#9c27b0 100%);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}

まとめ

フォントサイズに関しては”あえて”指定していません。h2とかh3とかh4とか、ご自身の環境に合わせて指定していただくのがベストかと。

また、装飾の色に関してもご自由に変更してくださいませ。今風のマテリアルな配色からチョイスしたいのなら、こーゆーサイトとか簡単でおすすめ。

Random Material Palette