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

アイキャッチ/見出しカスタマイズ

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

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

そこで!

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

こんな方のお役にたてます
  • テーマCocoonを使っている人
  • 見出しをカスタマイズしたい人
  • カスタマイズしたけれど元のデサインが残って困っている人

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

Cocoonのテーマを適用させたときの最初の見出しデサイン(h2~6)はこのようなシンプルなデザインになっています。

cocoon見出し

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

見出しデザインをリセットする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;
}

リセットする項目(プロパティ)

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

  • padding: 0 →内側余白を0にする
  • background-color: transparent →背景色を無効にする
  • border-top: 0 →上部の線を消す
  • border-right: 0 →右側の線を消す
  • border-bottom: 0 →下部の線を消す
  • border-left: 0 →左側の線を消す
  • border-radius: 0 → 角の丸みをなしにする

CSSプロパティは共通なので、テーマに合ったクラス名(.article h2の部分)に変更すればCocoon以外でも使うことができます。

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

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

/*見出しデザインリセット*/
.article h2,
.article h3,
.article h4,
.article h5,
.article h6{
  padding: 0; /*内側余白リセット*/
  background-color:transparent; /*背景色を無効に*/
  border:0; /*上下左右の枠線を消す*/
  border-radius: 0; /*角の丸みなし*/
}
  1. .article h2~6部分のクラス名は,(半角カンマ)で区切ることで複数指定できる
  2. 枠線を引くプロパティはborderと記述することで上下左右を一括で指定できる

【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の部分は消してください
  • 新しいスタイルで上書きできれば必ずしもリセットする必要はありません

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

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

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

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

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

Comment

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