Cocoonの「h2、h3見出しだけ」をカスタマイズする方法を解説！（h4以下はデフォルトを使います）
通常、「見出し」をカスタマイズする場合、h2タグ、h3タグをカスタマイズするのですが、その時に問題が発生します。
Cocoonサイドバーの見出しもh3になっているので、サイドバーにも適用されてしまうんです。
サイドバーは個別にカスタマイズしている場合、重複してしまってオカシな見た目に･･･。
そんなトラブルも回避できる方法なので、ぜひ見ていってくださいね。
ヒナキラたった2ステップ、コピペするだけでオッケー。
| テーマ名 | WordPressテーマ「Cocoon」 |
| 価格 | 無料 |
| 開発者 | わいひらさん（@MrYhira） |
Cocoon「h2、h3見出しだけ」のカスタマイズ２ステップ
Cocoonの見出しをカスタマイズする手順は下記の通りです。
- 見出しデザインのコードをコピー
- テーマファイルエディター(style.css)にコードを貼り付ける
ヒナキラコードをコピペするだけなので、簡単ですよ。
ステップ①：見出しデザインのコードをコピー
では、Cocoon見出しデザインを紹介します。
ヒナキラ当サイトの見出しに似ているデザインにしました。
使いたい場合は、コードをコピーして使ってください。
/* 見出し2 */
.article h2{
background:none;
padding: 0;
}
.article h2{
padding: 0.8em;/*文字周りの余白*/
color: #393f4c;/*文字の色*/
background: #f5f5f5;/*背景の色*/
border-left: solid 5px #778899;/*左線 太さ 色*/
}
/* 見出し3 */
.article h3{
border: none;
padding: 0;
}
h3{
position: relative;
padding: 0.25em 0;
}
.article .entry-content >h3:after {
content: "";
display: block;
height: 4px;
background: -webkit-linear-gradient(to right, rgb(119, 136, 153), transparent);
background: linear-gradient(to right, rgb(119, 136, 153), transparent);
}
見出しだけをカスタマイズするには、h3の部分に .entry-content > を追加するのが重要ポイントです。
これをしないと、サイドバーなど他のh3にまでカスタマイズの効力が及んでしまいますので･･･。
ここでは１つのパターンのみの紹介となりましたが、これ以外の見出しデザインにしたい場合は、下記の記事で好きなデザインを探してみて下さい。
ステップ②：テーマファイルエディターに貼り付ける
下記の通りに、先ほどコピーしたコードを「テーマファイルエディター」に貼り付ければ完了です。
以上です。
まとめ｜Cocoonの「見出しだけ」をカスタマイズ！
今回は、Cocoon「見出しだけ」をカスタマイズする方法を解説しました。
デフォルトから変更することで、オシャレな見た目をゲットできます。
ヒナキラあわせて、サイドバーの見た目なども変更しておくのがオススメ！
コピペするだけなので、ぜひ使ってみてくださいね。
【参考】SWELLのサイドバーは初めからオシャレ
ちょっとカスタマイズが面倒だなぁ･･･と思っているあなたへ。
当サイトでも使用しているSWELL
は、CSSなどのコードを使わなくてもオシャレです。
他の細かいところまでオシャレなので、見た目にこだわりたいなら、超絶おすすめなWordPressテーマ。
ブログの見た目をサクッとオシャレに指定方は、一度SWELLの公式サイトを覗いてみてくださいね。
＼ Cocoon開発者もイチオシする有料テーマ ／
コメント