新CMS完全対応マニュアル
操作できないことがないように
カスタムCSSの影響によりページ編集画面でクリックできない領域やパーツがないか必ず確認し、崩れている場合には調整してください。
1. 編集画面の崩れが発生する場合
カスタムCSSの影響
下記のプロパティを使用した場合は特に注意が必要です。
- position
- float
- z-index
- display: none
- overflow: hidden
崩れの内容
- 画像が重なっている部分
- position: absolute;で動かしているパーツ
- overflow: hidden;で範囲を制限している箇所
- セクション（section）、inner、 行（row）、 カラム（col）にpositionやfloat、z-indexで9999以下を当てている箇所
- 表示している画像、アイコン画像が小さすぎてクリックパレットマーク等が触れない
注意事項
組み込みが終わったら公開画面だけではなく、必ず編集画面も確認してください。
見た目の崩れだけではなく、操作ボタン・パネルに触れて編集可能かどうかが重要です。
お客様が編集しようとした際、触れないパーツがあるとクレームに繋がってしまいます。
見た目の崩れだけではなく、操作ボタン・パネルに触れて編集可能かどうかが重要です。
お客様が編集しようとした際、触れないパーツがあるとクレームに繋がってしまいます。
2. 具体例とその対策について
2.1 - overflow: hidden;で範囲を制限している箇所
行（row）、 カラム（col）などにoverflow: hidden;が効いている場合、その領域外の操作ボタン・パネルに触れなくなる場合があります。
2.2 - position: absolute; により領域外にパーツが出ている場合
行（row）、 カラム（col）などの領域外に出てしまっているパーツは、他のパーツと干渉して操作できないといったことがないように領域中に収まるよう調整する必要があります。
場合によってはposition: absolute;やtop・bottom、transformなどの配置変更に関する記述を解除する必要があります。
場合によってはposition: absolute;やtop・bottom、transformなどの配置変更に関する記述を解除する必要があります。
2.3 - パーツが重なっている場合
パーツが重なっている場合、重なり順（z-index指定）によって下に配置されているパーツは触れない可能性があります。
下記の例の場合、カラム（col）に設定されているネガティブmarginを打ち消してパーツ同士の重なりを解除することができます。
また、z-indexに関しても通常の設定に戻してください。重なり順をそのままにしておくとそれだけでパーツが触れなくなる可能性があります。
下記の例の場合、カラム（col）に設定されているネガティブmarginを打ち消してパーツ同士の重なりを解除することができます。
また、z-indexに関しても通常の設定に戻してください。重なり順をそのままにしておくとそれだけでパーツが触れなくなる可能性があります。
公開画面と編集画面の見た目が同じである必要はない
一番重要なことはお客様が編集できる状態にすることです。
見た目に著しい差異がある場合は、ディレクターに引き継いでください。
見た目に著しい差異がある場合は、ディレクターに引き継いでください。
3. CSSの記述場所
3.1 - 編集画面用CSS
編集画面の崩れを修正する際は編集画面のみに効く、編集画面用CSSに記述します。
/*----------------------------------
編集画面用CSS（編集画面のみに効くCSS）
----------------------------------*/
@include edit-page {
ここに崩れ対策のCSSを記述する
}
/*------------- 編集画面用CSS END -------------*/
3.2 - カスタムパーツ用CSS
カスタムパーツ 格納場所に記述します。
カスタムパーツの影響による編集画面の崩れに関しては、編集画面用CSSに記述します。
最新のCSSでは記述場所が予め用意されています。ない場合は適宜追加してください。
カスタムパーツの影響による編集画面の崩れに関しては、編集画面用CSSに記述します。
最新のCSSでは記述場所が予め用意されています。ない場合は適宜追加してください。
/*------------------------------
カスタムパーツ 格納場所
基本的にパーツ単体の記述でお願いします。
パーツ名を忘れず記載してください。
-------------------------------*/
@include theme-fo-base {
ここにカスタムパーツ用のCSSを記述する
}
/*--- カスタムパーツ 格納場所 end ---*/
/*----------------------------------
編集画面用CSS（編集画面のみに効くCSS）
----------------------------------*/
@include edit-page {
//カスタムパーツの記述はここにお願いします
ここに崩れ対策のCSSを記述する
}
/*------------- 編集画面用CSS END -------------*/
3.3 - JSパーツ用CSS
JSパーツ集記述場所に記述します。
JSパーツの影響による編集画面の崩れに関しては、編集画面用CSSに記述します。
最新のCSSでは記述場所が予め用意されています。ない場合は適宜追加してください。
JSパーツの影響による編集画面の崩れに関しては、編集画面用CSSに記述します。
最新のCSSでは記述場所が予め用意されています。ない場合は適宜追加してください。
/*----------------------------------
JSパーツ集記述場所
----------------------------------*/
ここにJSパーツのCSSを記述する
/*------------- JSパーツ集記述場所 END-------------*/
/*----------------------------------
編集画面用CSS（編集画面のみに効くCSS）
----------------------------------*/
@include edit-page {
//JSパーツの記述はここにお願いします
ここに崩れ対策のCSSを記述する
}
/*------------- 編集画面用CSS END -------------*/
© Basic Inc. All Rights Reserved.