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

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

見出しを自分好みに変えたいな!

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

そこで!

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

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

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

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

cocoon見出し

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

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

下記のCSSコードを張り付けてください。

子テーマを利用しましょう。

外観→テーマファイルフォルダ→スタイルシート(style.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 →左側の線を消す

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

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

見出しカスタマイズの下準備は完了です。

これで装飾が外れたので自分流にカスタマイズを楽しんでみてください。

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

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

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

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

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

ブログ関連カスタマイズ
\この記事をシェアする/
\はっちゃんをフォローする/
のんびり釣りっこ

Comment

Shopping


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