新CMS完全対応マニュアル
行（row）のカスタマイズに関する規則
CSSで行（row）のカスタマイズをする際に遵守すべき命名規則とコーディングルールについてまとめています。
行（row）のパーツ配置についてはこちらのページをご確認ください
1.行（row）の命名規則
行（row）に独自クラスを付与する場合、末尾に「_row」をつけたものを命名してください。
なお、「●●_row」へのオプションクラスとして使うクラスには「 _row」はつけなくても構いません。
なお、「●●_row」へのオプションクラスとして使うクラスには「 _row」はつけなくても構いません。
| 命名規則 | 命名例 | |
|---|---|---|
| 行（row） | [任意のクラス名]_row |
arrow_row, |
2. デフォルトで設定されている余白
rowについては、ベースCSSやコピー元サイトでデフォルトで設定されている余白はありません。
デザインに合わせて適宜調整してください。
注意事項
編集のしやすさを考慮し、編集画面上のみ、行（row）の上下に余白がつけられています。こちらは公開画面には反映されません。
※案件によっては余白がなかったり、余白の付き方が異なる場合があります。
※案件によっては余白がなかったり、余白の付き方が異なる場合があります。
3. カスタマイズについて
必ず独自クラスをつけた上で、その中で効くようにスタイルを記述してください。
新CMSでの記述
rowに対してカスタマイズを行う場合は「main（コンテンツ） 」内のrowにネストの形で記述を行います。
※カスタムCSS内で「main（コンテンツ）」で検索すると見つかります。
※カスタムCSS内で「main（コンテンツ）」で検索すると見つかります。
/*----------------------------------
main（コンテンツ）
----------------------------------*/
@include theme-fo-base {
.inner {
.row {
//テストrow ●●ページで使用
.test_row {
//ここに記述
}
}
…以下省略
旧CMSでの記述
新CMSと同様です。
注意事項
旧CMSではTOPページと下層ページで記述場所が分かれているので、ご注意ください。
下記はTOPページへの記述例です。
下記はTOPページへの記述例です。
/*----------------------------------
main（コンテンツ）
----------------------------------*/
/*--- TOP ---*/
.theme-fo-base {
.wrapper {
.contents {
section {
.inner {
.row {
//テストrow
.test_row {
//ここに記述
}
}
…以下省略
© Basic Inc. All Rights Reserved.