ボタン・ダイアログの表示位置を調整する

ウィジェットのボタン・ダイアログ表示位置を調整するには

ウィジェットのボタン・ダイアログ表示位置をCSSを利用して微調整する方法について説明します。

下から100px開けて表示する例。

<style>
    [id^="datasign_cmp"]::part(floating-container) {
        bottom: 100px;
    }
</style>

横幅が990pxより小さい場合、上から100px開けて表示する例。

<style>
    @media (max-width: 990px) {
        [id^="datasign_cmp"]::part(floating-container) {
            top: 100px;
        }
    }
</style>

横幅が990pxより大きい場合、下から100px開けて表示する例。

<style>
    @media (min-width: 991px) {
       [id^="datasign_cmp"]::part(floating-container) {
           bottom: 100px;
       }
    }
</style>

[非推奨]過去案内していた調整方法

ウィジェットを設置することによりボタンやダイアログが画面に表示されます。もし画面上の要素や他のウィジェットと重なってしまう場合は、位置を微調整することができます。調整するには、ウィジェットのタグに下記の属性を設定します。

属性名	値の説明
data-vertical-position	"top"または"bottom"を指定して縦方向位置調整の基準を決めます。
data-desktop-horizon-value	基準からの横方向位置を"50px"のように指定します。（デスクトップ表示(横幅990px以上)の時）
data-desktop-vertical-value	基準からの縦方向位置を"50px"のように指定します。（デスクトップ表示(横幅990px以上)の時）
data-horizon-value	基準からの横方向位置を"50px"のように指定します。（モバイル表示(横幅990px未満)の時）
data-vertical-value	基準からの縦方向位置を"50px"のように指定します。（モバイル表示(横幅990px未満)の時）

設定例

<script id="__datasign_consent_manager__" src="//cmp.datasign.co/v2/※※※※※※※※※※/cmp.js" data-vertical-position="bottom" data-desktop-horizon-value="10px" data-desktop-vertical-value="100px" data-horizon-value="10px" data-vertical-value="50px" async></script>