ウィジェット -ウィジェットを囲む要素のClass名

※ 以下の内容は、KARTEの仕様を深く理解したい方向けです。ウィジェットを編集する際に、以下の知識が必要になるケースは稀です。

KARTEのウィジェットは、配信先のWebページとのスタイルの競合を防ぐなどの目的のため、ウィジェット編集画面で設定したHTML要素以外の要素が配信時に追加されます。

 

class名 説明
 karte-c  KARTEが配信するHTML要素の中で、最も外側の要素であることを示します。
 karte-r  KARTE側が配信するコンテンツに、ブラウザのデフォルトCSSの影響が及ばないよう、リセットCSSを適用するために使われます。
 karte-g  KARTEのアクション編集画面で記述したCSSが、サイト側のCSSと競合しないようにするために使われます。
 karte-widget  KARTEのウィジェットに共通のCSSを適用するために使われます。
 karte-widget--(各種値)  KARTEのアクション編集画面で設定した、表示位置などの項目を反映させるために使われます。
 karte-widget__backdrop  モーダル表示時の裏側に表示される、黒色半透明の背景部分の領域に使われます。

 karte-widget__container

 karte-widget__countent

 KARTEのアクション編集画面で記述したHTMLを内包する要素に対するスタイルを設定するために使われます。