Cocoon CSS ヘッダー カスタマイズ備忘録

cocoonの魅力の一つはカスタマイズしやすいこと。

ここでは、css.styleのheader関連の変更をするcodeを記録する。
この記事は今後も都度、更新予定。

スタイルの優先順位

まず、優先度は下記の通りで、これが超重要。

 
 高 親テーマ style.css

 ↑ 親テーマ スキン style.css

 │ テーマカスタマイザーの変更内容

 ↓ 子テーマ style.css

 低 子テーマ スキン style.css


これを押さえないと、変更が反映されないことになる。
詳細はCocoonマニュアル参照。

Cocoonスキンの機能の仕様
Cocoonのスキン機能に関する詳細な仕様書です。スキン機能を利用すれば、洋服を着替える感覚でサイトデザインを変更することが可能です。

code

最優先設定のための「!important」

下記にコードを記載するが、スキンのCSSが優先である場合には、スタイルの後に「!important」が必要。

参考:ヘッダーサイトタイトルの左側に余白を作る

/*ヘッダーサイトタイトルの左側に余白を作るskinのスタイルが優先されるためimportant設定*/
.logo {
  padding-left: 20px !important;
}

この例は[padding]を使用したが、想定のイメージによって[margin]と使い分けること。

サイトタイトルの文字の大きさを変更

/*ヘッダーサイトタイトルの文字の大きさを変更*/
.logo {
  dont-size: 20px ;
}

サイトタイトルの左寄せ

.logo {
text-align: left;
}

これはCocoon設定で可能。
ただし、Cocoon設定はCSSより優先度高いので注意。

キャッチフレーズの文字の大きさを変更

/*ヘッダーキャッチフレーズの文字の大きさを変更*/
.tagline {
  dont-size: 20px ;
}

ロゴ・タイトル・キャッチフレーズ 左寄せ

/*ヘッダー_ロゴ・タイトル・キャッチフレーズ左寄せ*/
.header-in .tagline {
  text-align:left;
  padding-left: 30px;
}
.header-in .logo {
  text-align: left;
  padding-left: 30px ;
}

投稿でcodeを貼る方法

投稿で上記のようにcodeを貼る方法は下記の通り。

ブロック  カスタムHTML 選択

コードの最初に <pre> 最後に </pre> をつけるだけ。

参考サイト

Cocoonフォーラムで今後参考になりそうな記事があったため、参考として記録しておく。

サイトタイトルやキャッチフレーズの文字の位置や大きさを変更したい
こんにちは、Cocoonを利用させていただいていますtoshichanと申します。 サイトタイトル等のカスタマイズについてご教示ください。 添付画像のようにヘッダー画像の中に表示されているサイトタイトル及びキャッチフレーズの文字の表示位置や大きさを変更するにはどのようにすればよろしいでしょうか。 添...