JavaScript埋め込みパーツ
使用時にまず行うこと
①独立したrowを作成し、
その中にJavaScript埋め込みパーツを配置する
複数のページでそのJavaScriptを使用する場合→「共通フッター」に配置。
共通フッターが使われてない場合や、他のJSパーツと干渉してしまう場合→「該当ページ内のセクションの一番下」に配置。
■注意点
- 案件では基本的に共通フッターにJSを入れてください。
（ページのセクション内だとサイト全体のどこでJSが使われているか探すのが難しい為） - ここで作成したJS埋め込みパーツ配置用のrowにはJS埋め込みパーツのみ配置し、他のパーツは入れないでください。
（後述の②でJS埋め込みパーツを配置したrowに付与する専用クラスにはデフォルトでつく余白を削除する記述があるため）
②クラス付与&カスタムCSS追記
カスタムCSS
- JavaScript埋め込みパーツを配置したrow（行）にクラス名「js_script_row」を付与する。
- 下記CSSをカスタムCSSの JS記述エリア に追記。
※サイトのデザインに影響しないように、JavaScript埋め込みパーツ配置時にデフォルトでつく余計な余白を消す必要があります。
// JavaScriptパーツの余白削除 フッターでも使用できるようにセクション外
.js_script_row {
padding: 0 !important;
margin: 0 !important;
:is(.col,.cta-column) {
padding: 0 !important;
margin: 0 !important;
.component {
margin: 0 !important;
}
}
}
編集画面用カスタムCSS
- 下記CSSを編集画面用CSSの JS記述エリア に追記。
// JSパーツ編集画面用
.js_script_row {
margin: 30px 0;
.col {
padding: 10px 10px 0 !important;
.component {
margin: 10px 0 !important;
}
}
}
© Basic Inc. All Rights Reserved.