サイトキーカラーの変更でスキンの見出しが影響を受ける件

サイトキーカラーの変更でスキンの見出しが影響を受ける件 サイドバー

今までCocoon用のスキンとして作った、ミックスシリーズ、サムライブルーシリーズをいろんな方に使ってもらっています。

ありがとございます!

でも前からちょっと気になることが。

たまに僕が作ったスキンを使っているブログを見かけることがあるんですが、サイドバーの見出しが変になっているものがいくつかありました。

Cocoonの「サイトキーカラー」の設定により、スキンのサイドバーの見出しが影響をうけてサイトキーカラーとボーダーが重なっているのが原因のようです。

「スキン + サイトキーカラーの変更」というカスタマイズをしたいのであれば、このあたりの見た目の問題を解消するために、CSSを変更する必要があります。

今回、サイトキーカラーを変更した時に「スキンの見出しを残すCSS」、逆に「スキンの見出しを消すCS」Sを作ったので紹介したいと思います。

サイトキーカラーを変更してスキンのサイドバーの見出しがおかしくなっている場合は、試してみてください。

スキンを適用した後に、サイトキーカラーを変更したらどうなるのか

ミックスグリーンを例に画像で説明します。

まずは、Cocoonの設定は何も変更していない状態でミックスグリーンを適用した場合。

サイドバーの見出しはこうなります。

Cocoonのサイトキーカラーとスキンの見出しが影響しないようにする

当然ですが、スキンの見出し(2色のボーダー)がちゃんと表示されています。

 

次に、この状態でCocoonの設定からサイトキーカラーを青に変更してみます。

Cocoonのサイトキーカラーとスキンの見出しが影響しないようにする

 

すると、サイドバーの見出しはこのようになります。

Cocoonのサイトキーカラーとスキンの見出しが影響しないようにする

見出しの青に2色ボーダーが重なってますね。

これは、サイトキーカラーで定義された青の見出しに、後からスキンのボーダー(2色)が適用されているためです。

こちらは、サムライブルースキンの場合。

Cocoonのサイトキーカラーとスキンの見出しが影響しないようにする

サイドバーの見出しはスキンかサイトキーカラーのどちらかにあわせる

スキンも適用して、サイトキーカラーも独自の色を設定したいのであれば、サイドバーの見出しは次のどちらかにするしかありません。

  • スキンの見出しにする(サイトキーカラーは無視)
  • サイトキーカラーで設定した色にする(スキンの見出しを消す)

ということで、それぞれに対応するCSSを作ってみました。

スキンの見出しを残すCSS

次の手順でCSSを追加します。

WordPress管理者画面の『外観』→『テーマの編集』を選択。

Cocoonのサイトキーカラーとスキンの見出しが影響しないようにする

 

テーマは子テーマ。

Cocoonのサイトキーカラーとスキンの見出しが影響しないようにする

 

そして、編集画面の一番下にでも、次のスキンの見出しを残すCSSを追加し、「ファイルを更新」ボタンを押します。。

Cocoonのサイトキーカラーとスキンの見出しが影響しないようにする

↓はミックスシリーズ(グリーン、ブルー、レッド)用のCSS

/* ミックススキンのサイドバーを残す */
.sidebar h3 {
  color: #333435;
  background: none;
}

 

↓はサムライブルーシリーズ(勝色、無印)用のCSS

/* サムライブルースキンのサイドバーを残す */
.sidebar h3 {
  color: #282d48;
  background: none;
}

 

このCSSを子テーマに追加することで、サイトキーカラーの影響を受けずにスキンの見出しが残ります。
Cocoonのサイトキーカラーとスキンの見出しが影響しないようにする

スキンの見出しを消すCSS

続いては、スキンの見出しを消すCSS。

同じように、『外観』→『テーマの編集』から、次のCSSを子テーマに追加。

 

↓はミックスシリーズ(グリーン、ブルー、レッド)用のCSS

/* ミックススキンのサイドバーを消す */
.sidebar h3 {
  border: none;
  padding: 16px 10px;
  margin: 16px 0;
}

.sidebar h3:after {
  content: none;
}

 

↓はサムライブルーシリーズ(勝色、無印)用のCSS

/* サムライブルースキンのサイドバーを消す */
.sidebar h3 {
  border: none;
  padding: 16px 10px;
  margin: 16px 0;
}

.sidebar h3:before {
  content: none;
}

.sidebar h3:after {
  content: none;
}

 

このCSSを子テーマに追加することで、サイトキーカラーそのままでスキンの見出しを消すことができます。

Cocoonのサイトキーカラーとスキンの見出しが影響しないようにする

 

確か、「テーマの編集」で追加したCSSは、Cocoonのバージョンを新しくてもそのまま残ったと思います。

でも、念の為CSSはファイルとしてPCにバックアップすることをおすすめします。

コメント

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