Cocoonの1カラム背景色、メイン幅変更カスタマイズについて書いていきます。
こんにちは。
いっちゃんです。(@hi_icchan_jp)
今回は特定の固定ページを1カラムにしてメイン幅を設定するカスタマイズをご紹介します。
前提条件:編集画面右横のページ設定→1カラム(広い)を選択していること。
特定の固定ページのメイン幅調節方法
CSSに以下を追加して下さい。
- /* 特定の固定ページのメイン幅調整 */
- .page-id-〇〇〇〇 #main{
- padding-left: 190px;
- padding-right: 190px;
- }
特定の固定ページの背景色変更方法
CSSに以下を追加して下さい。
注意:管理画面→Cocoon→全体→サイト背景色設定を設定していると、こちらが優先されますので解除して下さい。
- /* 特定のページの背景色変更 */
- body.page-id-〇〇〇〇 {
- background-color: #fff; /* 背景色:白 */
- }
上記の.page-id-〇〇〇〇には投稿・固定ページのページ番号を入れます。
※ページ番号とは投稿編集画面の上部に含まれてる番号の事です。
編集画面URL例
上記の例では1919がページ番号ですね。
今回のカスタマイズ内容のマトメです。
- 特定の固定ページのメイン幅変更
- 特定の固定ページの背景色変更
いかがでしたでしょうか?
次回も有益な情報をお届けできるように頑張ります。