ワードプレスのカスタム見出し用のCSSを紹介

記事の見出しは、読者の興味を引きつけ、読み進めてもらうための重要な要素です。ただの文字の羅列ではなく、デザイン性を加えることで、内容の魅力度もグッと上がります。この記事では、CSSを使って簡単に実装できる、30種類の見出しデザインをご紹介します。

基本のスタイル

まずは、シンプルで使いやすい、基本的なデザインから見ていきましょう。もし、ワードプレスのカスタムCSSにはりつけてもダメな場合は「h2 」の部分を確認しましょう。ワードプレスの無料テーマで人気のコクーンの場合は「.article h2」となります。

1. シンプルな下線

CSS

h2 {
  border-bottom: 2px solid #333;
}

2. 左側の縦線

CSS

h2 {
  border-left: 5px solid #333;
  padding-left: 10px;
}

3. 太字と色

CSS

h2 {
  font-weight: bold;
  color: #007bff;
}

アニメーション・特殊効

クリックやホバーで変化する、動きのあるデザインです。

4. ホバーで色が変わる

CSS

h2 {
  transition: color 0.3s;
}
h2:hover {
  color: #ff5722;
}

5. ホバーで下線が伸びる

CSS

h2 {
  position: relative;
}
h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #ff5722;
  transition: width 0.3s;
}
h2:hover::after {
  width: 100%;
}

🎨 グラデーション

グラデーションを使って、おしゃれな見出しを作成します。

6. グラデーション下線

CSS

h2 {
  border-bottom: 2px solid;
  border-image: linear-gradient(to right, #00c6ff, #0072ff);
  border-image-slice: 1;
}

7. テキストグラデーション

CSS

h2 {
  background: linear-gradient(to right, #ff9a9e, #fad0c4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

🖼️ 画像・アイコン

アイコンや画像を組み合わせて、見出しに個性を出します。

8. アイコン付き

CSS

h2::before {
  content: '🌟';
  margin-right: 10px;
}

9. 背景画像

CSS

h2 {
  background-image: url('your-image.png');
  background-size: cover;
  color: white;
  padding: 10px;
}

🔲 枠線・ボックス

枠で囲んで、見出しを強調します。

10. 枠線

CSS

h2 {
  border: 2px solid #333;
  padding: 10px;
}

11. 丸みを帯びたボックス

CSS

h2 {
  background-color: #f0f0f0;
  border-radius: 10px;
  padding: 10px;
}

✂️ 線の切り替え

上下の線や二重線など、線の種類を変えてみます。

12. 上下線

CSS

h2 {
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  padding: 10px 0;
}

13. 二重線

CSS

h2 {
  border-bottom: 3px double #333;
  padding-bottom: 5px;
}

📦 影・立体感

影を使って、見出しに立体感を出します。

14. テキストシャドウ

CSS

h2 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

15. ボックスシャドウ

CSS

h2 {
  background-color: #fff;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
  padding: 10px;
}

🧩 複雑な組み合わせ

複数のテクニックを組み合わせて、個性的なデザインを作ります。

16. 下線とアイコン

CSS

h2 {
  position: relative;
  border-bottom: 2px solid #ccc;
  padding-bottom: 5px;
}
h2::before {
  content: '👉';
  position: absolute;
  top: 50%;
  left: -20px;
  transform: translateY(-50%);
}

17. 二重線と背景色

CSS

h2 {
  background-color: #f9f9f9;
  border-bottom: 5px double #333;
  padding: 10px;
}

📈 注目度アップ

見出しをさらに目立たせるためのデザインです。

18. 傾き

CSS

h2 {
  transform: skew(-10deg);
  background-color: #ffeb3b;
  padding: 10px;
}

19. 吹き出し風

CSS

h2 {
  position: relative;
  background-color: #cce7ff;
  border-radius: 10px;
  padding: 10px;
}
h2::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 20px;
  border-top: 10px solid #cce7ff;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

🔄 線の装飾

シンプルながらもアクセントになる線のデザインです。

20. 点線

CSS

h2 {
  border-bottom: 2px dotted #333;
}

21. 波線

CSS

h2 {
  border-bottom: 2px dashed #333;
}

22. ギザギザ

CSS

h2 {
  border-bottom: 5px solid #333;
  border-image: url('data:image/svg+xml,...'); /* SVGでギザギザ模様を作成 */
  border-image-slice: 1;
}

🏷️ タグ風・リボン風

タグやリボンのような、個性的で可愛らしいデザインです。

23. タグ風

CSS

h2 {
  position: relative;
  background-color: #ff9800;
  color: white;
  padding: 5px 15px;
  display: inline-block;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%, 0 50%);
}

24. リボン風

CSS

h2 {
  position: relative;
  background-color: #f44336;
  color: white;
  padding: 10px 20px 10px 30px;
}
h2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 15px solid white;
}

✍️ 手書き風

フォントやCSSを使って、手書きのような温かみのあるデザインです。

25. 手書き風フォント

CSS

h2 {
  font-family: 'Kaushan Script', cursive; /* Google Fontsなどから */
}

26. 手書き風下線

CSS

h2 {
  position: relative;
}
h2::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 5px;
  background-image: url('data:image/svg+xml,...'); /* SVGで手書き風の線を実装 */
}

