初めまして！Hurariと申します。
今回はコピペOK！WordPressの見出しのデザインをご紹介いたします。
ブログのデザインって非常に大切ですよね。
Instagramなどの直観的に操作できるアプリが増えたため、ブログもパッとみて理解できるようなデザインでなければユーザーが減ってしまうということもあると思います。
そこで、シンプルで使い勝手の良い、見出しのデザインをご紹介いたします！
少しでも、サイトを運営する皆さんのお役に立てれば幸いです。
この記事におすすめの方は？
- ブログをはじめたばかりの方
- サイトのデザインを変更したい方
- 見出しのデザインに悩まれている方
シンプルなデザイン
/* 見出しh2のデザインここから */
.article h2 {
background: #66cdaa; /*背景色を変更する場合はここ*/
padding: 0.5em; /*文字周りの余白を変更する場合はここ*/
color: #fff; /*文字色を変更する場合はここ*/
border-radius: 0.4em; /*角の丸さを変更する場合はここ*/
}
/* 見出しh2のデザインここまで */個人的に一番シンプルで使い勝手がいいと思う見出しのデザインです。
ページを飛ばし読みしている時でも「見出し」ということがすぐに判断できておすすめです。
レトロチックなデザイン
/* 見出しh2のデザインここから */
.article h2 {
background: #e8c59c; /*背景色を変更する場合はここ*/
padding: 0.5em; /*文字周りの余白を変更する場合はここ*/
color: #fff; /*文字色を変更する場合はここ*/
text-shadow: 1px 0 0 #444, 0 1px 0 #444, -1px 0 0 #444, 0 -1px 0 #444; /*文字枠のデザインを変更する場合はここ*/
border-radius: 0.2em; /*角の丸さを変更する場合はここ*/
}
/* 見出しh2のデザインここまで */文字に枠を付け加えることで、ちょっぴりレトロな雰囲気がでます。
意外とブログで見かけることがないので、オリジナリティが出るかもしれません。
ポップな吹き出しデザイン
/* 見出しh2のデザインここから */
.article h2 {
position: relative; /*見出し要素を基準に指定-変更しない- */
background: #ffad5b; /*背景色を変更する場合はここ*/
padding: 0.5em; /*文字周りの余白を変更する場合はここ*/
color: #fff; /*文字色を変更する場合はここ*/
border-radius: 1em; /*角の丸さを変更する場合はここ*/
}
.article h2::after {
position: absolute; /*relativeを基準に絶対位置を指定-変更しない-*/
content: ""; /*擬似要素before/afterを使用するために空のコンテンツを指定-変更しない-*/
top: 100%; /*吹き出しの三角位置（縦方向）を変更する場合はここ*/
left: 5%; /*吹き出しの三角位置位置（横方向）を変更する場合はここ*/
border: 15px solid transparent; /*見出しに三角の吹き出しをつける*/
border-top: 15px solid #ffad5b; /*見出しに三角の吹き出しをつける-色を変更する場合はここ-*/
width: 0; /*見出しに三角の吹き出しをつける-変更しない-*/
height: 0; /*見出しに三角の吹き出しをつける-変更しない-*/
}
/* 見出しh2のデザインここまで */見出しに吹き出しをつけることによってポップな雰囲気になります。
見出しの三角吹き出しは「border」のプロパティを使うことによって作れます。
こちらのサイトがわかりやすかったので、CSSの中身に興味がある方は、ぜひ確認してみて下さい。
CSSで三角形の装飾をつける方法
...
www.itra.co.jp
ポップな吹き出しデザイン
/* 見出しh2のデザインここから */
.article h2 {
position: relative; /*見出し要素を基準に指定-変更しない- */
padding: 0.6em; /*文字周りの余白を変更する場合はここ*/
background: #6495ed; /*背景色を変更する場合はここ*/
color: #fff; /*文字色を変更する場合はここ*/
border-radius: 1.5em; /*角の丸さを変更する場合はここ*/
text-align: center; /*文字を中心にする-位置を変更する場合はここ-*/
}
.article h2::after {
position: absolute; /*relativeを基準に絶対位置を指定-変更しない-*/
content: ""; /*擬似要素before/afterを使用するために空のコンテンツを指定-変更しない-*/
top: 100%; /*吹き出しの三角位置（縦方向）を変更する場合はここ*/
left: 50%; /*吹き出しの三角位置（横方向）を変更する場合はここ*/
border: 15px solid transparent; /*見出しに三角の吹き出しをつける*/
border-top: 15px solid #6495ed; /*見出しに三角の吹き出しをつける-色を変更する場合はここ-*/
width: 0; /*見出しに三角の吹き出しをつける-変更しない-*/
height: 0; /*見出しに三角の吹き出しをつける-変更しない-*/
}
/* 見出しh2のデザインここまで */吹き出しの三角の位置を変更するだけでもイメージが変わります。
シンプルな吹き出しデザイン
/* 見出しh2のデザインここから */
.article h2 {
position: relative; /*見出し要素を基準に指定-変更しない- */
padding: 0.6em; /*文字周りの余白を変更する場合はここ*/
border-bottom: solid 2px #008080; /*下線のデザインを変更する場合はここ*/
color: #008080; /*文字色を変更する場合はここ*/
text-align: center; /*文字を中心にする-位置を変更する場合はここ-*/
}
.article h2::after {
position: absolute; /*relativeを基準に絶対位置を指定-変更しない-*/
content: ""; /*擬似要素before/afterを使用するために空のコンテンツを指定-変更しない-*/
top: 100%; /*吹き出しの三角位置（縦方向）を変更する場合はここ*/
left: 50%; /*吹き出しの三角位置（横方向）を変更する場合はここ*/
border: 15px solid transparent; /*見出しに三角の吹き出しをつける*/
border-top: 15px solid #008080; /*見出しに三角の吹き出しをつける-色を変更する場合はここ-*/
width: 0; /*見出しに三角の吹き出しをつける-変更しない-*/
height: 0; /*見出しに三角の吹き出しをつける-変更しない-*/
}
/* 見出しh2のデザインここまで */背景色をなくし、下線だけにするとスマートな印象になります。
リボンのかわいいデザイン
/* 見出しh2のデザインここから */
.article h2 {
position: relative; /*見出し要素を基準に指定-変更しない- */
padding: 0.5em; /*文字周りの余白を変更する場合はここ*/
background: #fa8072; /*背景色を変更する場合はここ*/
color: #fff; /*文字色を変更する場合はここ*/
border-radius: 1.5em 0 0 1.5em; /*角の丸さを変更する場合はここ*/
text-align: center; /*文字を中心にする-位置を変更する場合はここ-*/
}
.article h2::after {
position: absolute; /*relativeを基準に絶対位置を指定-変更しない-*/
content: ""; /*擬似要素before/afterを使用するために空のコンテンツを指定-変更しない-*/
top: 0; /*リボンの位置（縦方向）を変更する場合はここ*/
right: 0; /*リボンの位置（横方向）を変更する場合はここ*/
border: 1.2em solid transparent; /*見出しに三角のリボンをつける*/
border-right: 1.2em solid #fff; /*見出しに三角のリボンをつける-色を変更する場合はここ-*/
width: 0; /*見出しに三角のリボンをつける-変更しない-*/
height: 0; /*見出しに三角のリボンをつける-変更しない-*/
}
/* 見出しh2のデザインここまで */吹き出しにも使用していた三角を見出しの端っこに持ってくるだけでリボン風になります。
リボン風にすることで可愛らしい印象になります。
タグ風のデザイン
/* 見出しh2のデザインここから */
.article h2 {
padding: 0.5em; /*文字周りの余白を変更する場合はここ*/
border-left: 15px solid #b22222; /*左ラインのデザインを変更する場合はここ*/
color: #b22222; /*文字色を変更する場合はここ*/
}
/* 見出しh2のデザインここまで */左側にラインを持ってくるとタグっぽくなります。
こちらもシンプルなデザインで使いやすいですね。
タグ風のデザイン
/* 見出しh2のデザインここから */
.article h2 {
padding: 0.5em; /*文字周りの余白を変更する場合はここ*/
border-left: 15px solid #e5a323; /*左ラインのデザインを変更する場合はここ*/
border-bottom: 1px solid #e5a323; /*下ラインのデザインを変更する場合はここ*/
color: #e5a323; /*文字色を変更する場合はここ*/
}
/* 見出しh2のデザインここまで */先程の見出しに下線を追加すると、さらにタグっぽくなります。
こちらの方がページ内でメリハリができるような印象を受けます。
アウトドア記事向けのデザイン
/* 見出しh2のデザインここから */
.article h2 {
position: relative; /*見出し要素を基準に指定-変更しない- */
padding: 0.5em 1.6em; /*文字周りの余白を変更する場合はここ*/
background: #d2b48c; /*背景色を変更する場合はここ*/
color : #fff; /*文字色を変更する場合はここ*/
}
.article h2::before {
font-family: "Font Awesome 5 Free";
content: "\f6fc"; /*アイコンを変更する場合はここ*/
position: absolute; /*relativeを基準に絶対位置を指定-変更しない-*/
top: 0.5em; /*アイコン位置（縦方向）を変更する場合はここ*/
left: 0.2em; /*アイコン位置（横方向）を変更する場合はここ*/
color: #fff; /*アイコン色を変更する場合はここ*/
}
/* 見出しh2のデザインここまで */アイコンを使ってワンポイント加えるのもおすすめです。
見出しに使用しているアイコンは、ユニコードを変更することで自由にアレンジできます。
こちらのサイトからいろんなアイコンを見るのも楽しいです。
アウトドア記事向けのデザイン
/* 見出しh2のデザインここから */
.article h2 {
position: relative; /*見出し要素を基準に指定-変更しない- */
padding: 0.5em 1.6em; /*文字周りの余白を変更する場合はここ*/
color : #556b2f; /*文字色を変更する場合はここ*/
border-bottom: solid 2px #556b2f; /*下線のデザインを変更する場合はここ*/
}
.article h2::before {
font-family: "Font Awesome 5 Free";
content: "\f6fc"; /*アイコンを変更する場合はここ*/
position: absolute; /*relativeを基準に絶対位置を指定-変更しない-*/
top: 0.5em; /*アイコン位置（縦方向）を変更する場合はここ*/
left: 0.2em; /*アイコン位置（横方向）を変更する場合はここ*/
color: #556b2f; /*アイコン色を変更する場合はここ*/
}
/* 見出しh2のデザインここまで */アウトドア記事におすすめの見出しのデザインです。
ペット記事向けのデザイン
/* 見出しh2のデザインここから */
.article h2 {
position: relative; /*見出し要素を基準に指定-変更しない- */
padding: 0.5em 1.5em; /*文字周りの余白を変更する場合はここ*/
color : #fff; /*文字色を変更する場合はここ*/
background: #ffa07a; /*背景色を変更する場合はここ*/
}
.article h2::before {
font-family: "Font Awesome 5 Free";
content: "\f1b0"; /*アイコンを変更する場合はここ*/
position: absolute; /*relativeを基準に絶対位置を指定-変更しない-*/
top: 0.5em; /*アイコン位置（縦方向）を変更する場合はここ*/
left: 0.2em; /*アイコン位置（横方向）を変更する場合はここ*/
color: #fff; /*アイコン色を変更する場合はここ*/
}
/* 見出しh2のデザインここまで */猫の肉球のアイコンを使った見出しです。
ペット関連記事におすすめのデザインです。
ペット記事向けのデザイン
/* 見出しh2のデザインここから */
.article h2 {
position: relative; /*見出し要素を基準に指定-変更しない- */
padding: 0.5em 1.5em; /*文字周りの余白を変更する場合はここ*/
color : #fa8072; /*文字色を変更する場合はここ*/
border-bottom: solid 2px #fa8072; /*下線のデザインを変更する場合はここ*/
}
.article h2::before {
font-family: "Font Awesome 5 Free";
content: "\f1b0"; /*アイコンを変更する場合はここ*/
position: absolute; /*relativeを基準に絶対位置を指定-変更しない-*/
top: 0.5em; /*アイコン位置（縦方向）を変更する場合はここ*/
left: 0.2em; /*アイコン位置（横方向）を変更する場合はここ*/
color: #fa8072; /*アイコン色を変更する場合はここ*/
}
/* 見出しh2のデザインここまで */こちらのシンプルなデザインも可愛いですね。
ペット記事向けのデザイン
/* 見出しh2のデザインここから */
.article h2 {
position: relative; /*見出し要素を基準に指定-変更しない- */
padding: 0.5em; /*文字周りの余白を変更する場合はここ*/
color: #202f55; /*文字色を変更する場合はここ*/
border-bottom: 2px solid #202f55; /*下線のデザインを変更する場合はここ*/
}
.article h2::after {
font-family: "Font Awesome 5 Free";
content: "\f6d3"; /*アイコンを変更する場合はここ*/
position: absolute; /*relativeを基準に絶対位置を指定-変更しない-*/
top: 0.8em; /*アイコン位置（縦方向）を変更する場合はここ*/
right: 1em; /*アイコン位置（横方向）を変更する場合はここ*/
font-size: 1.2em; /*アイコンのサイズを変更する場合はここ*/
}
/* 見出しh2のデザインここまで */ワンちゃんがお散歩しているかのような見出しです。可愛いですね。
学習記事向けのデザイン
/* 見出しh2のデザインここから */
.article h2 {
position: relative; /*見出し要素を基準に指定-変更しない- */
padding: 0.5em; /*文字周りの余白を変更する場合はここ*/
color: #4169e1; /*文字色を変更する場合はここ*/
border-bottom: 2px dashed #4169e1; /*下線のデザインを変更する場合はここ*/
}
.article h2::after {
font-family: "Font Awesome 5 Free";
content: "\f304"; /*アイコンを変更する場合はここ*/
position: absolute; /*relativeを基準に絶対位置を指定-変更しない-*/
top: 1em; /*アイコン位置（縦方向）を変更する場合はここ*/
right: 1em; /*アイコン位置（横方向）を変更する場合はここ*/
}
/* 見出しh2のデザインここまで */アイコンを見出しの後ろにもってくることもできます。
旅行記事向けのデザイン
/* 見出しh2のデザインここから */
.article h2 {
position: relative; /*見出し要素を基準に指定-変更しない- */
padding: 0.5em; /*文字周りの余白を変更する場合はここ*/
color: #8fbc8f; /*文字色を変更する場合はここ*/
border-bottom: 2px solid #8fbc8f; /*下線のデザインを変更する場合はここ*/
}
.article h2::after {
font-family: "Font Awesome 5 Free";
content: "\f5e4"; /*アイコンを変更する場合はここ*/
position: absolute; /*relativeを基準に絶対位置を指定-変更しない-*/
top: 0.8em; /*アイコン位置（縦方向）を変更する場合はここ*/
right: 1em; /*アイコン位置（横方向）を変更する場合はここ*/
font-size: 1.2em; /*アイコンのサイズを変更する場合はここ*/
}
/* 見出しh2のデザインここまで */ボーダの下線がいい味を出しています。
旅行記事向けのデザイン
/* 見出しh2のデザインここから */
.article h2 {
position: relative; /*見出し要素を基準に指定-変更しない- */
padding: 0.5em; /*文字周りの余白を変更する場合はここ*/
color: #0073a8; /*文字色を変更する場合はここ*/
border-bottom: 2px solid #0073a8; /*下線のデザインを変更する場合はここ*/
}
.article h2::after {
font-family: "Font Awesome 5 Free";
content: "\f5b0"; /*アイコンを変更する場合はここ*/
position: absolute; /*relativeを基準に絶対位置を指定-変更しない-*/
top: 0.7em; /*アイコン位置（縦方向）を変更する場合はここ*/
right: 1em; /*アイコン位置（横方向）を変更する場合はここ*/
font-size: 1.2em; /*アイコンのサイズを変更する場合はここ*/
}
/* 見出しh2のデザインここまで */今から旅立つぞ！という感じの見出しですね。
趣味記事向けのデザイン
/* 見出しh2のデザインここから */
.article h2 {
position: relative; /*見出し要素を基準に指定-変更しない- */
padding: 0.5em; /*文字周りの余白を変更する場合はここ*/
color: #7b5544; /*文字色を変更する場合はここ*/
border-bottom: 2px solid #7b5544; /*下線のデザインを変更する場合はここ*/
}
.article h2::after {
font-family: "Font Awesome 5 Free";
content: "\f0f4"; /*アイコンを変更する場合はここ*/
position: absolute; /*relativeを基準に絶対位置を指定-変更しない-*/
top: 0.7em; /*アイコン位置（縦方向）を変更する場合はここ*/
right: 1em; /*アイコン位置（横方向）を変更する場合はここ*/
font-size: 1.2em; /*アイコンのサイズを変更する場合はここ*/
}
/* 見出しh2のデザインここまで */コーヒーカップによって、ホッと一息落ち着く雰囲気になります。
いかがでしたでしょうか。
見出しのデザインや色を変えるだけでもサイトの雰囲気はガラリと変わります。
ブログの記事やテーマカラーにぴったりの見出しを探してみて下さい。
見出しデザインのCSSの中身が気になる方は、こちらの記事もご参考になさって下さい。
また、「CSSを参考書で勉強したい」という方は、下記の本がおすすめです！
「プロから学びたい！」という方は、現役エンジニアから学べるオンラインに特化したプログラミングスクールを試して見るのもオススメです！
最後までご覧いただき、ありがとうございました。