【Cocoon】記事の見出し（h2〜h6）デザインを変更する方法

Cocoonを導入したけど、見出しのカスタマイズってできるの？

どうやってカスタマイズするの？

そんな疑問に答えます。

このブログで利用しているWordPressテーマ「Cocoon」は無料なのに高機能なので、利用者としては非常にありがたいのですが一つだけ難点があります。

それは「デザイン」がシンプルすぎるということです。

スキンレイアウトも沢山ありますが、大きくデザインは変わらないです。

そのため、オリジナリティを出すためにはCSSでカスタマイズが必要になってきます。

そこで、今回は「記事の見出し」をカスタマイズしてみました。

【Cocoon】記事の見出し（h2〜h6）デザインを変更する方法
1. 「style.css」にカスタマイズを実施
  1. ①【外観＞テーマエディター】
  2. ②【外観＞カスタマイズ＞追加CSS】
2. 【コピペOK】CSSのカスタマイズ内容
まとめ：自分好みにカスタマイズしよう！

【Cocoon】記事の見出し（h2〜h6）デザインを変更する方法

カスタマイズ前の見出しはこんな感じです。かなりシンプルですね。

デザイン変更後の見出しがコチラです。

シンプルなイメージは変えずに、このブログのイメージカラーに合わせてみました。

ブログ全体のカラーとの統一感が出て見やすくなったと思います。

「style.css」にカスタマイズを実施

まずは、見出しデザインのデフォルト状態を確認しておきましょう。

CSSソースコードはブラウザのデベロッパーツールか、親テーマのstyle.cssで確認しましょう。

ソースコードは以下のようになっています。

.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;
  }
}

それでは、これをカスタマイズしていきます。

カスタマイズするのは「style.css」です。

編集方法は２通りあり、以下のいずれかで編集しましょう。

style.cssの編集方法

①【外観＞テーマエディター】

②【外観＞カスタマイズ＞追加CSS】

①【外観＞テーマエディター】

編集するテーマは「Cocoon Child」を選択しましょう。

そうしないと、Cocoonのアップデートをした際にカスタマイズ内容が書き換えられてなくなってしまいます。

②【外観＞カスタマイズ＞追加CSS】

コチラにCSSを記載しても大丈夫です。①、②どちらかで実施しましょう。

【コピペOK】CSSのカスタマイズ内容

僕が使っている見出しのCSSです。

ソースコードを記載しておきますので、HTML/CSSはよくわからない方はコピペして使っていただいて大丈夫です。

/**見出し**/
.article h2 {
    color: #000;
    padding: .8em 1em;
    margin-top: 80px;
    background: #F7F7F7; 
    border-left: 10px solid #3fccbd;
    border-bottom: 1px solid #3fccbd;
}
.article h3 {
    color: #333;
    padding: .5em 1em;
    background-color: white;
    letter-spacing: 1.6px;
    Border-left: 9px solid #3fccbd;
    margin-top: 60px;
    font-weight:600;
}
.article h4 {
    color: #333;
    padding: .5em 1em;
    background-color: white;
    letter-spacing: 1.6px;
    border-left: 6px solid #3fccbd;
    margin-top: 60px;
    font-weight:600;
}
.article h5 {
    color: #444d53;
    margin-top: 40px;
    border-bottom: solid 2px #3fccbd;
}
.article h6 {
    color: #444d53;
    margin-top: 40px;
    border-bottom: solid 1px #3fccbd;
}