🔳 ミニマルなデザイン

シンプルで洗練された、ミニマルなデザインです。

27. 細い下線

CSS

h2 {
  border-bottom: 1px solid #ccc;
  padding-bottom: 5px;
}

28. 小さな丸

CSS

h2::before {
  content: '●';
  margin-right: 5px;
  color: #333;
}

29. 縦書き風

CSS

h2 {
  writing-mode: vertical-rl;
  text-orientation: upright;
}

.custom-heading-container .h2-style-1 {
  padding-bottom: 0.5em !important;
  border-bottom: 2px solid #4a90e2 !important;
}

.custom-heading-container .h2-style-2 {
  padding-top: 0.5em !important;
  border-top: 2px solid #4a90e2 !important;
}

.custom-heading-container .h2-style-3 {
  border-left: 6px solid #4a90e2 !important;
  padding: 0.5em 0.8em !important;
  background-color: #f4f8fb !important;
}

.custom-heading-container .h2-style-4 {
  padding-bottom: 0.5em !important;
  border-bottom: 2px dotted #50e3c2 !important;
}

.custom-heading-container .h2-style-5 {
  padding-bottom: 0.5em !important;
  border-bottom: 2px dashed #50e3c2 !important;
}

.custom-heading-container .h2-style-6 {
  padding-bottom: 0.5em !important;
  border-bottom: 3px double #4a90e2 !important;
}

.custom-heading-container .h2-style-7 {
  padding: 0.5em 0 !important;
  border-top: 2px solid #d0d0d0 !important;
  border-bottom: 2px solid #d0d0d0 !important;
}

.custom-heading-container .h2-style-8 {
  border-left: 6px solid #f5a623 !important;
  border-bottom: 2px solid #f5a623 !important;
  padding: 0.5em 0.8em !important;
}

.custom-heading-container .h2-style-9 {
  position: relative !important;
  padding-left: 1.8em !important;
}
.custom-heading-container .h2-style-9::before {
  content: '' !important;
  position: absolute !important;
  left: 0.5em !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 0.8em !important;
  height: 0.8em !important;
  background-color: #f5a623 !important;
  border-radius: 50% !important;
}

.custom-heading-container .h2-style-10 {
  position: relative !important;
  padding-left: 1.8em !important;
}
.custom-heading-container .h2-style-10::before {
  content: '' !important;
  position: absolute !important;
  left: 0.5em !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 0.8em !important;
  height: 0.8em !important;
  background-color: #bd10e0 !important;
}

.custom-heading-container .h2-style-11 {
  position: relative !important;
  padding: 0.5em 0.8em !important;
}
.custom-heading-container .h2-style-11::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 8px !important;
  height: 100% !important;
  background-color: #4a90e2 !important;
}
.custom-heading-container .h2-style-11::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 30px !important;
  height: 8px !important;
  background-color: #4a90e2 !important;
}

.custom-heading-container .h2-style-12 {
  position: relative !important;
  background: #eef5fd !important;
  border-radius: 5px !important;
  padding: 0.8em 1em !important;
}
.custom-heading-container .h2-style-12::after {
  content: '' !important;
  position: absolute !important;
  top: 100% !important;
  left: 30px !important;
  border: 10px solid transparent !important;
  border-top: 10px solid #eef5fd !important;
}

.custom-heading-container .h2-style-13 {
  padding: 0.8em 1em !important;
  border: 2px dashed #9b9b9b !important;
  background: #fafafa !important;
}

.custom-heading-container .h2-style-14 {
  position: relative !important;
  padding: 0.5em 2em !important;
}
.custom-heading-container .h2-style-14::before, .custom-heading-container .h2-style-14::after {
  position: absolute !important;
  font-size: 1.5em !important;
  font-weight: bold !important;
  color: #4a90e2 !important;
}
.custom-heading-container .h2-style-14::before {
  content: '「' !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}
