【WordPress】Cocoonのh2,h3の見出しデザインをカスタマイズ!

Cocoon

今回はCocoonの見出しをカスタマイズしていきます。

見出しというのは、<h2></h2><h3></h3>で囲った、タイトル等を指します。
今回はその見出しをデフォルトの状態から脱却するために、自分の思い描くデザインにカスタマイズしていきましょう!

スポンサーリンク

カスタマイズする箇所

Cocoonでデフォルトで設定されているタグは、h1~h6までありますが、今回よく使われるh2とh3の2つのタグをカスタマイズしていきます。

ちなみにCocoonのデフォルトの状態はこんな感じです。

今回のカスタマイズをするとこのようになります。

実際の使用している状態はこんなかんじ

カスタマイズですので子テーマ!!

当記事では少ししかファイルをカスタマイズしませんが、カスタマイズはカスタマイズなので、必ず子テーマを使用しましょう!
Cocoonは新しいテーマなので特に更新も多く、子テーマを使っていない場合は、施したカスタマイズがすべて無駄になることもあるのでご注意ください。

いざカスタマイズ!

カスタマイズをするために使用するファイルは「style.css」です。
編集する方法として
①【外観>テーマの編集】
②【外観>カスタマイズ>追加CSS】

どちらでも構いません!

style.cssを編集する

それではstyle.cssを編集していきます。
編集するといっても、基本的にはコピペでも大丈夫です。
次のコードをコピペすれば、見出しタグをカスタマイズすることができます。

/*h2タグ*/
.article h2{
	background-color:#fff;
	color:#20664f;  /*文字の色*/
	border-left:10px solid #38b48b;  /*見出し左線色・太さ*/
	border-bottom:1px solid #38b48b; /*見出し下線色・太さ*/
	padding:13px;
	margin-top:80px /*見出しとその直前の文字の距離*/
}
/*ここまで*/

/*h3タグ*/
.article h3{
	border:none;
	display:inline-block;
	color:#20664f; /*文字の色*/
	border-top:2px solid #38b48b; /*見出し上線色・太さ*/
	border-bottom:2px solid #38b48b; /*見出し下線色・太さ*/
	margin-top:30px; /*見出しとその直前の文字の距離*/
	margin-bottom:0px; /*見出しとその直後の文字の距離*/
}
/*ここまで*/

解説

上コードの右側にあるコメントを書いておきました。
編集したいところの数値を変えることによって、色や幅等を変えることができます。
少し変えてみたいという方は是非変更してみてください。
特に色などはそれぞれのサイトのメインカラーがあると思いますので、変えた方が良いと思います。

一応気を付けた点を挙げていくと、

h2見出しの場合

元々が背景色がべたっという作りだったこともあり、なんとなくもっさりしているようなイメージだったので、色味を抜いてすっきりさせてみました。
また多少高さもあったので、paddingの数値を減らして、多少高さがなくなりました。

h3見出しの場合

見出しの大きさとしてh2>h3であることから、その上下関係をはっきりさせるために、h3の見出しをメインコンテンツの幅いっぱいだったものを、文字数によって変動するものに変更しました。
これによって、見出しが2行にならない限りh2の見出しよりも短くなり、見やすくなったと個人的には思っています。

まとめ

いかがだったでしょうか?
小さいカスタマイズですが、大きくサイトのイメージが変わったと思います!

少しずつ小さい変化から、自分好みのブログに変えていきましょう~

コピペも良いですが・・・

Cocoonは高機能で人によってはカスタマイズなんて必要ないかもしれませんが、HTMLやCSSの知識あるとないとでは、トラブルがあった時に大きく違ってきます。
コピペも便利ですが、専門の本などを併せて使用すると、理解度がぐっと深まりますよ!

私が使用したおすすめの本はこちらです。

コメント