Cocoonﾌｯﾀｰ・ﾌｯﾀｰｳｨｼﾞｪｯﾄ背景色cssｾﾚｸﾀー③

フッターのカスタマイズについて書いていきます。

こんにちは。

いっちゃんです。(@hi_icchan_jp)

前回に引き続き、Cocoonのフッターのセレクターをピックアップします。

フッターカスタマイズ・セレクター

フッターのカスタマイズ・セレクターについてです。

フッターカスタマイズに使えるセレクター一覧

フッターカスタマイズに使えるセレクター一覧です。

フッターのCSSセレクターで背景色変更

1. .footer {
2.   background: #000000; /*フッター背景黒*/
3. }

※フッター背景色は管理画面→Cocoon設定→フッター背景色設定が優先されます。

独自のカスタマイズしたい方はCocoonのフッター背景色設定をやめて下さいね。

フッターのタイトル色変更CSSセレクター

1. .footer-title{
2. color: #000000;  /*フッタータイトル　黒*/
3. }

フッターのタイトル色は簡単に変更できますよ！

フッターウィジェットの背景色変更CSS（フッター色に合わせる）

1. .footer .widget {
2. background-color: #000000;　/*フッターｳｨｼﾞｪｯﾄ背景色黒*/
3. }

フッターの背景色を設定していると、フッターウィジェットを入れた時に色が合わなくなります。

そんな時、上記の内容をカスタマイズの参考にして下さいね。

CSSプチルール

CSSプチルールを下記に少しだけ記載します。

セレクターを指定する時＜p＞のようなﾀｸﾞで囲まれた中身を要素といいます。

用語解説

• <> : 開始タグ
• </>:終了タグ

HTML:下記は箇条書きの一例です｡

上記の箇条書きHTMLに対応するCSSセレクター指定方法

↑　　　　　　　　　　　　　　　　↑

<li>：liタグ内のクラスにicchanが指定されているのでﾄﾞｯﾄ( . ) を付けてcssｾﾚｸﾀーを指定します

ﾀｸﾞを指定する場合はﾄﾞｯﾄ( . )を付けない。

<li>はドットを付けないんです。

以上、プチCSSセレクターを指定する時のルールでした。