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

アイキャッチ/見出しカスタマイズ
この記事はWordPressのテーマCocoon(コクーン)を対象としたカスタマイズになります。

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

こんなときは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では記事内の見出しは.article h2のように先頭に.articleをつけて記述します(この部分とセレクタといいます)
  • 見出しh5~6は記事を書く際にほとんど使うことはないかと思われるので、各自の判断で.article h5とarticle h6の部分は消してください
  • 新しいデザインで上書きできれば必ずしもリセットする必要はありません

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

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

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

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

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

カスタマイズが効かないとき

たった一文字の表記ミスでデザインが崩れたり効かなかったりするので、下記の点を確認してみてください。

  • コードは半角英数字になっているか(全角は使えません)
  • 前後や余白に余計な全角スペース、文字等が入っていないか
  • CSSクラスの前に"."が付いているか
  • CSSコードは{ }、メモ書きはきちんと/**/で囲んでいるか
  • 他に重複しているコードはないか(下に書いたコードが優先されます)


事前にバックアップをとり、カスタマイズは慎重に行いましょう。

ブログがもっと楽しくなる

基礎、応用編と分かれていて分かりやすい内容。CSSの理解を深めたい人へオススメです!!

カスタマイズ
\Follow/
Turicco

Comment

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