WordPress Cocoon

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

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

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

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

デフォルトのCSSを確認

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

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

一度CSSをリセットする

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

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

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

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

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

こんな感じになります↓

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

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

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

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

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

オシャレ装飾で見出しに存在感を!CSSで簡単に作れる見出しデザイン40選|ferret [フェレット]
ホームページの重要な要素の1つである見出しですが、毎回似たり寄ったりのデザインになったり、作るのに時間がかかりすぎていませんか。 今回は見出しデザインで悩む方に向けて、オシャレな装飾ができるCSSの見出しを紹介した記事をまとめてご紹介します。
ひとこと
ひとこと

やっぱり見やすいのが一番!

コメント