日本画ページが出来ました!

Cocoonフッター・フッターウィジェット背景色cssセレクター③

CocoonのCSSセレクター③
Cocoon 全カテゴリー

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

 

こんにちは。

いっちゃんです。(@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:下記は箇条書きの一例です。

<ul>

<li class=”icchan“>CSSの説明</li>

<li class=”icchan“>要素の説明</li>

</ul>

 

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

.icchan {

/*任意のCSSを指定する*/

}

↑                ↑

<li>:liタグ内のクラスicchanが指定されているのでドット( . ) を付けてcssセレクターを指定します

 

タグを指定する場合はドット( . )を付けない。

li{

/*任意のCSSを指定する*/

}

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

 

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

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