コピペOK!シンプルなCSSの見出しデザイン17選【WordPress】

ブログ / CSSのこと
スポンサーリンク

初めまして!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で三角形の装飾をつける方法
Webサイトを構築する上で「三角形」を表現する際に、画像で三角形を挿入している人は多いのではないでしょうか。実は、三角形はCSSのみで表現することができます。三角形はborderプロパティを活用して作られていることが多いです。要素の境界線を作るborderで、どうして三角形を作ることができるのかの理由を知れば、他の装飾...

ポップな吹き出しデザイン

/* 見出し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について勉強したい!という方にオススメの書籍はこちらです

ご覧いただき、ありがとうございました。

それではまた。よろしくお願いします!

この記事を書いた人
Hurari

音楽、旅行、DIY、筋トレが趣味のHurariです。
これまでにアジア8ヵ国を旅しています。

いつかは世界一周クルーズ旅をしたい!

Hurariをフォローする
ブログ / CSSのこと
スポンサーリンク
Hurariをフォローする
ふらりBLOG
タイトルとURLをコピーしました