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

僕は当ブログとメインブログでSimplicityというテーマを使っています。
名前の通りとてもシンプルで、非常に使いやすいテーマです。

Simplicityはカスタマイズがしやすく、僕も色々と変更して使っています。
その中で今回は、投稿記事内の見出し(Hタグ)デザインを紹介します。

Simplicityのデフォルトからデザインと文字サイズを変更しています。

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

Simplicityのデフォルトのレイアウト見本は、Simplicityのサイト内で公開されています。
レイアウト見本

スタイルシート (style.css)の編集は必ず子テーマで行って下さい。 →Simplicity2の子テーマ
この記事を書いた後に、当ブログの見出しデザインを変更しています。
スポンサーリンク

投稿記事タイトル(見出し1/H1タグ)

記事タイトルがH1になっています。

僕は文字のウエイト(太さ)を変更して、少し細くしています。

.article h1{
font-weight:300;
}

この数字を大きくすると太くなります。

また、font-weightはboldやnormalという指定の仕方もできます。

見出し2(H2タグ)

見出し2は、記事内で一番良く使う見出しだと思います。

文字の左側に太めの線を付けただけのシンプルな見出しを使っています。
ここでもフォントウエイトを100にして、文字を細くしています。

.article h2{
border-left:12px solid #404040;
margin: 40px 0 30px;
padding:10px 20px; 
font-weight:100;
}

border要素は初心者でもイメージがしやすく、色々と応用がしやすいと思います。
「border」とだけ書くと囲み線になり、「border-left」のように書くと、指定した辺のみ線が描画されます。

線のスタイルはたくさんあるので、見出しに使いやすいものだけ紹介します。

・none:線なし
・solid:1本線
・double:2本線
・dashed:破線
・dotted:点線

見出し3(H3タグ)

見出し3は薄いグレーの下線です。

見出し3ではフォントウエイト以外に、フォントサイズも変更して文字を少し小さくしています。

.article h3{
font-size:20px;
border-bottom:5px solid #bbb;
padding:10px 0;
margin: 20px 0;
font-weight:100;
}

ここでは見出し2と同じborderを使い、bottom(下辺)だけに線を付けています。

見出し4(H4タグ)

見出し4を使うことはあまり多くはあまりませんが、一応カスタマイズしています。
細い点線の下線です。

見出し3と同じく、フォントウエイトとサイズを変更しています。

.article h4{
font-size:18px; 
border-bottom:1px dotted #404040;
font-weight:100;
}

見出し3と同じborder-bottomを使っていますが、線のスタイルを破線にして、文字サイズを小さくすることで、より下層の見出しという印象にしています。

見出し5(H5タグ)

見出し5までくると、ほぼ使うことはないです。
メインサイトでもたまに使うくらいで、大体は見出し2~4で事足りています。

が、一応変えています。
文字のサイズは記事本文と同じで、左側に線が付くだけです。

.article h5{
font-size:17px;
padding:0 10px;
border-left:5px solid #58656e;
font-weight:100;
}

見出し2とほとんど同じですが、上下のpaddingを0にすることでコンパクトにしています。

見出しデザインサンプル8つ

自分の勉強も兼ねて、いくつかサンプルを作ってみました。
コピペして使って下さい。

シンプルなデザインが好きなのでそういうものが多いですが、色や太さを変えるなどして使いやすいかなと思います。

全てパディング(文字の周りの余白)、マージン(見出し要素の周りの余白)は統一しています。

1.背景に色をつけた見出し
background-color:#e6e6e6;
padding:0.8em 0.5em;
margin:0.5em;
2.背景に色をつけ、文字色を白にした見出し
color:#fff
background-color:#d9d9d9;
padding:0.8em 0.5em;
margin:0.5em;
3.上下線の見出し
border-top: solid 2px #e6e6e6;
border-bottom: solid 2px #e6e6e6;
padding:0.8em 0.5em;
margin:0.5em;
4.上下破線の見出し
border-top: dotted 2px #e6e6e6;
border-bottom: dotted 2px #e6e6e6;
padding:0.8em 0.5em;
margin:0.5em;
5.上下二重線の見出し
border-top: double 3px #e6e6e6;
border-bottom: double 3px #e6e6e6;
padding:0.8em 0.5em;
margin:0.5em;
6.背景がストライプの見出し
background:-webkit-repeating-linear-gradient(-45deg, #e6e6e6, #fff 3px,#cccccc 3px,#e6e6e6 3px);
padding:0.8em 0.5em;
margin:0.5em;
7.背景に色をつけ、左側に線をつけた見出し
border-left: 3px solid #3a4b56;
background: #e6e6e6;
color: #3a4b56;
padding:0.8em 0.5em;
margin:0.5em;
8.フォントを明朝体にして下二重線をつけた見出し
font-family:'游明朝';
border-bottom: double 3px #e6e6e6;
padding:0.8em 0.5em;
margin:0.5em;
見出しのデザイン例はこちらのサイトもおすすめです。
これは見出しのデザイン集のページですが、どのページも非常に分かりやすく、かなり勉強になります。
CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選

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

Comments

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