.custom-heading-container .h2-style-14::after {
  content: '」' !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

.custom-heading-container .h2-style-15 {
  position: relative !important;
  padding-left: 2em !important;
}
.custom-heading-container .h2-style-15::before {
  content: '✔' !important;
  position: absolute !important;
  left: 0.5em !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #50e3c2 !important;
  font-weight: bold !important;
}

.custom-heading-container .h2-style-16 {
  color: #ffffff !important;
  background-color: #4a90e2 !important;
  padding: 0.8em 1em !important;
  border-radius: 5px !important;
}

.custom-heading-container .h2-style-17 {
  padding: 0.8em 1em !important;
  background: linear-gradient(to right, #e0eaf3 30%, transparent 30%) !important;
}

.custom-heading-container .h2-style-18 {
  color: #ffffff !important;
  padding: 0.8em 1em !important;
  background: linear-gradient(to right, #4a90e2, #50e3c2) !important;
  border-radius: 5px !important;
}

.custom-heading-container .h2-style-19 {
  padding: 0.8em 1em !important;
  background-image: linear-gradient(
    135deg,
    #f4f8fb 25%, #ffffff 25%,
    #ffffff 50%, #f4f8fb 50%,
    #f4f8fb 75%, #ffffff 75%,
    #ffffff 100%
  ) !important;
  background-size: 8px 8px !important;
  border-left: 6px solid #4a90e2 !important;
}

.custom-heading-container .h2-style-20 {
  background: linear-gradient(transparent 70%, #f5e223 70%) !important;
  display: inline-block !important;
  padding-bottom: 0.2em !important;
  padding-top: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.custom-heading-container .h2-style-21 {
  position: relative !important;
  padding-bottom: 0.8em !important;
}
.custom-heading-container .h2-style-21::after {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 3px !important;
  background: linear-gradient(to right, #4a90e2, #bd10e0) !important;
}

.custom-heading-container .h2-style-22 {
  background: #f5a623 !important;
  color: #fff !important;
  padding: 0.6em 1em !important;
  position: relative !important;
}
.custom-heading-container .h2-style-22::after {
  content: '' !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  border-top: 10px solid #d48e1a !important;
  border-left: 10px solid transparent !important;
}

.custom-heading-container .h2-style-23 {
  position: relative !important;
  background: #50e3c2 !important;
  color: #fff !important;
  padding: 0.8em 1em !important;
  border-radius: 3px !important;
}
.custom-heading-container .h2-style-23::before {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: -15px !important;
  margin-top: -15px !important;
  border: 15px solid transparent !important;
  border-right: 15px solid #3bb89d !important;
}

.custom-heading-container .h2-style-24 {
  position: relative !important;
  padding: 0.8em 1em 0.8em 2.5em !important;
  background: #f4f8fb !important;
  border-radius: 0 5px 5px 0 !important;
}
.custom-heading-container .h2-style-24::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -15px !important;
  border-width: 25px 15px 25px 0 !important;
  border-style: solid !important;
  border-color: transparent #f4f8fb transparent transparent !important;
}
.custom-heading-container .h2-style-24::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 5px !important;
  margin-top: -5px !important;
  width: 10px !important;
  height: 10px !important;
  background-color: #fff !important;
  border-radius: 50% !important;
  box-shadow: 0 0 0 2px #d0d0d0 !important;
}

.custom-heading-container .h2-style-25 {
  position: relative !important;
  background: #4a90e2 !important;
  color: #fff !important;
  padding: 0.8em 1em !important;
}
.custom-heading-container .h2-style-25::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  right: 20px !important;
  border-width: 0 15px 40px 15px !important;
  border-style: solid !important;
  border-color: transparent transparent #fff transparent !important;
}

.custom-heading-container .h2-style-26 {
  position: relative !important;
  background: #f4f8fb !important;
  padding: 0.8em 1em !important;
  border-left: 4px solid #4a90e2 !important;
}
.custom-heading-container .h2-style-26::after {
  content: '' !important;
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  width: 100% !important;
  height: 100% !important;
  background: #d0d0d0 !important;
  z-index: -1 !important;
}

.custom-heading-container .h2-style-27 {
  color: #444 !important;
  text-shadow: 2px 2px 3px #aaa !important;
}

.custom-heading-container .h2-style-28 {
  display: inline-block !important;
  font-weight: bold !important;
  background: -webkit-linear-gradient(45deg, #4a90e2, #bd10e0) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.custom-heading-container .h2-style-29 {
  position: relative !important;
  padding: 1em !important;
  text-align: center !important;
}
.custom-heading-container .h2-style-29::before {
  content: 'HEADING' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: 3em !important;
  color: rgba(74, 144, 226, 0.1) !important;
  font-weight: bold !important;
  z-index: -1 !important;
}

.custom-heading-container .h2-style-30 {
  position: relative !important;
  padding-left: 2em !important;
  border-bottom: 2px solid #4a90e2 !important;
  counter-increment: h2-counter !important;
}
.custom-heading-container .h2-style-30::before {
  content: counter(h2-counter, decimal-leading-zero) !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: #4a90e2 !important;
  color: #fff !important;
  width: 1.5em !important;
  height: 1.5em !important;
  line-height: 1.5em !important;
  text-align: center !important;
  border-radius: 50% !important;
  font-size: 0.8em !important;
  font-weight: bold !important;
}