コピペでOK！CSSで見出しをオシャレにカスタマイズしよう！

先日自分で過去の記事を見ていたら、記事中に出てくる見出しがあまり視認性が良くないと感じたのでちょっと変えてみました。

適切な見出しの使い方をするのはSEOにも良い事で、ちゃんと使えばユーザー（ブログを見てくれている読者）の記事全体の可読性も上がります。

ただ、見出しを乱用するのはかえって可読性を下げてしまいます。そして記事が長くなれば長くなるほど見出しは重要さを増していきます。

今回は、先日私がCSSで見出しのデザインを変えた内容をメインに紹介します。

ほぼコピペで使えるように書いてありますが、わからない事などあればコメント頂ければ出来る限り対応しますm(＿ ＿)m

※なるべくコピペで使えるように少し余計な記述も書いてる場合もありますので、必要に応じて削除して頂いてOKです。

[1]カラフルな斜線で装飾

執筆現在私はh2タグに使っているCSSです。

h2にbeforeとafterの疑似要素を作ってそれぞれにrepeating-linear-gradientでカラフルな斜線を作っています。

h2 {
  width: 100%;
  padding: 0.5em;
  position: relative;
}
h2:before, h2:after {
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  background: -webkit-repeating-linear-gradient(135deg, #fff, #fff 3px, #3878d1 3px, #3878d1 6px, white 6px, white 9px, deeppink 9px, deeppink 12px);
  background: repeating-linear-gradient(135deg, #fff, #fff 3px, #3878d1 3px, #3878d1 6px, white 6px, white 9px, deeppink 9px, deeppink 12px);
}
h2:before { top: -4px; }
h2:after { bottom: -4px; }

[2]背景に斜線を掛ける

同じく斜線を掛けるパターンで、今度はボーダーではなく要素の背景に掛けるパターンです。

背景色が濃いと見出しの文字が見づらくなってしまうのでrgbaで背景色を透過させるのもポイントです。

h2 {
  background: -webkit-repeating-linear-gradient(-45deg, #fff, #fff 4px, rgba(56,120,209,.5) 4px, rgba(56,120,209,.5) 8px);
  background: repeating-linear-gradient(-45deg, #fff, #fff 4px, rgba(56,120,209,.5) 4px, rgba(56,120,209,.5) 8px);
}

[3]カラフルなボーダーと斜線の背景の合わせ技

[1]と[2]を合わせてカラフルなボーダー（上下）と背景の斜線を複合させるパターンです。

[2]でbackgroundの透過を0.5にしていたものをここでは0.1にしています。

h2 {
  width: 100%;
  padding: 0.5em;
  position: relative;
  background: -webkit-repeating-linear-gradient(-45deg, #fff, #fff 4px, rgba(56,120,209,.1) 4px, rgba(56,120,209,.1) 8px);
  background: repeating-linear-gradient(-45deg, #fff, #fff 4px, rgba(56,120,209,.1) 4px, rgba(56,120,209,.1) 8px);
}
h2:before, h2:after {
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  background: -webkit-repeating-linear-gradient(135deg, #fff, #fff 3px, #3878d1 3px, #3878d1 6px, white 6px, white 9px, deeppink 9px, deeppink 12px);
  background: repeating-linear-gradient(135deg, #fff, #fff 3px, #3878d1 3px, #3878d1 6px, white 6px, white 9px, deeppink 9px, deeppink 12px);
}
h2:before { top: -4px; }
h2:after { bottom: -4px; }

[4]2色の下線01

よく見る見出しのパターンのひとつで、見出し要素に下線を付けて、その上にafterで要素をかぶせるパターンです。

h2 {
  width: 100%;
  padding: 0.5em;
  position: relative;
  border-bottom: 5px solid #ccc;
}

h2:after {
  content: '';
  width: 30%;
  height: 5px;
  background-color: #3878d1;
  position: absolute;
  left: 0;
  bottom: -5px;
  z-index: 1;
}

[5]2色の下線02

ちなみに[4]のborder-bottomの[solid]を[dotted]に変えるだけで、ちょっとだけオリジナリティが出ます。

また、こういう細かい所を気にする方は少ないですが、afterにborder-radiusをかけると角が丸まって見出しの下線（ドットの線）とマッチします。

h2 {
  width: 100%;
  padding: 0.5em;
  position: relative;
  border-bottom: 5px dotted #ccc;
}

h2:after {
  content: '';
  width: 30%;
  height: 5px;
  background-color: #3878d1;
  position: absolute;
  left: 0;
  bottom: -5px;
  z-index: 1;
  border-radius: 3px;
}

[6]見出しの手前に記号を表示01

これは見出しの文字の手前に記号などを表示させて、さらに要素の下にボーダーを表示させるパターンです。

今までやってきたbeforeやafterのcontentに好きな記号を入れるのと、あとは普通にボーダーで下線を指定するだけです。

h2 {
  width: 100%;
  padding: 0.2em;
  padding-left: 0;
  border-bottom: 5px dotted #3878d1;
}
h2:before {
  content: "◉";
  color: #3878d1;
  margin-right: 5px;
  font-size: 80%;
}

[7]見出しの手前に記号を表示02

「Font Awesome」を使うともっといろいろなアイコンなどを表示出来ます。

Font Awesomeについてはここでは紹介しきれないので割愛させて頂きますが、この方法だとフォントアイコンを使うので機種依存文字で文字化けしてしまうという問題も回避できます。

[7]パターン01

h2 {
  width: 100%;
  padding: 0.2em;
  padding-left: 0;
  border-bottom: 5px dotted #3878d1;
}
h2:before {
  font-family: 'FontAwesome';
  content: "\f192";
  color: #3878d1;
  margin-right: 5px;
  font-size: 80%;
}

[7]パターン02

アイコンを「ニコちゃんマーク」にしてカラーをホットピンクにするとこんな感じです。

h2 {
  width: 100%;
  padding: 0.2em;
  padding-left: 0;
  border-bottom: 5px dotted #3878d1;
}
h2:before {
  font-family: 'FontAwesome';
  content: "\f118";
  color: hotpink;
  margin-right: 5px;
  font-size: 80%;
}

[7]パターン03

アイコンを「スピナー」にしてカラーをライトブルーにするとこんな感じです。

h2 {
  width: 100%;
  padding: 0.2em;
  padding-left: 0;
  border-bottom: 5px dotted #3878d1;
}
h2:before {
  font-family: 'FontAwesome';
  content: "\f110";
  color: #add8e6;
  margin-right: 5px;
  font-size: 80%;
}

まとめ

今回はCSSで見出しタグをカスタマイズして可読性を上げて、記事を読みやすくしよう！という内容でした。

基本的にコピペで使えるように気を使って書いてはいますが、どうしてもWordpressのテンプレートやお使いのブログツールのCSSと競合する場合がありますので、その場合はセレクタを増やしてみたり、大元のCSSを編集してみたりしてみてください。

もしどうしてもうまく行かないという場合はコメント頂けましたら私のお答えできる範囲で答えさせて頂きます。

※回答に時間がかかるのと、全てにお答え出来かねる場合がありますので予めご了承ください。また、CSSの編集など本記事に記載されてる内容を実行される際はあくまで自己責任の元でお願い致します。

今回は私が使っている見出しのCSSをメインに紹介しましたが、他にもカスタマイズの方法は無限にありますので、本記事を参考にご自身にあった見出しを作ってみて下さい☆