Cocoonの1カラムの背景色、メイン幅変更

Cocoonの1カラム背景色、メイン幅変更カスタマイズについて書いていきます。

こんにちは。

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

今回は特定の固定ページを1カラムにしてメイン幅を設定するカスタマイズをご紹介します。

前提条件：編集画面右横のページ設定→1カラム（広い）を選択していること。

特定の固定ページのメイン幅調節方法

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

1. /* 特定の固定ページのメイン幅調整 */
2.  
3. .page-id-〇〇〇〇  #main{
4. padding-left: 190px;
5. padding-right: 190px;
6. }

特定の固定ページの背景色変更方法

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

注意：管理画面→Cocoon→全体→サイト背景色設定を設定していると、こちらが優先されますので解除して下さい。

1. /* 特定のページの背景色変更 */
2.  
3. body.page-id-〇〇〇〇 {
4. background-color: #fff;   /* 背景色:白 */
5. }

上記の.page-id-〇〇〇〇には投稿・固定ﾍﾟｰｼﾞのページ番号を入れます｡

※ページ番号とは投稿編集画面の上部に含まれてる番号の事です｡

編集画面URL例

上記の例では1919がページ番号ですね。

今回のカスタマイズ内容のマトメです。

• 特定の固定ページのメイン幅変更
• 特定の固定ページの背景色変更

いかがでしたでしょうか？

次回も有益な情報をお届けできるように頑張ります。