当サイト採用!!Cocoonテーマの詳細はコチラ

【Cocoon】デフォルトの見出しをリセットしてカスタマイズする方法

Cocoonテーマ

Cocoonで見出しを変更しようとするとこのようなお悩みに遭遇しないでしょうか。

  1. 見出しが反映されない
  2. 反映されても余計な線が入る

実はこれはCocoonのデフォルト見出しをリセットすることで簡単に解決します!

クマさん
クマさん

これは難しい予感・・・CSSとか

キラ
キラ

CSSは欠かせないけど

コピペで簡単にできちゃうよ!

初心者でもわかるように、Cocoonの見出しがどのようなものなのか、変更する方法を徹底的に解説していきます。

この記事でわかること
  1. Cocoonのデフォルト見出し
  2. 見出しがうまく反映されない理由
  3. 見出しの変更方法

では、早速見ていきましょう。

 

スポンサーリンク

見出し変更する前に約束事

CSSを扱う際は、必ず子テーマを使用してください。

CSSとは

サイトデザインを構成されたもの

ですので、親テーマで編集してしまうとサイトデザインが崩れてしまう恐れがあり、最悪戻せなくなってしまいます。

クマさん
クマさん

戻せなくなったら致命傷だ・・・

また、テーマの更新プログラムが来て更新すると、親テーマのCSSが元の構成に戻ってしまいます。

全てのCSSを「Visual Studio Code」に保存するという方法もありますが、デザイン崩壊を防ぐためにも子テーマを使用しましょう。

 

Cocoonデフォルトの見出し

まず、Cocoonの見出しの仕組みについて簡単に解説していきます。

Cocoon見出しの仕組み


スキンテーマを使用しない場合、Cocoonの見出しはこんな感じです。

クマさん
クマさん

白黒で構成されたとてもシンプルなものだね

基本的にスキンテーマの見出しは、このデフォルトの見出しを基準に構成されています。

デフォルトの見出しの上に、スキンでカスタマイズされた見出しが重なっているとイメージするとわかりやすいでしょう。

ですので、デフォルトのサイズや幅などに少しでも相違があると・・・

このようにデザインされた赤い線とデフォルトの線が表示されてしまい、見栄えが悪くなってしまいますね。

クマさん
クマさん

だから線が2本になったりするのか

キラ
キラ

そういうこと!

だからデフォルトの見出しをリセットすれば解決だね

デフォルト見出しをリセット

リセットするには残念ながらCSSが必要ですが、以下のコードをコピペするだけです。

CSS
/* 見出しリセット */
/* 見出し2 */
.article h2{
background:none;
padding: 0;
}

/* 見出し3 */
.article h3{
border-top:none;
border-bottom:none;
border-left:none;
border-right:none;
padding: 0;
}

/* 見出し4 */
.article h4{
border-top:none;
border-bottom:none;
padding: 0;
}

/* 見出し5 */
.article h5{
border-bottom:none;
padding: 0;
}

/* 見出し6 */
.article h6{
border-bottom:none;
padding: 0;
}

こちらのコードを貼り付けることで、デフォルトの見出しは非表示(リセット)になります。

CSSの貼り付ける位置

上記コードは、Cocoonの子テーマに貼り付けます。

キラ
キラ

ワードプレスの外観→テーマエディタを順にクリック

このような画面になったら、右上の編集するテーマが「Cocoon Child」になっていること確認します。

「/*必要ならばここにコードを書く*/」の下に先程のコードを貼り付けてください。

ブラウザ

このように見出しデザインが何も表示されず、文字のみになっていたらリセットされています。

部分的に使用する場合

例えば見出し2だけという場合は、「/* 見出し2 */」から「}」部分までをコピペして貼り付けしてください

 

新たな見出しを設定する

Cocoonのセレクタは「h2」ではなく「.article h2」で設定されている場合が多いです。

CSS
.article h2{
  position: relative; /* 表示位置指定 */
  font-size: 24px; /* 文字の大きさ */
  color: black; /* 文字色 */
  border-top: dotted 3px #fc8f64; /* 線の種類、太さ、色 */
  border-bottom: dotted 3px #fc8f64; /* 線の種類、太さ、色 */
  padding:10px; /* 要素内の余白 */
}

マーカーで記した形で書き出し、その下に記述するプロパティはご自身で設定したり、他サイトを参考にしてください。

当サイトでも、簡単な見出しの作り方は紹介しております。

引用元:サルワカ「CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選」

上記はサルワカさんが作成した見出しの記事ですが、これを取り入れたい場合は「h1」より下の部分をコピペします。

CSS
.article h2{
  padding: 0.5em;/*文字周りの余白*/
  color: #494949;/*文字色*/
  background: #fffaf4;/*背景色*/
  border-left: solid 5px #ffaf58;/*左線(実線 太さ 色)*/
}

このように記述することで、見出し2にサルワカさんが作成した見出しに変更されます。

CSSは先程と同様に、子テーマに記述または貼り付けましょう。

記述ポイント

他のCSSと混在しないように、先程リセットのために貼り付けたコードの下に記述すること

 

まとめ

Cocoonで見出しが反映されない、線が重なって見えてしまう原因はデフォルトの見出しが表示されたままになっているからです。

クマさん
クマさん

テーマで作成されたものが優先されちゃうんだね

見出し変更にはたくさんのCSSを使用しますが、紹介したコードをコピペするだけで簡単に変更できます。

注意

「追加CSS」では反映されません!!

おしゃれな見出しに変更して、サイトも独自性を出していくと良いですね。

子テーマで編集して貼り付けしても、子テーマを有効化していないと反映されませんので注意してください。

Cocoonテーマお役立ち情報
スポンサーリンク
キラをフォローする
キラ

2匹のペットと暮らしております。ペットを飼育する上での必要なものや情報などを発信していきます。またサイトカスタマイズにも挑戦しており、作成方法なども公開しております。
「まずは自分から動いてみる!」そして「自分で調べて身につける!」私のモットーです。

キラをフォローする
キラペット.com
タイトルとURLをコピーしました