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

スポンサードリンク

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

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

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

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

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

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

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

基本的にブログツール(Wordpressやはてなブログなど)のテンプレートには、見出しにデフォルトでCSSが掛けられています。

この為、本記事で紹介したCSSをそのままstyle.cssなどに貼り付けても「デフォルトで指定されているCSSと競合」する場合があります。

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

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

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

Tipsアイコン[ こんな感じ! ]

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

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で背景色を透過させるのもポイントです。

Tipsアイコン[ こんな感じ! ]

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

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にしています。

Tipsアイコン[ こんな感じ! ]

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

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で要素をかぶせるパターンです。

Tipsアイコン[ こんな感じ! ]

[4]2色の下線01

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をかけると角が丸まって見出しの下線(ドットの線)とマッチします。

Tipsアイコン[ こんな感じ! ]

[5]2色の下線02

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に好きな記号を入れるのと、あとは普通にボーダーで下線を指定するだけです。

Tipsアイコン[ こんな感じ! ]

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

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

Tipsアイコン[ こんな感じ! ]

[7]見出しの手前に記号を表示02_パターン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

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

Tipsアイコン[ こんな感じ! ]

[7]見出しの手前に記号を表示02_パターン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

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

Tipsアイコン[ こんな感じ! ]

[7]見出しの手前に記号を表示02_パターン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をメインに紹介しましたが、他にもカスタマイズの方法は無限にありますので、本記事を参考にご自身にあった見出しを作ってみて下さい☆

この記事が気に入ったら
いいね ! しよう

スポンサードリンク


シェアして頂けると喜びます☆
Top