先日自分で過去の記事を見ていたら、記事中に出てくる見出しがあまり視認性が良くないと感じたのでちょっと変えてみました。
適切な見出しの使い方をするのはSEOにも良い事で、ちゃんと使えばユーザー(ブログを見てくれている読者)の記事全体の可読性も上がります。
ただ、見出しを乱用するのはかえって可読性を下げてしまいます。そして記事が長くなれば長くなるほど見出しは重要さを増していきます。
今回は、先日私がCSSで見出しのデザインを変えた内容をメインに紹介します。
ほぼコピペで使えるように書いてありますが、わからない事などあればコメント頂ければ出来る限り対応しますm(_ _)m
※なるべくコピペで使えるように少し余計な記述も書いてる場合もありますので、必要に応じて削除して頂いてOKです。
基本的にブログツール(Wordpressやはてなブログなど)のテンプレートには、見出しにデフォルトでCSSが掛けられています。
この為、本記事で紹介したCSSをそのままstyle.cssなどに貼り付けても「デフォルトで指定されているCSSと競合」する場合があります。
Contents
[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をメインに紹介しましたが、他にもカスタマイズの方法は無限にありますので、本記事を参考にご自身にあった見出しを作ってみて下さい☆
この記事が気に入ったら
いいね ! しよう
ディスカッションコーナー コメントやご質問、その他この記事に関する事はこちらからどうぞ☆
こんにちは!
こちらの記事
https://tips4life.me/css-customize-heading
の1のCSSをコピペさせて頂きました!
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; }
ドンピシャなデザインで、また私が本当にパソコンが得意ではないのでコピペが出来て感謝しております。
質問です。
フォントのサイズも一緒に変わるようにCSSにfont-sizeを追加したいのですが、どこにいれればいいのでしょうか?
お忙しいところ恐縮ですがお返事いただければ幸いです。
こんにちわ(^^)
今回は h2 に CSS を当てているので、以下のように記述されると良いかと思います☆
例:
h2 {
width: 100%;
padding: 0.5em;
position: relative;
font-size: 120%; /* こんな感じ */
}
単位は % 以外にも色々ありますので色々調べて試してみてください☆