フッターのカスタマイズについて書いていきます。
こんにちは。
いっちゃんです。(@hi_icchan_jp)
前回に引き続き、Cocoonのフッターのセレクターをピックアップします。
フッターカスタマイズ・セレクター
フッターのカスタマイズ・セレクターについてです。
フッターカスタマイズに使えるセレクター一覧
フッターカスタマイズに使えるセレクター一覧です。
フッターのCSSセレクターで背景色変更
CSSに以下を追加してください。
- .footer {
- background: #000000; /*フッター背景黒*/
- }
※フッター背景色は管理画面→Cocoon設定→フッター背景色設定が優先されます。
独自のカスタマイズしたい方はCocoonのフッター背景色設定をやめて下さいね。
フッターのタイトル色変更CSSセレクター
CSSに以下を追加してください。
- .footer-title{
- color: #000000; /*フッタータイトル 黒*/
- }
フッターのタイトル色は簡単に変更できますよ！
フッターウィジェットの背景色変更CSS（フッター色に合わせる）
CSSに以下を追加してください。
- .footer .widget {
- background-color: #000000; /*フッターｳｨｼﾞｪｯﾄ背景色黒*/
- }
フッターの背景色を設定していると、フッターウィジェットを入れた時に色が合わなくなります。
そんな時、上記の内容をカスタマイズの参考にして下さいね。
CSSプチルール
CSSプチルールを下記に少しだけ記載します。
セレクターを指定する時＜p＞のようなﾀｸﾞで囲まれた中身を要素といいます。
用語解説
- <> : 開始タグ
- </>:終了タグ
HTML:下記は箇条書きの一例です｡
<li class=”icchan“>CSSの説明</li>
<li class=”icchan“>要素の説明</li>
</ul>
上記の箇条書きHTMLに対応するCSSセレクター指定方法
.icchan {
/*任意のCSSを指定する*/
}
↑ ↑
<li>：liタグ内のクラスにicchanが指定されているのでﾄﾞｯﾄ( . ) を付けてcssｾﾚｸﾀーを指定します
ﾀｸﾞを指定する場合はﾄﾞｯﾄ( . )を付けない。
li{
/*任意のCSSを指定する*/
}
<li>はドットを付けないんです。
以上、プチCSSセレクターを指定する時のルールでした。
いかがでしたでしょうか？
①フッターカスタマイズと②CSSプチルールについて記載しました。
次回も有益な記事が書けるよう頑張ります！