【Cocoon】記事見出し(h2〜h6)をおしゃれにカスタマイズ!コピペで初心者も簡単!

【Cocoon】記事見出し(h2〜h6)をおしゃれにカスタマイズ!コピペで初心者も簡単!wordpress
この記事は約5分で読めます。

こんにちは!
Naoya(@lisbiz_info)です。
昨日は全く眠れなくてオールして記事を書いています。
とそんなことは置いておいて、
今日は記事の見出しをおしゃれにカスタマイズする方法をお伝えしたいと思います。

 

初期の見出し

初期見出し

Cocoonの初期の設定では、上記のようにとてもシンプルな見出しになっています。
シンプルが好きって方もいるかもしれませんが、
僕的にはもう少し色合いやアイコンなどがあったほうがいいなと思ったので、
カスタマイズをしてみました。

 

見出しを変更するためにCSSを一度リセット

新しい見出しに変更するために、ボーダー(線)や背景色を一度すべてリセットをします。
リセットをしないと正常に変更されない場合があります。

.article h2,
.article h5,
.article h3,
.article h4,
.article h5,
.article h6{ /*見出し初期化*/
padding: 0;
margin: 0;
border-collapse: separate;
border-spacing: 0;
border-top: none;
border-right: none;
border-bottom: none;
border-left: none;
line-height: normal;
position:relative;
}

これでリセットが完了しました。

あとは見出しのCSSを追記していくだけで完了です!

 

カスタマイズ内容

まだ変更している部分があるので、
少しおかしい箇所もありますが、
初心者なのでご容赦を(笑)

.article h2{ /*見出し2*/
color: white;
background: #fd5300;
margin-top: 40px;
margin-bottom: 20px;
padding: 0.5em 0.5em 0.5em 1.8em;
line-height: 1.4; /*高さ*/
}
.article h2:before {
font-family: FontAwesome;
content: "\f14a";
position: absolute;
left : 0.5em; /*左端からのアイコンまでの距離*/
}
.article h3{ /*見出し3カスタマイズ*/
background: #fffaf4; /*背景色*/
border-left: 7px solid #fd5300; 
border-right: 1px solid #fd5300;
border-top: 1px solid #fd5300;
border-bottom: 1px solid #fd5300;
font-size: 22px;
padding: 6px 20px;
line-height: 1.25;
}
.article h4 { /*見出し4カスタマイズ*/
padding: 0.5em 0.5em 0.5em 1.5em;
line-height: 1.4;/*行高*/
color: #fd5300;/*文字色*/
border-top: dotted 1px gray;
border-bottom: dotted 1px gray;
background: #fffff4;
}
.article h4:before {
font-family: FontAwesome;
content: "\f138";
position: absolute;
font-size: 1em;
left: 0.25em;
top: 0.5em;
color: #fd5300;
}
.article h5{ /*見出し5カスタマイズ*/
background: linear-gradient(transparent 70%, #f99666 70%);
}
.article h6{ /*見出し6カスタマイズ*/
padding-left: 1.2em;
letter-spacing: 2px;
}
.article h6:before {
font-family: FontAwesome;
content: "\f00c";
position: absolute;
font-size: 1em;
left: 0;
top: 0;
color: #5ab9ff; 
}

 

実際にやってみると下記の画像のように変更されます。
見出し例

ちょっとまだ気に入らない部分もありますが、
今のところはこれで満足しています。

色などはご自分のサイトの配色に合わせて随時変更をしてください!

 

最後に

いかがでしたか?
コピペだけで基本は簡単にできたと思います。

今回は僕が実際に使っている見出しの例を上げましたが、
いつも参考にさせていただいているサルワカさんの下記の記事では、
シンプル、おしゃれ、かわいいすべての見出しのコードがたくさんあるので、
自分でぜひカスタマイズしてみてくださいね(^^♪

見出しを変えるだけでもデザインがいいと記事を書くのが楽しくなります!

 

 

最後までお読みいただきありがとうございました。

ではまた。

コメント

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