【動画あり】中国語コンテンツについて

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

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

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

こんにちは。

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

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

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

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

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

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

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

CSSに以下を追加してください。

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

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

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

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

CSSに以下を追加してください。

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

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

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

CSSに以下を追加してください。

  1. .footer .widget {
  2. background-color: #000000; /*フッターウィジェット背景色黒*/
  3. }

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

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

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プチルールについて記載しました。

次回も有益な記事が書けるよう頑張ります!


WordPressのインストール代行・カスタマイズをします!

ブログ制作に自信が無い、直し方が分からない方向けです。

いっちゃん
いっちゃん

女性の多くが「WordPressが苦手」ですよね?

事例① 「インストール」で挫折

事例② ”「頭が痛い」し難しい 

事例③ とにかく「分からない」

「何をすればいいの?」と悩む女性のあなたに朗報!

いっちゃんはCocoonのカスタマイズをお手伝いします。

デモサイトを見る >>


いっちゃん紹介

いっちゃん

いっちゃん
『Cocoonをカスタマイズ』

初心者向けにCocoonのカスタマイズをします。ご依頼はこちら。私の幼少期は外国語が嫌いで全く話せませんでした。しかし、多様性に慣れていた私は中国語を学び、人のご縁でシリコンバレーに滞在しました。ただいま、中国語学習動画を有料公開中。詳細はお問い合わせ下さい!

→ プロフィール
→ お仕事のご依頼
→ Cocoonのカスタマイズ

いっちゃんをフォローする !
はなしあいて①.com
タイトルとURLをコピーしました