WordPress Cocoon

【Cocoon】記事の見出しデザインをカスタマイズする方法（h2〜h6）

当サイトはアフィリエイト広告を利用しています。

WordPressテーマ「Cocoon」のカスタマイズ備忘録です。今回は投稿記事の見出しデザインをカスタマイズしてみました。

見出しを変えると手っ取り早くオリジナリティを出すことができるので、優先的にやっておきたい部分ですよね。

それでは早速やっていきましょう〜！

デフォルトのCSSを確認

カスタマイズを始める前に、最初から指定されているCSSをブラウザの開発者ツールか、親テーマのstyle.cssでチェックしておきます。

  • CSS（デフォルト）
  1. .article h1, .article h2, .article h3, .article h4, .article h5, .article h6 {
  2. line-height: 1.25;
  3. font-weight: bold;
  4. }
  5. .article h3, .article h4, .article h5, .article h6 {
  6. margin-top: 35px;
  7. margin-bottom: 20px;
  8. }
  9. .article h4, .article h5, .article h6 {
  10. font-size: 20px;
  11. padding: 6px 10px;
  12. }
  13. .article h2 {
  14. font-size: 24px;
  15. margin-top: 40px;
  16. margin-bottom: 20px;
  17. padding: 25px;
  18. background-color: #f3f4f5;
  19. }
  20. .article h3 {
  21. border-left: 6px solid #777;
  22. border-right: 1px solid #ccc;
  23. border-top: 1px solid #ccc;
  24. border-bottom: 1px solid #ccc;
  25. font-size: 22px;
  26. padding: 6px 20px;
  27. }
  28. .article h4 {
  29. border-top: 2px solid #ccc;
  30. border-bottom: 2px solid #ccc;
  31. }
  32. .article h5 {
  33. border-bottom: 2px solid #ccc;
  34. }
  35. .article h6 {
  36. border-bottom: 1px solid #ccc;
  37. }
  38. @media screen and (max-width: 480px) {
  39. .entry-title, .article h2, .article h3, .article h4, .article h5, .article h6 {
  40. font-size: 20px;
  41. padding: 10px;
  42. margin: 6px 0 12px;
  43. }
  44. }
.article h1, .article h2, .article h3, .article h4, .article h5, .article h6 {
  line-height: 1.25;
  font-weight: bold;
}
.article h3, .article h4, .article h5, .article h6 {
  margin-top: 35px;
  margin-bottom: 20px;
}
.article h4, .article h5, .article h6 {
  font-size: 20px;
  padding: 6px 10px;
}
.article h2 {
  font-size: 24px;
  margin-top: 40px;
  margin-bottom: 20px;
  padding: 25px;
  background-color: #f3f4f5;
}
.article h3 {
  border-left: 6px solid #777;
  border-right: 1px solid #ccc;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  font-size: 22px;
  padding: 6px 20px;
}
.article h4 {
  border-top: 2px solid #ccc;
  border-bottom: 2px solid #ccc;
}
.article h5 {
  border-bottom: 2px solid #ccc;
}
.article h6 {
  border-bottom: 1px solid #ccc;
}
@media screen and (max-width: 480px) {
  .entry-title, .article h2, .article h3, .article h4, .article h5, .article h6 {
    font-size: 20px;
    padding: 10px;
    margin: 6px 0 12px;
  }
}

デフォルトではこのように色も抑えめでシンプルなデザインになっていますね。

一度CSSをリセットする

背景色やボーダーなどは一度リセットしておいた方が自由に新しいCSSを追加できるので、子テーマのスタイルシート「style.css」に下記コードを追加して、デザインの邪魔になるであろう要素を一度リセットしておきます。

  • CSS
  1. .article h2 {
  2. padding: 0;
  3. background: none;
  4. }
  5. .article h3 {
  6. border: none;
  7. padding: 0;
  8. }
  9. .article h4 {
  10. border: none;
  11. padding: 0;
  12. }
  13. .article h5 {
  14. border: none;
  15. padding: 0;
  16. }
  17. .article h6 {
  18. border: none;
  19. padding: 0;
  20. }
