翌日に現金が振り込まれます

口座をつくるだけ(無料)

みんなの銀行!はこちら

Cocoonカラム内のカラーを設定する方法

Cocoon
この記事は約2分で読めます。

今回も色の設定に関しての記事です。

ブログ全体の色に関する設定は以下の記事をごらんください。

 

Cocoon設定【全体】【ヘッダー】のカラー設定の上下関係のおさらい

 

今回はこの中のメインカラム、サイドバー、フッターのカラー設定をしてみましょう!

 

スポンサーリンク

Cocoon!カラム内のカラー設定方法

スタイルシートにCSSを加える

カラム内のカラー設定は、Cocoon設定からでは変更できません。

スタイルシートにカスタマイズしていきます。

【外観】→【テーマの編集】→【スタイルシート】

スタイルシートの1番下に記述していきます

/*カラム背景色*/
.header-container,
.main,
.sidebar,
.footer {
background-color: #カラーコード;
}
上記記述のカラーコードに、表示させたいカラーコードを入力してください。
カラーコードはこちらのサイトで見る事ができます

カラーコードをいれたら全てコピーして、スタイルシートの1番下へ追記してください。

記述中のそれぞれの場所が以下の通りになります。

.main→メインカラム
.sidebar→サイドバー
.footer→フッター

いらないのは消していいです。

例)メインカラム→自分のこのブログのサイトキーカラーのうす茶色【#f2e7c7】
サイドバーとフッターは→グローバルメニュー色のこい茶色【#665e47】にしてみます。

/*メインカラム背景色*/
.header-container,
.main, {
background-color: #f2e7c7;
}
/*サイドバー背景色*/
.header-container,
.sidebar,
.footer {
background-color: #665e47;
}

上記の記述をスタイルシートに追加してください。
反映されたのが下の画面

見事に反映されました。メインカラムの色と見出しと同じ色なので、溶け込んでしまいましたね。

メインカラムの色も変更したいという場合、今回の方法で設定してみてください。

 

Cocoon設定の【スキン】は超お手軽に着せ替えできる統一されたデザイン!
コクーン設定の「スキン」について説明します。ワードプレスのテーマって何?のところでもお伝えした「着せ替え」です。また着せ替え~?ダ...

 

コメント

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