Cocoon／見出しのデザインをリセットする方法（CSSのコピペだけ）

見出しを好きなデザインに変えたいな！

こんなときはCSSの編集が必要になりますが、元のデザインの一部が残ってしまうことがあります。

そこで！

今回は一旦すべてのデザインをリセットする方法をご紹介します。

この記事を書いた人

• ブログ好きな40代主婦
• CocoonサイトをCSSでフルカスタマイズ
• JavaScriptを勉強中
• ドメインパワー32
• ワードプレスで２サイトを運営しています

はっちゃん
です

Cocoonデフォルトの見出しデザイン

Cocoonのテーマを適用させたときの最初の見出しデサイン（h２～６）はこのようなシンプルなデザインになっています。

シンプルとは言え背景色やボーダーラインが入っているので、一気にリセットしちゃいましょう！

見出しデザインをリセットするCSS

下記のCSSコードでリセットできるのでまずはこちらのコードをご覧ください。

/*見出しデザインリセット*/
.article h2 {
  padding: 0;
  background-color:transparent;
  border-radius: 0;
}

.article h3 {
  padding: 0;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
}

.article h4 {
  padding: 0;
  border-top: 0;
  border-bottom: 0;
}
 
.article h5{
  padding: 0;
  border-bottom: 0;
}

.article h6{
  padding: 0;
  border-bottom: 0;
}

リセットする項目（プロパティ）

ここで使っているプロパティと呼ばれる部分の意味は下記の通りです。

短縮してコードを書くことができる

上記では分かりやすくh2～h6見出しを個別に書きましたが、まとめてコードを短く記述できます。

/*見出しデザインリセット*/
.article h2,
.article h3,
.article h4,
.article h5,
.article h6{
  padding: 0;　/*内側余白リセット*/
  background-color:transparent;　/*背景色を無効に*/
  border:0;　/*上下左右の枠線を消す*/
  border-radius: 0;　/*角の丸みなし*/
}

【Before】
border-top: 0;
border-right: 0;
border-bottom: 0;
border-left: 0;

【After】
border:0;

すっきり短くまとまったね！

見出しについて補足

• Cocoonでは記事内の見出しをCSSで指定するときに.article h2のように先頭に.articleをつけて記述します（この部分とセレクタといいます）
• 見出しh5～6は記事を書く際にほとんど使うことはないかと思われるので、各自の判断で.article h5とarticle h6の部分は消してください
• 新しいスタイルで上書きできれば必ずしもリセットする必要はありません

カスタマイズの準備ができました

見出しの下準備は完了です。

これでデフォルトの見出し装飾が外れ真っ白の状態になりますので自分流にカスタマイズを楽しんでみてください。

私はよくサルワカさんのサイトを参考にしているのでリンクをのせておきます。

デザインが豊富、コピペできるコード完備なので使いやすいです！

CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選

h1〜h6タグの美しくおしゃれなデザインサンプルをたくさん紹介します。どれもコピペで使うことができます。

saruwakakun.com