.article h2 {
    padding: 0;
    background: none;
}
.article h3 {
    border: none;
    padding: 0;
}
.article h4 {
    border: none;
    padding: 0;
}
.article h5 {
    border: none;
    padding: 0;
}
.article h6 {
    border: none;
    padding: 0;
}

文字サイズ（font-size）や外側の余白（margin）はそのままにしてあるので、必要であれば変更してみてください。

この状態であれば新しいデザインを自由に追加することができるので、あとはネット上にたくさんある見出し用のCSSから好きなものをリセットコードより後に追記するだけです。

実際にデザインを変えてみた！

今回は読みやすさ重視でシンプルなデザインにしました。

  • CSS
  1. .article h2 {
  2. color: #fff;
  3. padding: .8em 1em;
  4. margin-top: 80px;
  5. background: #444d53;
  6. border-top: 4px solid #667d8c;
  7. border-bottom: 4px solid #667d8c;
  8. }
  9. .article h3 {
  10. color: #444d53;
  11. padding: .5em 0;
  12. margin-top: 40px;
  13. border-top: 3px solid #444d53;
  14. border-bottom: 3px solid #444d53;
  15. }
  16. .article h4 {
  17. color: #444d53;
  18. padding: .2em 1em;
  19. margin-top: 40px;
  20. border-left: 6px solid #444d53;
  21. }
  22. .article h5 {
  23. color: #444d53;
  24. margin-top: 40px;
  25. border-bottom: solid 2px #444d53;
  26. }
  27. .article h6 {
  28. color: #444d53;
  29. margin-top: 40px;
  30. border-bottom: solid 1px #444d53;
  31. }
.article h2 {
    color: #fff;
    padding: .8em 1em;
    margin-top: 80px;
    background: #444d53;
    border-top: 4px solid #667d8c;
    border-bottom: 4px solid #667d8c;
}
.article h3 {
    color: #444d53;
    padding: .5em 0;
    margin-top: 40px;
    border-top: 3px solid #444d53;
    border-bottom: 3px solid #444d53;
}
.article h4 {
    color: #444d53;
    padding: .2em 1em;
    margin-top: 40px;
    border-left: 6px solid #444d53;
}
.article h5 {
    color: #444d53;
    margin-top: 40px;
    border-bottom: solid 2px #444d53;
}
.article h6 {
    color: #444d53;
    margin-top: 40px;
    border-bottom: solid 1px #444d53;
}

こんな感じになります↓

最初とあんまり変わってない感じもしますが(笑)　ちょっとしたこだわりとしては、すべての見出しの外側上部の余白（margin-top）を多めにしました。

文章と見出しが近すぎると休む暇がないというか、息苦しい感じがするのである程度は余白があったほうが個人的には読みやすくて好きです。

好きなデザインにカスタマイズしよう！

見出し用のCSSは色んな方が紹介してくれていますが、デフォルトのデザインを一度リセットしてしまえば好きなようにカスタマイズできるので皆さんも自分のサイトに合わせて色々試してみてください。

こちらのサイトに色んな記事がまとめられていたので好きなデザインを探しやすいと思います↓

CSSで簡単に作れる見出しデザイン40選｜オシャレ装飾で見出しに存在感を
ホームページの重要な要素の1つである見出しですが、毎回似たり寄ったりのデザインになったり、作るのに時間がかかりすぎていたりしていませんか。今回は見出しデザインで悩む方に向けて、オシャレな装飾ができるCSSの見出しを紹介した記事をまとめました。
ferret-plus.com
WordPress
Cocoon
＼記事が役に立ったらシェアしてね／
DICE
うぇぶあしび

comment

  1. キラテン より:
    2019年8月27日 10:07 AM

    DICEさん
    参考になる情報、ありがとうございます。

    cocoonの目次や見出しのカスタマイズに使わせて頂きました。
    ストレスなく行えて、すごく満足です^^

    今後共、よろしくお願い致します。

    返信
  2. GABA より:
    2019年10月29日 1:24 PM

    見出しの設定で悩んでいたところ、この記事で一瞬で解決することができました。

    とても参考になる情報をありがとうございました！

    返信
    • DICEDICE より:
      2019年10月29日 4:33 PM

      コメントありがとうございます！
      そう言っていただけると嬉しいです。
      今後ともよろしくお願いします^^

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